Protidin – Grocery Ecommerce Website Template

Protidin is a grocery ecommerce website template for online shops that stock a bit of everything. Think fresh produce, meat and fish, dairy and eggs, rice, dal and oil, bakery, snacks, baby care, cleaning and frozen food. It keeps a long catalogue tidy, so a shopper can fill the weekly basket in a few minutes.

The name means every day, and the design is made for daily use. It comes with Themeve Commerce, our own shop plugin, which handles the cart, checkout, payments, couriers and tracking. You do not need WooCommerce. Below is the full list of what the shopper sees and what you control.

Who can use this grocery ecommerce website template

The demo is a supermarket with 12 departments. That is just an example. The same layout fits any shop that sells many small items in many departments:

• A neighbourhood grocer moving its full range online
• A supermarket chain with a few branches to list on an Our Stores page
• A new delivery-first store that wants to look settled from day one
• Fresh produce and meat shops that also sell pantry items
• Baby care, household and cleaning product sellers
• Wholesale-style stores that sell by pack, with many brands
• Pharmacy-and-grocery mixed stores that need clear departments
• Organic and natural food sellers, since it also works as an organic food website template

If you sell rice and shampoo in the same order, this template was drawn with you in mind. If you sell only a handful of products, a lighter theme will be easier to manage.

Light enough for a long catalogue

A big catalogue should not mean a slow site. The front end loads one stylesheet and one script, and the script does not need jQuery. There is no page builder behind the homepage. The plain white cards use a small amount of code, which helps on a phone with a weak signal.

• One CSS file and one JavaScript file on the front end
• No page builder and no slider plugin
• Google Fonts can be switched off
• Load more on catalogue grids is a real link to the next page, turned into an in-place append by the script
• Compact cards on phones, with the header folded to menu, logo and cart

Front-end features of the grocery ecommerce website template

Three ways to find a product

A supermarket lives or dies on how fast people find things. The theme gives shoppers three ways in.

• On wide screens, a sticky departments sidebar keeps a numbered list of every department beside the homepage blocks as you scroll
• The department bar opens an All departments panel, with departments on the left and their aisles, with pictures, on the right
• Shop by aisle turns every department into a numbered aisle card that lists its aisles

Delivery area picker

The header has a Deliver to picker. You type your areas and their delivery times in Theme Options. The shopper picks theirs, and the browser remembers it for the next visit.

That one choice answers the question do you deliver to my area before anyone has to call you. A service band above the footer carries a delivery areas card, and the demo includes a Delivery Areas page you can edit.

Weekly flyer and daily checklist

• This week's flyer: up to eight offers on a printed-flyer panel, valid Saturday to Friday. Each offer has a price burst, the old price, the saving and a quick add button.
• Daily checklist: up to ten everyday items, all ticked by default. The shopper unticks what is already at home, sees the total and adds the rest to the bag in one tap.

Twenty-five homepage blocks

The homepage has 25 blocks. Switch any of them off, drag them into a new order, or use arrows when you work from a phone.

• Hero slider with two side cards
• Best sellers this week, in tabs by department
• Hourly deals with a countdown and stock bars
• Three department blocks, each with a banner and eight products
• Most added to bags as a sliding row
• Brands you trust and Brand of the week
• Popular aisles as square picture tiles
• Ready lists and Ready bundles
• Picked for you, a large grid with Load more
• Smart shopping, which shows your latest three posts
• Why Protidin and The Protidin promise
• Shop under price tiles
• Shop for the moment
• Top rated

Cards, product page and checkout

• Crisp white product cards with an outlined Add button that turns into a minus, 1, plus stepper
• Sign in and register in a popup
• Reviews kept in a fold, with a popup that invites the first review
• Wishlist and coupons
• One-page checkout, then an Order placed popup
• Track Order page for every customer

Back-end options for running a grocery store online

Theme Options

Protidin, Theme Options holds every setting of the theme: the sidebar, aisles, flyer, checklist, delivery areas and service band, as well as cards, header, product page and footer. You can search for a setting, save from a bar that stays in view, and export, import or reset your settings.

• Five colour palettes: Supermarket, Fresh green, Ocean, Berry and Sunflower
• Four font pairs built on Plus Jakarta Sans, Poppins, Rubik and Figtree
• Separate settings for cards, header, product page and footer
• Home layout screen to hide and move blocks
• Demo Import page under Protidin

Orders and the shop dashboard

Products and orders sit under the Shop menu. The overview shows today's sales, the last seven days, the month so far, the orders waiting and a two-week chart. Every order has a status, a printable invoice and a payments box for advances, dues and refunds. Incomplete Orders lists shoppers who started checkout and left, which matters when a basket holds twenty items.

Products

The full-page product editor supports options such as pack size, with a price, stock, SKU and photo for each. Categories, brands and tags have their own menus, and the departments and aisles on the front end follow your category structure.

Payments

• Cash on delivery, with an optional advance for large orders
• bKash and Nagad payment
• Card payment through SSLCommerz
• Manual payment by Send Money with a transaction ID

Delivery and couriers

Set delivery charges by district and add extra zones. Orders can go to Steadfast or Pathao from the order screen. The COD money screen shows what delivered orders the courier still owes you.

Customers, alerts and protection

• Login by password, phone code, Google or Facebook
• Customer account with orders, tracking and wishlist
• Exchange and return requests
• New-order alerts by email, Telegram or WhatsApp
• SMS and OTP, and fake order protection on cash-on-delivery orders
• Automatic review request after delivery
• SMS campaigns to past buyers
• Customer list grouped as new, repeat, VIP, inactive or risky

Marketing, reports and modules

• Facebook Pixel with the Conversion API, Google Analytics 4 and Google Tag Manager
• Product feeds for Facebook and Google shopping, SEO settings and rich results
• Transactions screen with monthly totals
• Optional modules: pre-orders, delivery date and time, bulk orders, wholesale prices, combo offers, flash sale, loyalty points, upsell, recently viewed, back in stock alerts, store locations, popups, affiliate program and marketplace
• Support tickets, testimonials and offers menus, plus a REST API with signed webhooks for developers

How it helps a grocer sell

People shop for groceries in routines. The theme gives you tools that match those habits, and a good grocery ecommerce website template should do exactly that.

• Repeat baskets. The daily checklist and Ready lists let a shopper rebuild the usual order in one tap.
• Bigger baskets. Ready bundles and the weekly flyer put related items together.
• Fewer calls. The delivery area picker and delivery times answer the first question buyers ask.
• Fewer fake orders. An advance on cash on delivery and OTP checks protect your riders' time.
• Clear stock. Hourly deals show stock bars, so shoppers see when an offer is nearly gone.

For a store that sells organic and natural lines, a clean organic food website template matters too, and the white cards, brand blocks and review fold let you present certified products without clutter.

Setup steps for your grocery ecommerce website template

1. Install and activate the theme.
2. Go to Protidin, Setup and install Themeve Commerce in one click.
3. Activate your licence under Protidin, License.
4. Run the one-click import under Protidin, Demo Import.
5. Choose a palette and font pair.
6. Add your departments, aisles, brands and products.
7. Type your delivery areas and times, then set up the flyer and checklist.
8. Turn on payments and couriers, then hide the blocks you do not need.

Why choose it over a plain template

A plain template gives you a homepage. A shop with hundreds of lines needs more: a menu that grows with the catalogue, delivery information up front and quick repeat buying. This grocery ecommerce website template adds those pieces and connects them to the shop engine.

• Department and aisle navigation built in
• Delivery area picker that the browser remembers
• Flyer, checklist, bundles and hourly deals as ready blocks
• Local payments and couriers in the same package
• No extra builder licence to buy

What is included

• Protidin theme, version 1.0.0
• Themeve Commerce plugin
• One-click demo: 54 products from 6 brands across 12 departments and 13 aisles, with the flyer, checklist, delivery areas, posts, menus and every page, including Our Stores and Returns
• Documentation, updates through your Themeve account and 6 months of support

Protidin needs WordPress 6.0 or newer and PHP 7.4 or higher, and it is tested up to WordPress 7.1. The brands in the demo are invented samples. Swap them for your own and the store is yours.

Selling mainly rice, dal and oil by the sack? Gola is built for that. For a smaller corner shop, look at Mudi.

You can see Protidin working on the live demo, and browse more ready-made designs in our WordPress themes collection.