Food and drink website design: lessons from 23 stores

Food and drink is the second-largest industry in our Showcase. Twenty-three stores sit in it, just one behind fashion. All 23 run on Shopify. Eight are American, four are Canadian, four are British, and the rest come from Denmark, Belgium, Italy, the Netherlands, Australia and Japan. Most have been recognised by Awwwards, and one, Mana Yerba Maté, was named its Site of the Year for 2023.

They sell coffee, tea, chocolate, hot sauce, olive oil, caviar, hop water, natural wine and alcohol-free beer. They share one problem: the customer cannot taste anything. Everything a shopper needs to decide, the flavour, the strength, what is in it and how to use it, has to be carried by the page.

We went back through all 23 project pages and our editors’ review notes. These are the patterns that keep coming up, and the stores that do each one best.

A small range is sold like a launch

The most noticeable thing about these stores is how few products many of them sell. Koffiracha, a London maker of coffee-infused hot sauce, has two. Mode Chocolate has two bars, dark and milk. Active Hop has three hop waters. Casper’s Caviar has three caviars. Bucks Sauce has four barbecue sauces.

A grid would make these ranges look thin, so each store treats every product as an event.

• Koffiracha sets huge stacked headlines in lime and black, and the bottle moves through the type as you scroll.
• Active Hop builds the store around a real-time 3D bottle that turns and swaps its label as you move between the Drop, Trail and Rad flavours, with each flavour’s name scrolling behind it in its own colour.
• Mode surrounds its two bars with rendered chocolate and milk splashes that move in from the edges of the page on a deep navy ground, and sets the grams of sugar per bar in large figures.
• Bucks Sauce gives each sauce its own colour, fruit cut-outs and carousel slide, so four bottles feel like a product launch.

The lesson is not “add 3D”. A short range lets you spend the design budget on each product rather than the catalogue. Casper’s Caviar shows the quiet version: three tins, colour-coded photography and clear origin and cold-chain shipping details.

What to look at: if you sell fewer than five products, design the homepage as a sequence of product moments, not a grid. Every product should get a full screen of its own somewhere.

Colour does the job of a flavour label

When the product is a can or a bottle that comes in several flavours, the strongest stores let colour carry the flavour through the whole journey.

Mana Yerba Maté is the clearest example. Its homepage is a flavour carousel where each can sits inside its own illustrated scene, and the colour of the page changes with the flavour. That colour follows you onto the product page, so you always know which drink you are looking at.

Mate Libre, another Montreal yerba mate brand, uses the same idea with big lowercase type and product pages tinted in each flavour’s colour.

Post Familiar applies it to natural wine. Each wine page switches to a colour scheme of its own, such as red on black for its Carbonic Gamay, and opens with the collaboration number in large type. Around that sits a strict black-and-white frame, so the colour always belongs to the wine, not the website.

What to look at: give every flavour a colour, then use it everywhere: the homepage slide, the product page background, the button, the cart line. Colour is the fastest way to tell a shopper which product they have open.

The coffee product page has become a data sheet

Seven of the 23 stores sell coffee or tea: Assembly Coffee, Escape Coffee, Café Binocle, Single O, WatchHouse, UnD and Ippodo Tea. Between them they show where the specialist product page has gone, and it is a long way past price and weight.

Assembly, a Brixton roaster, treats each coffee as a numbered release, with a counter in the header showing how many coffees it has released since launch. Its product pages set out producer, region, variety, terroir and process as a spec block, then recommend specific brewers, ranked Best, Great and Very good, with links to buy them.

Escape, in Montreal, offers twelve grind settings from Turkish to cold brew, lists farm coordinates and brew guidance, and has a transparency panel showing the price it paid per pound against the C-market and Fairtrade prices. It also shows whether you can pick the coffee up from its lab on Notre-Dame West.

Single O, in Sydney, puts an espresso recipe on the product page, with dose, yield and brew time, and lets you choose a grind for eight different brew methods. WatchHouse adds grind selection directly on the collection cards, so you can choose before you even open the product.

UnD does something similar for matcha. A taste-profile scale rates each tea for umami, sweetness, bitterness, astringency and body, which makes different grades easy to compare.

What to look at: for any product where buyers compare on detail, structure that detail the same way on every page. A spec block that always lists the same fields lets shoppers compare across products without opening a spreadsheet.

Ingredients are explained one at a time

Seven of these stores use what we tag as an ingredient explainer, and food and drink is where the pattern does the most work. The good ones break the ingredient list into pieces a shopper can actually read.

• Mode gives each ingredient (chicory root, cocoa butter, vanilla and monk fruit) its own illustrated card.
• Cob, the corn-free snack brand, has a Meet Sorghum section explaining its main ingredient.
• SŌM, a Belgian functional shot, lists each complex with its dose in milligrams, set in a monospaced, lab-report type style.
• MURI, a Copenhagen maker of alcohol-free drinks, gives the full ingredient list with percentages, plus nutrition per 100 ml.
• Bucks Sauce uses ingredient cards for what is left out: no corn syrup, no seed oils, no additives, gluten free.
• Koffiracha’s product accordion covers what’s in the sauce, nutrition per 100g (including caffeine), heat and sweetness.

Two stores go further and cite their sources. Mate Libre’s benefits section points to published research on yerba mate, caffeine and focus. Active Hop has an expandable list of hop properties, each with its cited source.

There is a trap here, and our editors flagged it twice: on Mode and Mate Libre, the nutrition label was shown only as an image. That is hard to read on a phone, unreadable for a screen reader and invisible to search engines. Nutrition should be real text.

What to look at: explain your key ingredients in short cards, cite a source if you make a health claim, and always publish the nutrition table as text, not a picture of the pack.

Subscriptions are designed, not bolted on

Twelve of the 23 stores offer a subscription, the most common pattern in this industry by a distance. Coffee, snacks and drinks run out. What differs is how well the subscription is presented.

Cob names its tiers Casual, Serious and All-in Snacker, and shows the per-bag price and saving on each, which gives a pricing table some personality and keeps the tiers easy to compare.

SŌM puts everything in one buying card: a 7-day or 28-day pack, subscribe or buy once, and the cost per day. Our editors called the buy card well designed, and it is a good model for any consumable.

Mode shows the price per bar beside a choice of 10 or 20 bars, then offers one-time purchase or subscribe and save with a delivery frequency selector. Single O offers delivery every two or four weeks for 10% off. Mana’s subscription is also 10% off, shown alongside its 12 or 24-can cases. WatchHouse lets you set your own delivery schedule.

What to look at: show the unit price (per bar, per bag, per day) next to the subscription option. A saving is easier to believe when the shopper can see exactly what each one costs.

Bundles make trying the range low-risk

The other big buying pattern is the bundle, especially the mixed bundle, which solves the “which flavour?” question by letting people try several.

• Bucks Sauce offers a build-your-own 3-pack that saves $4, on both the homepage and the product pages.
• Mate Libre has a Build your box option for a mixed case of flavours.
• Collider, a UK alcohol-free beer made with functional mushrooms, pairs a build-a-bundle option with a 30-day money-back guarantee, a review score on the homepage and a referral offer. Our editors summed it up as flexible bundles that make trying it low-risk.
• Active Hop sells a Discovery Box of three bottles next to six-packs of each flavour.
• Café Binocle sells a tasting box of six 125 g coffees alongside 300 g and 1 kg bags.
• MURI offers bundles of 3, 6, 9 or 12 bottles at a discount.
• Graza has The Trio and a Starter Kit, plus refill cans.

What to look at: if your range has more than one flavour, a mixed starter pack is the most useful thing you can put on the homepage. It answers the first question a new customer has.

Unfamiliar products get a plain guide

Several stores sell something many of their customers have never bought before: gyokuro, alcohol-free gastronomy, hop water, coffee hot sauce. The good ones explain the category, not just the product.

Ippodo Tea has sold tea in Kyoto since 1717. Its global shop is organised by tea type (matcha, gyokuro, sencha and more), and each type has a plain guide to what it is and how to brew it. That makes an unfamiliar range approachable for overseas buyers.

MURI has a Flavour Library and a flavour wheel on each bottle page, and presents its drinks with the language of a tasting note. Our editors described it as serious alcohol-free gastronomy.

Graza’s whole range is explained by use. Drizzle is for finishing, Sizzle for cooking and Frizzle for high heat. Each product gets a one-line use case, so you know which oil to buy before you read anything else.

Post Familiar goes the other way and writes at length. Each wine lists tasting note, grape, place, producer and ABV, then follows with a long essay from the winemaker.

What to look at: name your products by what they are for, not only what they are. “For high heat” helps a first-time buyer more than any tasting note.

The brand is built into the navigation

Food and drink brands depend on shelf recognition, and the strongest stores carry it into the interface.

• UnD’s split “Un” and “D” logotype frames the navigation bar, with the menu sandwiched between the two halves.
• Café Binocle uses a huge warped wordmark, a rotating circular badge and hand-drawn characters on saturated yellow. Under the fun, rounded cards with arrow buttons keep the structure tidy.
• Escape Coffee puts the menu, shipping thresholds, cart and language switch in a vertical rail on the right, so the pages feel like a printed poster.
• Post Familiar pins its four navigation links to the four corners of the screen.
• Postevand, a Danish water brand, uses a thin-ruled grid and small uppercase labels, like a Scandinavian design object.
• re_ grocery, a package-free shop in Los Angeles, runs the whole site in one red-orange type colour on cream, with an oversized serif wordmark.

Done well, none of this gets in the way. Café Binocle’s coffee list still keeps origin, format and price in one row. re_ grocery has more than 250 lines, and it keeps browsing quick with a fixed category column that shows how many items each aisle holds, plus short attribute pills such as Vegan and Non-GMO on every card.

What to look at: pick one distinctive element of your packaging (a wordmark, a colour, a frame) and build it into the header or menu. Then make sure the product list underneath is completely conventional.

The shop connects to the shelf and the café

Six of the 23 have a store locator: Bucks Sauce, Tony’s Chocolonely, Graza, Collider, WatchHouse and Single O. Bucks Sauce also has a separate wholesale page for retailers. Postevand gives three clear routes: buy online, find a stockist or become a reseller. UnD links to wholesale sizes for cafés.

The coffee brands with cafés use the store to tie it together. WatchHouse runs a café finder across London, New York and Dubai, an app stamp-card loyalty scheme and private hire bookings in the same site. Single O lists its cafés in Sydney, Brisbane and Tokyo. re_ grocery has a location selector for pickup or delivery.

What to look at: if you are stocked anywhere, put “Find us” in the main menu. Someone who cannot wait for delivery is still a customer.

Where even award-winning stores slip

Our editors score every store on design, usability, creativity and content, and the score notes are often more useful than the praise. The same few problems came up across these 23.

• Missing collection pages. Mode was noted as having no collection page, and on Graza the collection page did not show a product grid when we reviewed it. Even a two-product store needs a page that lists everything.
• Text as images. The nutrition labels on Mode and Mate Libre, as above.
• Content that only appears with JavaScript. On re_ grocery, prices and ingredients rendered only in the browser. That can hide them from search engines and from slow connections.
• Stock problems on the page. UnD had everything on pre-order. Much of Post Familiar’s range was sold out, and most matcha showed as unavailable on Ippodo’s global store. Small-batch food sells out, but an unavailable product needs a next step, such as the waitlist Post Familiar offers through its wine club.
• Loose ends. Active Hop had thin product pages and a leftover default page title. Collider had raw template errors surfacing in its cart code.
• Speed and type size. Several of the most expressive stores score lower on usability than on design or creativity. Koffiracha, Post Familiar, Mana and Active Hop all score at least 1.5 points higher for creativity than for usability.

These are still some of the best food and drink stores online. The notes just show where effort runs out: after the homepage.

What to look at: after launch, check your collection page, your nutrition table and your cart with JavaScript turned off and on a slow phone. That is where the gaps usually are.

Montreal keeps turning up

One thing the data shows that a list of pretty websites would not: four of the 23 stores are from Montreal or elsewhere in Quebec. Café Binocle (credited to Gymnase Studio Web), Escape Coffee (Tux Creative House), Mana Yerba Maté (Louis Paquet, Michael Garcia and Pam) and Mate Libre (Locomotive) all have Awwwards recognition, and all four sell in English and French. Louis Paquet is credited on both Mana and Escape.

If you are briefing an agency for a food or drink store, the project pages list who built each one, and every credited agency has its own page with the rest of its work.

A checklist for food and drink stores

What the strongest food and drink stores in the Showcase get right:

1. A short range gets a full screen per product, not a sparse grid.
2. Each flavour has a colour that follows it from homepage to cart.
3. Product detail uses the same fields on every page, so products can be compared.
4. Ingredients are explained one at a time, and nutrition is real text.
5. Subscriptions show the unit price and the saving.
6. A mixed bundle or tasting box answers “which one should I try?”.
7. Unfamiliar products are named and explained by use.
8. Stockists, cafés and wholesale are in the menu.
9. The quiet pages (collection, cart, sold out) are finished as carefully as the homepage.

You can browse all 23 in the food and drink section of the Showcase, or the whole Showcase by country and feature. If you run or built a food or drink store that belongs here, you can submit it, and brands and agencies already featured can claim their pages through membership.