Online stores
Tea online store example with a brewing guide
Loose leaf tea is bought by people who care how it is made, and they want to know how to brew it. This example for an invented Collingwood tea merchant sells six teas in two pouch sizes across four collections and puts a brewing guide, with water temperature and steeping time, on the home page.
The home page at three widths
The same page on a desktop, a tablet and a phone, exactly as it renders. Scroll inside each frame to read it all; nothing here can be clicked or submitted.
The /collections/black-tea page
Page by page
- Home /
- Hero (split), Products (product grid), Services (list with icons), Products (scrolling strip), Newsletter (band)
- Privacy policy /privacy
- Text (single column), 5 in a row
- Terms of use /terms
- Text (single column), 5 in a row
The home page
A split hero with tea pouring into a cup, four favourites picked by hand in a product grid, the brewing guide as a list, teaware in a scrolling strip and a newsletter band for new harvests. Each tea's page shows the size select and the tasting notes.
Writing tea descriptions
Name the origin or blend, two or three flavours and how it takes milk. This example keeps each description to one line so the product page stays scannable, and moves brewing advice into the guide where it applies to every tea of a type.
What makes this website work
Brewing times as a price list
The brewing guide uses the list layout of the services section, with the temperature as the description and the minutes where a price would be. It turns a list into a reference card people come back to.
Four collections in the menu
Black, green and oolong, herbal and teaware are each a collection with its own page, linked from the menu. Tea drinkers shop by type, and the menu lets them skip straight to theirs.
Two sizes for trial and habit
Every tea comes in 100 g for trying and 250 g for the tea you drink daily, at a lower price per gram. It is the oldest trick in the tea trade, and the variant select makes it one tap.
Questions people ask
How do I organise a tea store?
By how people drink: black, green and oolong, herbal and teaware, as collections. Each collection gets its own page when the store publishes, and the menu links to them. Products can sit in more than one collection, such as a chai in black tea and in gifts.
Can I sell tea by weight?
Sell fixed sizes as variants, such as 100 g and 250 g pouches, each with its own price and stock. The store does not price by weight at checkout. A larger size at a lower price per gram rewards regular buyers.
How do I show a brewing guide?
This example uses the services section in its list layout, with each type of tea, the water temperature and the steeping time. A text section or an FAQ would also work, but the list keeps each type on one line with the time aligned on the right.
Can I run a sale on one collection?
Set compare-at prices on the products you are discounting, and they show struck through on cards and product pages. For a store wide or collection wide offer, create a discount code with a percentage or a fixed amount and optional dates and limits.
Can I show tasting notes for each tea?
Write them in the product description, which supports bold, italics and bullet lines. The product page shows it in full under the buy box, and the product card shows only the title and price, so keep the first line of the description the most telling one.
Build your own in about a minute
The button below opens the generator with this use case already described. Change the wording to match your own, generate, then edit anything you like.
Make one like thisOther website examples
Dog treat online store example with a treat guide
Dog owners buy treats on two worries: what is in them and whether they are safe for their dog. This example for an invented Mudgee maker answers both, single ingredient products named by what they are made of, and a guide to which treat suits which dog, with puppies and supervision covered.
Jewellery online store example for a handmade studio
People buy handmade jewellery when they trust the metal and the fit. This example for an invented Fremantle studio offers each piece in sterling silver or gold vermeil, explains what vermeil means, gives a ring sizing method and promises one free resize, all before the checkout.
Plant shop online store example with local delivery
A plant shop has a problem other stores do not: its products are alive and travel badly. This example for an invented Brisbane nursery sells six easy care plants in two pot sizes, says plainly that plants are delivered only in South East Queensland, and ships pots and potting mix anywhere.
For everything this generator can do, see the website maker.
Written and checked by the OneCraft team. Last checked .