Overview

A bright, crunchy HTML template for granola makers, snack bar brands, jam kitchens, nut butter roasters and healthy pantry shops. Granolia ships three home pages, a light and a dark theme, right-to-left support, and shop logic that is worked out rather than typed in: a mix-and-match snack box priced by tiers, subscribe and save by frequency, a nutrition panel per 100 g or per bar on every product, allergen filters, gift cards and a dispatch clock.

What’s included

• 3 home pages, each with its own scroll moment: the snack box fills cell by cell as the price per bar steps down, a granola cluster breaks into its labelled ingredients, and a jam jar’s label turns to its nutrition panel
• 28 products in 5 ranges, each with a full nutrition panel and its free-from flags
• Snack box of 12: $2.95 each from 1, $2.65 each from 6, $2.35 each from 12, premium picks $0.40 more, a full box ships free
• Subscribe and save (every 2 weeks 15%, every 4 weeks 10%, every 8 weeks 5%), with the next three dispatch days
• Nutrition finder with nut-free, gluten-free and vegan chips, per 100 g or per serving, and a two-product compare
• Bag with a free-shipping meter, discount code, tax and a three-step checkout with an order number; order tracking; an account with subscriptions to skip, pause or re-time
• Gift card designer with a live card and a balance check
• Light and dark mode, right-to-left stylesheets with a flag language picker, WebGL oat flakes tinted by the theme
• Bar Snap preloader, Pack Tear reveals with popping price stickers, Swiper sliders and Fancybox galleries
• Fully responsive, W3C-valid, zero console errors

Getting Started

Thank you for choosing Granolia. Follow the steps below to get your site live.

1. Open locally

Unzip the downloaded package and open granolia/index.html in any modern browser. No build tools or server are required — the shop, the bag, the snack box, subscriptions, the nutrition finder and the gift cards all work straight from the files.

2. Deploy to a server

Upload the contents of the granolia/ folder to your hosting provider using an FTP client or your hosting control panel. Once uploaded, navigate to your domain and the template will load immediately.

3. Customise

All custom styling lives in assets/css/style.css (with a numbered Table of CSS at the top) and assets/css/responsive.css. Colours and fonts are CSS variables — see Colors & Fonts. Products, ranges, nutrition, the box, subscriptions and gift cards live in one place — see Shop Logic.

File Structure

Below is an overview of the key files and folders included in this template.

Folder Structure

The package unzips to two folders: Documentation/ (this guide) and granolia/, the template.

granolia/
├── *.html                              the 32 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the contact form
└── assets/
    ├── css/
    │   ├── style.css / style.rtl.css   all custom styles (and the right-to-left twin)
    │   ├── responsive.css / .rtl.css   breakpoints 1399 / 1199 / 991 / 767 / 575
    │   ├── fontawesome-all.css         Font Awesome Free, loaded locally
    │   └── plugins/                    bootstrap (+ rtl), fancybox, swiper
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (38 blocks)
    │   └── plugins/                    bootstrap, gsap, jquery, fancybox, ScrollTrigger, swiper
    ├── fonts/theme-icons/              the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── banner/                      14 files
        ├── blog/                        5 files
        ├── cutouts/                     18 files
        ├── faces/                       5 files
        ├── flags/                       6 files
        ├── gallery/                     14 files
        ├── icons/                       20 files
        ├── logo/                        3 files
        ├── menu/                        3 files
        ├── products/                    29 files
        └── team/                        6 files

Colors & Fonts

The whole design is driven by CSS variables declared at the top of style.css. Colours used with transparency have an -rgb twin (for example --gn-lime-rgb) — change both together.

Lime fills the buttons and the menu band with dark ink text; its deeper partner writes links and small labels. Forest carries the footer and the night bands, sunflower the price stickers and ratings, raspberry the New and Sale labels. Cream, peach and mint are the section grounds.

Fonts

Two Google Fonts: Manrope (headings, body, buttons, prices) and Amatic SC (the hand-lettered hero titles, eyebrows, ghost words and stickers). Swap them by editing the Google Fonts link and --gn-ff-head / --gn-ff-body / --gn-ff-hand.

Logo

The logo — a golden granola bar with a leaf and the two-tone “Granolia” wordmark — ships as PNG files in assets/img/logo/: logo.png (light grounds), logo-light.png (dark grounds and dark mode) and favicon.png. The preloader draws the same bar so it can snap in two.

Light & Dark Mode

Every header (and the mobile menu) has a theme switch. The choice is saved under granolia-theme and applied by a one-line script in the <head> before the page paints. The switch sets data-theme="dark" on <html>.

The dark colours live in the [data-theme="dark"] block right after :root. The forest footer and night bands stay dark in both themes; packshot cards keep their white ground.

Shop Logic

Every figure comes from one data block, JS block 09 Granolia Data (var GRANOLIA) near the top of main.js. Edit it once and the cards, panels, prices, tiers, dates and totals follow.

Products and nutrition

Each product has a range, a price (and was when on sale), its flags (nutFree, glutenFree, vegan), its allergens, its ingredients and n: eight values per 100 g — energy (kcal), fat, saturates, carbohydrate, sugars, fibre, protein, salt. A bar has its own weight (bar), so its panel reads per bar; every other range uses the range’s serving (granola 45 g). Values round the way a pack label does: energy to the kcal, salt to two places, the rest to one.

The snack box

12 cells. The price of every snack in the box follows the tier the box has reached: $2.95 each from 1, $2.65 each from 6, $2.35 each from 12; premium picks add $0.40 each; a full box always ships free.

Subscribe and save

Every subscription line is the shelf price less the frequency’s saving (every 2 weeks 15%, every 4 weeks 10%, every 8 weeks 5%), in whole cents rounded half up. Honey & Almond Granola at $9.50 every two weeks is $8.08. The monthly figure spreads a delivery over 30.44 days. Customers skip, pause or re-time their subscriptions on the account page.

Dispatch, shipping and tax

Orders placed before 2:00 pm Monday to Friday leave the kitchen that day; later ones the next working day. Parcels arrive 2 days after dispatch (Sundays skipped). Shipping is $5.95, free from $45.00 or with a full snack box. Tax is 6% of the goods. The code CRUNCH10 takes 10% off.

Gift cards

Amounts $25 / $50 / $75 / $100 or any whole amount from $10 to $250, three designs, sent today or on a date up to a year ahead, valid three years. Gift cards go by email, so they carry no shipping and no tax (tax is charged when the card is spent). The balance check reads gift.issued; try GRNL-2525-OATS.

The bag, wishlist, discount code, orders and subscriptions are kept in the browser (localStorage). The first visit starts with a small demo bag; set the demo lists in doShop() (block 27) to [] to start empty.

WebGL Layers

One small runner draws two layers of point sprites shaped in the shader: flakes — oat flakes and seeds tumbling slowly at the edges of the page titles, the forest bands, coming soon and 404 — and bar — the footer’s nut bar built from flakes, clusters, seeds and berries, breathing apart and back. Each is one canvas:

<canvas class="gn-gl" data-gl="flakes" aria-hidden="true"></canvas>

Colours come from --gl-1, --gl-2, --gl-3 and --gl-alpha on the section. A layer only runs while on screen; reduced motion gets one still frame.

RTL (Right To Left)

Right to left comes from the stylesheets, not from separate pages: the flag language picker lists the languages that read each way. Choosing Arabic stores the direction (granolia-dir) and reloads; the head script sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute. Nothing is translated. To make a page right to left for good, add dir="rtl" to its <html> and load bootstrap.rtl.min.css, style.rtl.css and responsive.rtl.css in place of the three LTR files.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, organised into 38 numbered blocks:

• 01–08 — Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals, Back To Top, Anchor Scroll, Light & Dark Mode, Direction, WebGL Oat Flakes. The core every page shares: the Bar Snap preloader, the header, the Pack Tear reveals, the theme and direction switch and the WebGL Oat Flakes.
• 09–10 — Granolia Data, Store Engine & Clocks. Granolia Data holds every figure; the Store Engine prices, converts nutrition per serving, filters allergens and runs the dispatch, shop-hours and bake clocks.
• 11–19 — Custom Select, Counters & Rings, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, counters, sliders, accordions, filters, search, newsletter, choice cards.
• 20–25 — Snack Box Fill, Granola Cluster, Jar Label Turn, Search, Range Menu & Week Clock, Per-Bar Panel & Diet Chips. The three scroll moments (Snack Box Fill, Granola Cluster, Jar Label Turn), the header search, the range menu and the home tools.
• 26–38 — Contact Form, Shop Engine, Account Forms, Snack Box Builder, Article Tools, Demo Forms, Subscribe & Save, Nutrition Finder, Order Tracking, My Account, Gift Cards, Launch Countdown, FAQ Search. The feature pages: contact, the shop (bag, checkout, wishlist), accounts, the snack box builder, articles, demo forms, subscribe and save, the nutrition finder, order tracking, the account, gift cards, the launch countdown and the FAQ.

Each block is a self-contained doSomething() that skips pages without its section. Every animation respects prefers-reduced-motion.

Images

The package ships with neutral placeholder images at the correct dimensions. Replace them with your own using the same file names. Images are grouped inside assets/img/:

The logo files, the illustrated icons, the jar label artwork and the language flags are included. All demo photography on the live preview is for preview purposes only and is not included in the download.

Contact Form

The contact form posts to sendmail.php, a lightweight AJAX mail handler; the message appears under the button without reloading the page. The newsletter, checkout, gift card, comment and account forms are demo forms that confirm on screen. To activate the mail handler:

1. Set your email address

$email = 'example@example.com';

2. Upload to a PHP host

The form needs PHP mail() support. On a local computer or a static host it shows an “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

• Create v3 keys for your domain in the Google reCAPTCHA admin console
• In sendmail.php, replace YOUR_RECAPTCHA_V3_SECRET_KEY with your secret key
• In contact.html, add a hidden token field inside the form and load the script with your site key:

<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<script>
  grecaptcha.ready(function () {
    grecaptcha.execute('YOUR_SITE_KEY', { action: 'contact' }).then(function (token) {
      document.getElementById('g-recaptcha-response').value = token;
    });
  });
</script>

Credits

• Bootstrap 5.3.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3.5
• Font Awesome Free
• RTLCSS
• Google Fonts: Manrope, Amatic SC

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embed and the video popup.

Support

If you have any questions or need help with the template, please reach out through the marketplace where you purchased the template: open the item there and send us your question from its support page. We aim to respond within 24–48 hours.