La Yellow Berry: a bakery website and online ordering system built inside its Shopify store

Quick facts

What was stopping a proper online menu for the bakery?

The full range existed offline and in pieces. The menu was a two-page printed card, the Shopify store showed four packaged products, product photos were spread across Instagram, a Swiggy storefront and WhatsApp chats, and the gifting range was a set of photos sent on WhatsApp. None of it let a customer build a cake order online.

• The menu was a printed card. Two pages, not searchable, with no link to a single cake or dessert and nothing to order from. The build kept it as the reference for how the menu should be organised and priced.
• The Shopify store showed four products. Dates chocolate, white dates chocolate, a hazelnut chocolate mix and an organic trail mix. None of the cakes, brownies, cookies, macarons, desserts or hampers were online there.
• Photos lived in three places. Instagram, the Swiggy storefront and WhatsApp messages each held part of the picture library.
• Hampers had no price to put on a product page. Every hamper is quoted per order, so a normal cart-and-price product page did not fit.
• A custom cake is six decisions, not one. Weight, flavour, finish, message, add-ons and a reference photo all change the price, and nothing online captured them or showed an estimate.
• Shopify has rules of its own. Shopify reserves the /products/ path for its own product pages and flattens theme files into a single assets folder, so a standalone app's screens and images could not simply be dropped onto the store's domain.

Custom page templates with {% layout none %}

A Shopify page normally renders inside the theme. Starting a page template with {% layout none %} tells Shopify to output only what the template contains. La Yellow Berry's two templates, page.catalogue and page.menu, hold little more than a container for the app, its CSS and JavaScript, the image map and one setting for the opening screen. The theme's styles and scripts never load on these pages, so they cannot clash with the app's.

Hash routes, because Shopify owns the URLs

Shopify decides what lives at paths such as /products/. With a HashRouter, every screen sits after the # sign in the address, which Shopify never reads, so the whole app runs from one Shopify page and every category and product still has its own shareable link.

A generated Liquid image map for the photos

Shopify keeps theme files in one flat assets folder and serves them from its CDN at addresses it generates. A small Python script writes a Liquid snippet that maps every image path to its Shopify asset_url, and the app looks up that map whenever it shows a photo. When photos change, the script is simply re-run.

Fixed file names, so an update is an upload

The build always writes lyb-app.js and lyb-app.css under the same names, so the Shopify templates never need editing. A deploy is: build, copy the bundle and images into the theme assets (104 files), regenerate the image map, upload.

The custom celebration cake

The cake flow adds the choices a baker needs before the oven goes on. Each step is one group of options on the same product page, and the estimate is itemised as they are chosen.

How does a WhatsApp ordering website work without a payment gateway?

The checkout collects what the kitchen needs, then opens WhatsApp with the whole order already typed out to the brand's number, and the customer presses send. Because nothing is baked until the order is confirmed, the brand checks availability and the final price in the chat. That is why no payment gateway, customer account or login is needed.

Checkout asks for a name, a WhatsApp number (at least 10 digits), Delivery across Surat or Pickup from the kitchen, a date, an address (only for delivery) and optional notes. The date picker does not offer anything sooner than the notice period — 24 hours by default — so a customer cannot ask for a cake the kitchen cannot make. A “Preview the WhatsApp message” toggle shows the exact text before it is sent, and on phones a sticky “Send Order” button carries the running total.

After sending, the cart clears and an Order Sent screen shows the customer an order code. The customer's details are remembered in their browser for next time, and separate pre-filled links handle general questions, single-product questions and gifting briefs.

How do you sell gift hampers that are quoted per order?

Each hamper got its own product page, with its own name, description and unit, but no price. “Price on request” and an “Enquire on WhatsApp” button replace the cart, and the enquiry opens with a short brief already laid out: number of hampers, budget per hamper, needed-by date, delivery city and whether co-branding is wanted. The brand then builds a curated hamper and sends a sample photo and a firm quote for approval.

The first version modelled the gifting range as five products with several photos each, which made it look five times smaller than it is. Every photo was in fact a different hamper, so the range was rebuilt as 23 separate hamper formats in four groups: Premium Boxes, Baskets & Trays, Festive & Diwali, and Bulk & Event Orders. Examples include a Two-Tier Dry Fruit Tray, a Sage Bonbon Box, a Diwali Heritage Box, an Illuminated Diya Thali, an Organza Tray Saffron & Gold and a Marigold Jute Crate, each with a unit such as “quoted per box · bulk”.

The Corporate Gifting page

It states the terms up front — a minimum of 10 hampers and volume pricing from 25 boxes — then shows three value cards (100% homemade, Co-branding, Plan ahead), three indicative hamper tiers (Classic, Signature and Bespoke) with what each includes, a grid of every hamper format, and a four-step “How it works”: tell us the brief, we build the hamper, you approve a sample photo and a firm quote, we deliver across Surat.

Healthy bakes: product pages whose claims match the recipe

La Yellow Berry sells health as much as taste, so its product pages needed claims customers can trust. The proof chips and highlight cards on each page — No refined sugar, Jaggery sweetened, Millet based, Callebaut couverture, Date sweetened, Honey sweetened — are generated from that product's own tags and ingredients. A page cannot show a claim its recipe does not support.

The same care applies to the kitchen's promises. Every product is labelled Preorder, the checkout enforces 24 hours' notice, and a “same-day delivery” tile from an early version was replaced with the health promise because it contradicted the notice period. Claims the client did not want to make were removed on request. Ingredients and allergens sit on every product, and each category carries its own storage note.

Will a bakery website with lots of photos load fast?

It will if every photo is sent at the size it is shown. The app asks Shopify's CDN for each image at the width of the tile it fills, with a srcset so phones and laptops each get what they need. Before this fix the gifting category pulled 7.8 MB, because 1,600-pixel photos were being shown in 219-pixel tiles; a sample of ten cards dropped from 1,875 KB to 293 KB.

Every image in the app declares its real display size, and logos request 96 pixels instead of the full file. Product photography was gathered from Instagram, the Swiggy storefront and 54 media files the client sent on WhatsApp. In all, the app carries 89 product images, 9 Instagram tiles and 4 brand images, served from the store's theme assets through Shopify's CDN.

The catalogue launched with 42 products in 8 categories. Revisions then added the enquiry-only gifting category, Preorder labels, a kunafa pudding, repricing, the service strip and product FAQ, and the health promise in place of a same-day delivery tile. The live app now carries 66 entries across 9 categories.

Technology and integrations

The catalogue is a React 18 and TypeScript app built with Vite and styled with Tailwind CSS, running on two Shopify page templates. It has no server of its own: product data ships with the app, photos come from Shopify's CDN, and orders go out through WhatsApp click-to-chat.

Integrations: WhatsApp click-to-chat links for orders, product questions, general enquiries and gifting briefs; the Shopify storefront and its CDN; a Google Maps “Get directions” link and a call link on the About page; and an Instagram tile strip. The data layer is designed for a later Supabase backend, which is not connected today.

How much does a bakery website with online ordering cost?

Shopify store and catalogue projects at Yukti AI start from ₹60,000. The fixed quote depends on the size of your menu, how many products need options such as a cake builder, whether you sell enquiry-only items like hampers, whether the catalogue goes inside an existing Shopify store or a new one, and integrations. La Yellow Berry's build took about 7 days.

It is a one-time build with a fixed quote, agreed after a free workflow audit. Shopify's own plan and any Shopify apps are paid by the business directly to Shopify. See Shopify Store Development for the full service.

Summary