Grocee Documentation

Grocee is a Food eCommerce HTML template that is perfect for the Organic Food industry. You can customize this template as you like and it’s suitable for all industries such as agriculture, bakery, eco food, farm, fresh, modern, natural, organic, organic food, fruits, organic fruits, organic life, organic shop, vegetable, and other.

Vanilla JavaScript

We used Vanilla JavaScript. No jQuery dependencies. It is a really strong feature to get the best performance.

Sass Available

Separate Sass/scss files are available for each single module.You can easily edit the SCSS files.

Bootstrap compatible

We've only include the CSS bootstrap grid layout to get better performance. But you can include any element if you want.

Perfect Responsive

This is a responsive website. We've made very clean designs for mobile, tablet, laptop, and desktop devices.

Fast Loading Speed

grocee main important feature is faster loading. We've followed the latest lighthouse performance matrix.

24 Support System

We provide 24 hours support for our customers. Our main goal is client satisfaction as well as high-quality services provided.

Getting Started

Welcome To Grocee : Grocee - Organic Food HTML Template is a modern as well as a responsive Bootstrap 5 template.

Item Name : Grocee Organic Food HTML Template

Item Version : v1.0.0

Author : Hooktheme

Support Forum : hooktheem@gmail.com

Files Included

Do not directly upload the zip file you downloaded from Themeforest. To begin, unzip the ThemeForest file you just downloaded.
html-structures-img

Template Structures

File Structures

Grocee Files Structure. You can easily find any file.

HTML Files

  • 33 html pages

assets/css - Css Folder

  • global.scss
  • header.scss
  • slider.scss
  • product.scss
  • banner.scss
  • blog.scss
  • testimonial.scss
  • newsletter.scss
  • shipping.scss
  • instagram.scss
  • footer.scss
  • quickview.scss
  • accordion.scss
  • portfolio.scss
  • brand-logo.scss
  • breadcrumb.scss
  • about.scss
  • shop.scss
  • product-details.scss
  • blog-details.scss
  • contact.scss
  • cart-page.scss
  • checkout.scss
  • my-account.scss
  • 404.scss
  • login.scss
  • compare.scss
  • faq.scss
  • preloader.scss

assets/css - Css Folder

  • bootstrap.min.css
  • swiper-bundle.min.css
  • glightbox.min.css
  • style.css

assets/js - Js Folder

  • bootstrap.min.js
  • popper.js
  • swiper-bundle.min.js
  • glightbox.min.js
  • script.js

Files Structure

html-structures-img

HTML Structure

html-structures-img

Sass Files Structure

html-structures-img

CSS Files Structure

html-structures-img

Google Fonts Include

html-structures-img

JavaScript Structure

html-structures-img

Changing Contents

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde quaerat molestias dicta consequatur excepturi nulla fugiat,
odio pariatur voluptatum perspiciatis eligendi, molestiae ad sunt commodi?

Changing CSS Global Variable

changing-content-img

Changing Color Scheme

changing-content-img

Changing Product Image

changing-content-img

Changing Testimonial Image

changing-content-img

Changing Blog Image

changing-content-img

How to customize bootstrap

We've only include the CSS bootstrap grid layout to get better performance. But you can include any element if you want.

To include Bootstrap Core CSS and JS files you need to follow 2 steps,

  1. You need to go to HTML file </head> end tag
    changing-content-img
  2. You need to go to HTML file </body> end tag
    changing-content-img

Change Log

01-03-2022

  • Release Initial release

03-11-2022

  • New Newsletter Popup Added
  • Fixed Minor CSS Issue

04-11-2022

  • Update Bootstrap v5.0.2

Support Desk

After purchasing, If you have any further questions about this template, feel free to contact us via hooktheem@gmail.com. We will be more than happy to assist you.