Pantrio — Organic Grocery Store HTML5 Template

About This Item

Pantrio is a grocery website template: a fresh, generous HTML5 template for organic grocers, farm shops, zero-waste stores and produce delivery. Navy headlines in Abril Fatface, sky-blue buttons, peach prices and packshots on soft pastel tiles give it the feel of a well-kept market. Underneath, it runs real grocery logic: every product is priced by weight or by the piece. In fact, 15 of 35 products are weighed in their own steps, from 100 g. A delivery slot picker offers two-hour slots seven days ahead, with places left, a cut-off and an evening fee.

There is also a $25 minimum order with free delivery from $50. Finally, with recipe to basket you pick the servings. Then every ingredient lands in the basket in the amount the dish needs. It ships with light and dark mode, right-to-left support and WebGL layers – rolling hills behind the night bands and a basket rocking in light in the footer.

Three Home Pages

• Home 01 – Market: a full-photo hero slider, the store’s terms on one strip (minimum order, free delivery, the next free slot), New In The Aisles with aisle tabs and a quick-add bar on every card. Then comes a film band and Basket Fill – the week’s shop drops into the basket as you scroll while the total counts up past the minimum order to free delivery – Why Shop Here. Finally, the page ends with a recipe hub that adds a whole dish to the basket, the weekly deals with a countdown, the slot picker, reviews and a shop-the-feed strip.
• Home 02 – Aisles: a boxed hero with aisle tiles and the produce wall (a gapless wall of pastel tiles). In Walk The Store, the six aisle signs slide sideways as the section scrolls. Then come on sale, top rated and new lists and offer banners. Finally, the page ends with the deal of the day (weight presets and a clock to midnight) and the journal.
• Home 03 – Farm To Door: a product hero on cream with produce cut-outs and three of the farms. In How Your Order Travels, the van’s route is drawn across the fields from the farm to your door. Each stop lights as it is reached. Finally, the page ends with the weekly box, counters on a night band, deals and recipes.

Grocery Pages

• Shop: aisle filter with counts, price per unit, sold by weight or by the piece, on-offer only, sort and search. It also has an empty state.
• Product: gallery, weight presets with their prices, a stepper in the product’s own step, the live line price, storage and reviews.
• Basket & Checkout: lines weighed in grams or counted in pieces, a discount code and tax. A meter counts toward the minimum order and free delivery. Then comes a three-step checkout – address, slot, payment – where Continue never blocks. Only Place Order checks the fields, the slot and the minimum. Every order gets a number.
• Delivery & Slots: the slot picker and the fees. It also has a ZIP code check against the delivery area and what happens on the day.
• Weekly Box: a builder – size, how often (every week earns the biggest discount) and extras – priced per delivery and per month, with the first free slot.
• Recipes: meal filters and search. Each recipe scales its ingredients to the servings, rounds them up to what the shop sells, skips what you already have and adds the rest in one click.
• Order Tracking: find an order and see the van stopped at its stage on the farm-to-door map.
• Weekly Deals: the deal of the day and the weekly deals with their own countdowns.

Inner Pages

Pantrio includes Shop, Aisles, Weekly Deals, Product, Cart, Checkout, Wishlist, Order Tracking and Recipes. It also has Recipe Details, About Us, Our Process, Our Farms and Farm Details. Then come Our Team, Gallery, Delivery & Slots, Weekly Box, FAQ with search and Blog. There are also Blog Details, My Account, Login, Register and Forgot Password. Finally, there are Contact (working PHP form and map), Coming Soon and 404 – thirty-one pages in total.

Grocery Website Template Features

• 31 HTML pages, 3 unique home page designs
• Products priced by weight or by the piece from one data block – every card, basket line and total agrees
• Delivery slots with capacity, cut-offs and an evening fee; a minimum order and a free-delivery threshold
• Recipe to basket with a servings scaler; a weekly box builder; order tracking on a drawn route
• 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 layers tinted by the theme colours: rolling hills and a basket rocking in light
• A Basket Fill preloader, product cards that slide in like a shelf being stocked, 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 line icons in two inks
• 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 grocery website template ships with documentation, free lifetime updates and an instant download. Every page also works on phones, tablets and desktops. Pantrio 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 (Abril Fatface, PT Sans).