Granolia — Healthy Snack & Pantry HTML5 Template

About This Item

Granolia is a healthy food website template: a bright, crunchy HTML5 template for granola makers, snack bar brands, jam kitchens, nut butter roasters and healthy pantry shops. Olive-lime buttons, a forest footer, sunflower price stickers and hand-lettered Amatic SC titles over clean Manrope type give it the feel of a small-batch kitchen shop. Underneath, it runs real snack-shop logic: a mix-and-match snack box of 12 where the price of every snack falls as the box fills ($2.95 a snack from 1, $2.65 a snack from 6, $2.35 a snack from 12), subscribe and save by frequency (every 2 weeks 15% off, every 4 weeks 10% off, every 8 weeks 5% off).

It also has a nutrition panel per 100 g and per bar or serving on every product, nut-free, gluten-free and vegan filters. Finally, it has gift cards with a live preview and a dispatch clock that knows whether today’s orders still leave the kitchen. It ships with light and dark mode, right-to-left support and WebGL oat flakes – flakes and seeds tumbling at the edges of the page titles and a nut bar built from flakes breathing in the footer.

Three Home Pages

• Home 01 – Snack Shop: a hero slider with hand-lettered titles and a price sticker, fresh-in cards, Three Ways To Buy (one-off, snack box, subscription), featured products with range tabs, Snack Box Fill – the box fills bar by bar as you scroll while the price per bar steps down through the tiers – weekly deals, the subscribe band, reviews and the journal.
• Home 02 – Granola & Bars: a split hero with per-bar figures, the four ranges, photo strips, Break One Open – a granola cluster breaks into oats, almonds, honey, berries, seeds and cacao that fly out to labelled places with their share and origin – reviews. Then come a per-bar nutrition panel with diet chips, the popular bars and the FAQ.
• Home 03 – Jams & Nut Butters: a full-width jar hero, bestsellers, verdicts from customers, the jar’s label turns round the jar as you scroll, from the front to the ingredients to the per-100 g panel – the nuts, why small batches, the facts strip and the pantry shop.

Shop Pages

• Shop: range filter with counts, nut-free, gluten-free and vegan filters. It also has a price ceiling, on sale only, sort by price, protein, sugar or rating, search over names and ingredients. Finally, it has an empty state.
• Product: gallery, one-off or subscribe with each frequency’s price, quantity, the nutrition summary per 100 g or per bar, the full panel, ingredients, allergens and reviews.
• Snack Box: pick twelve from the bars and nut packs with diet chips. The box’s cells fill as you pick, the tier and the next price drop are spelled out, Fill It For Me completes the box, and the box can come on repeat.
• Subscribe & Save: choose what comes, how often and from when. See the saving, the shipping, the price per delivery and per month, and the next three dispatch days.
• Nutrition & Allergens: every product’s panel in one list, free-from chips, sort by protein, sugar, energy or fibre, per 100 g or per serving, and two panels side by side.
• Gift Cards: an amount (or your own, kept between the limits), a design and the recipient. It also has a send date and a message, with the card redrawn as you type, plus a balance check.
• Cart & Checkout: product, subscription, snack box and gift card lines and a discount code. It also has a meter toward free shipping (a full snack box always ships free; gift cards go by email), tax, then a three-step checkout where Continue never blocks and only Place Order checks the fields. Every order gets a number.
• Order Tracking & My Account: find an order and see its stage from the dispatch clock. An account with orders, subscriptions to skip, pause or re-time, and a gift card balance.

Inner Pages

Granolia includes Shop, Our Ranges, Range Details, Product, Cart, Checkout, Wishlist and Order Tracking. It also has Build A Snack Box, Subscribe & Save, Gift Cards, Nutrition & Allergens and Ingredients. Then come Our Kitchen (with the bake clock), About Us and Our Team. There are also Team Details, Gallery, Reviews, FAQ with search, Blog and Blog Details. It also has My Account, Login, Register and Forgot Password. Finally, there are Contact (working PHP form and map), Coming Soon and 404 – thirty-two pages in total.

Healthy Food Website Template Features

• 32 HTML pages, 3 unique home page designs
• 28 products in 5 ranges from one data block – every card, panel, bag line and total agrees
• A tiered mix-and-match snack box, subscribe and save by frequency, gift cards and a dispatch clock with a 2:00 pm cut-off
• Nutrition panels per 100 g and per bar or serving, rounded the way a pack label rounds, allergen and diet filters.
• Light and dark mode on one switch, remembered between visits, with no flash on load
• Right-to-left stylesheets for every page and a flag language picker that turns any page around (Bootstrap RTL included)
• WebGL oat flakes tinted by the theme colours, and a nut bar of flakes in the footer
• A Bar Snap preloader, photos and cards that tear open along a zig-zag edge, price stickers that pop and peel, and three scroll moments that never pin the page
• Swiper sliders, Fancybox galleries and video, counters and countdowns
• prefers-reduced-motion support for accessibility
• CSS-variable design tokens for both themes
• Working PHP form handler with optional invisible reCAPTCHA v3
• Font Awesome Free loaded locally, plus illustrated icons for the ranges and the free-from marks
• Fully responsive with a desktop-first breakpoint system and wide-screen layouts
• W3C valid, zero console errors
• Well-commented code with a numbered CSS table of contents and JS index
• Documentation included

This healthy food website template ships with documentation, free lifetime updates and an instant download. Every page also works on phones, tablets and desktops. Granolia also comes as React, Vue, Angular and WordPress, or in the developer bundle at 20% off. Browse more Grocery & Organic HTML5 templates.

Credits

Bootstrap 5.3, jQuery 3.7.1, Swiper 11, GSAP 3 with ScrollTrigger, Fancybox 3.5 and Font Awesome Free. It also uses RTLCSS and Google Fonts (Manrope, Amatic SC).