Grocero Documentation


Welcome to Grocero! A modern grocery & food eCommerce HTML template built with Vite, Tailwind CSS v4, and vanilla JavaScript — ready for ThemeForest buyers who open files locally or deploy to any static host.

Ready HTML Files

Open index.html (Demo 1) or any page — no build step required for buyers.

Tailwind CSS v4

Utility-first styles with design tokens in a single compiled stylesheet.

Perfect Responsive

Layouts tuned from mobile (375px) through 1920px desktop.

RTL-Ready Utilities

Logical properties (mbs, inset-s, …) for easier RTL adaptation.

Fast Loading

Optimized assets, Swiper carousels, and lean vanilla JS interactions.

24/7 Support

Dedicated support via our Rainbow IT support forum.

Getting Started

Grocero is a multi-page grocery / supermarket eCommerce HTML template. It includes homepage demos, shop & checkout flows, account pages, product detail variants, blog/content pages, and UI overlays (mini cart, quick view, auth modals, mobile menu, and more).

Core Features

  • HTML5 + Tailwind CSS v4
  • 4 homepage demos
  • Shop, cart, checkout & order tracking
  • Multiple product detail layouts
  • Account, auth, wishlist & compare pages
  • Blog, about, contact & policy pages
  • Mini cart drawer, quick view, modals & offcanvas
  • Swiper.js carousels
  • Font Awesome icons
  • Self-hosted Inter + IBM Plex Sans
  • Local Font Awesome + Swiper (no CDN required)
  • Well-structured, reusable markup
  • Dedicated support & lifetime updates

What's Included

After purchasing Grocero on ThemeForest, download the package from your Envato account. The Main Files contain:

  1. 1-Full-Template — Complete HTML package: all demos, pages, products, overlays, and assets.
  2. 2-Demo-Only-Packages — Lighter packs per homepage demo (demo-1 … demo-4) with shared pages.
  3. 3-Documentation — This HTML documentation.

How to Use Grocero

Grocero is a static HTML template — there is nothing to “install” like WordPress. Browsers render the HTML files directly.

1. Browse locally

Unzip 1-Full-Template and open root index.html — that is Homepage Demo 1 (same content as demos/demo-1.html). Or open any file under demos/, pages/, or products/. Paths are relative for file:// compatibility.

The live ThemeForest preview splash / demo selector is hosted separately and is not included in the Main Files zip.

2. Edit content

Use a code editor (VS Code, Sublime Text, etc.). Replace demo text, images, and links with your content, then upload the folder to any static host (cPanel, Netlify, Vercel, S3, …).

3. Upload to a server

Upload the full template folder via FTP/SFTP or your host’s file manager. Point the domain document root at that folder so index.html loads first. No PHP/Node runtime is required for the static package.

Package Structure

ThemeForest Main Files layout after unzip:

1-Full-Template

Root index.html is the primary homepage (Demo 1). Other homepage styles live under demos/. 

1-Full-Template/
├── index.html              # Homepage Demo 1 (entry point)
├── demos/                  # demo-1.html … demo-4.html
├── pages/                  # Shop, cart, checkout, account, content…
├── products/               # Product detail variants
└── assets/
    ├── css/
    │   ├── style.css                 # Compiled Tailwind / theme CSS
    │   ├── fonts.css                 # Local Inter + IBM Plex Sans
    │   ├── fontawesome-all.min.css
    │   └── swiper-bundle.min.css
    ├── js/
    │   ├── main.js                   # Template interactions
    │   └── swiper-bundle.min.js
    ├── fonts/                        # .woff2 font files
    ├── images/                       # Logos, products, banners, …
    └── favicon/

2-Demo-Only-Packages

Each demo pack (demo-1 … demo-4) includes that homepage as root index.html plus a curated set of shared shop/account/content pages and assets — useful if you only need one homepage style.

Template Structure

How HTML, CSS, and JavaScript are organized in the buyer package.

HTML Structure

Pages are complete HTML documents with a shared layout pattern:

  • Sticky header (promo bar, search, cart, category nav)
  • Main content sections
  • Footer
  • Global overlays (mini cart, mobile menu, auth modals, quick view, …) included on pages that need them

Interactivity uses data attributes (not framework classes). Example: 

<!-- Dialog open trigger -->
<button type="button" data-dialog-open="mini-cart-drawer">Cart</button>

<!-- Expandable section -->
<section data-expandable data-expanded="false" class="group">…</section>

CSS Files and Structure

Each page <head> loads local stylesheets (no external CDN required): 

assets/css/fonts.css
assets/css/fontawesome-all.min.css
assets/css/swiper-bundle.min.css
assets/css/style.css

Brand tokens (override with custom CSS after style.css, or rebuild from the developer source):

  • Primary: #d70465
  • Secondary: #fcc550
  • Success / stock: #5bb02b
  • Container max: 1320px (container); header uses wider container-header

Fonts: Inter (UI/body) and IBM Plex Sans (headings) are self-hosted under assets/fonts/ and declared in fonts.css.

JavaScript Files

Scripts are loaded from the document <head> (deferred / module) so the page can start parsing sooner: 

assets/js/swiper-bundle.min.js   
assets/js/main.js

main.js initializes dialogs, dropdowns, sticky header, tabs/switchers, quantity controls, expandable sections, countdowns, carousels, product-card add-to-cart, and related UI on DOMContentLoaded. Global overlays (mini cart, mobile menu, modals) are included near the end of the body.

Pages & Demos

Inventory of HTML files in the full template package.

Homepage Demos

  1. index.html / demos/demo-1.html — Classic grocery homepage (default entry)
  2. demos/demo-2.html — Alternate layout & sections
  3. demos/demo-3.html — Compact / editorial style
  4. demos/demo-4.html — Minimal / focused above-the-fold

Start with root index.html (Demo 1). Open other files under demos/ for alternate homepage styles. There is no in-package catalog / page navigator — use the ThemeForest live preview for browsing demos online.

Inner Pages (pages/)

  • Commerce: shop-filter-1/2/3, cart, checkout (+ shipping, delivery, payment, thank-you), wishlist, promotions, order-track-1/2
  • Account: account, orders, login, register, reviews, compare, payment-methods, notifications, help-center
  • Content: about, contact, blog, blog-single, all-categories, all-brands, terms-policy, privacy-policy, 404, maintenance

Product Pages (products/)

  • product-single, product-gallery, product-grid, product-package
  • product-bulk, product-stock-out, product-full-screen, product-sticky-thumb
  • product-sidebar-grid, product-sidebar-grid-2, product-sidebar-grid-under-details

Change Contents

Common customizations for branding and content.

Changing Images

Replace files under assets/images/ (products, banners, logo, blog, …) keeping the same filenames, or update the src / srcset paths in HTML to your new files. Prefer WebP/PNG/JPG optimized for web.

Changing Colors

Primary brand pink is #d70465; secondary gold is #fcc550. In the static package, override after style.css: 

:root {
  --color-primary: #d70465;
  --color-secondary: #fcc550;
}

If you rebuild from the developer source (Vite + Tailwind), update tokens in src/styles/style.css under @theme and run a fresh production build.

Changing Fonts

Fonts are self-hosted. To swap families:

  1. Add your .woff2 files under assets/fonts/.
  2. Update @font-face rules in assets/css/fonts.css.
  3. Adjust Tailwind / CSS font-family tokens (or rebuild from source src/styles/style.css) so UI classes use your new family names.

Interactions

UI behavior is driven by data-* attributes. JS sets attributes; CSS (Tailwind variants) styles states. Prefer editing markup attributes over rewriting JS.

Common Data Patterns

  1. Dialogs / drawers: data-dialog-id, data-dialog-open, data-dialog-close, data-dialog-panel
  2. Dropdowns: data-dropdown, data-dropdown-trigger, data-dropdown-menu, optional data-dropdown-portal / data-dropdown-align
  3. Sticky header: data-sticky-header, data-sticky-wrap, data-sticky-spacer
  4. Tabs / switcher: data-switcher, data-switcher-option, data-active
  5. Quantity: data-quick-view-qty (+ increment / decrement / input)
  6. Expandable: data-expandable, data-expandable-toggle
  7. Countdown: data-countdown, data-countdown-duration
  8. Add to cart (cards): data-add-cart, data-add-cart-trigger, counter controls

Overlays & Drawers

Key overlays include mini cart drawer, mobile menu / shop canvas, quick view, login & register modals, share cart, and filter / shipping / coupon sheets. Open them with data-dialog-open="…" matching the overlay’s data-dialog-id.

Support

Thank you for purchasing Grocero.
If you have questions beyond this documentation, open a ticket at our Support forum.

Please include your purchase code and a clear description of the issue (browser, screenshot, steps to reproduce).

Change Log

v1.0.0 — Initial ThemeForest release.

  • 4 homepage demos; root index.html = Demo 1
  • Full commerce, account, content & product page set
  • Overlays: mini cart, mobile menu, auth, quick view, and more
  • Tailwind CSS v4 design system
  • Self-hosted fonts, Font Awesome, and Swiper (offline / file:// ready)

Need customization or custom development?

Email Us