Vineyard Vault, rebuilt to be simple to buy from
The current store buries good wine under a confusing structure. This document is the build brief: how the site must work, how it must look, and the tasks the developer is to deliver. The guiding principle is simplicity, modelled on pupsak.co.za, where a choice is obvious in two clicks.
Why the site loses sales right now
Each item below is a concrete issue costing orders, identified in the site audit and on the live store. These are the problems the rebuild must solve.
The menu is invisible
White nav text sits over a light image on the left half of the homepage, so half the menu ("Shop by Wine, Region, Vineyard…") disappears. First impression: broken.
Seven overlapping menus
Shop by Wine, Region, Vineyard, Special, Beer, Spirits, International. A single bottle lives in three of them, so nobody knows where to click. Too many doors, all leading to the same rooms.
No categories at all
Tequila, brandy, vodka, whisky, cognac and mezcal are dumped into one long "Spirits" list. A whisky buyer has to scroll past R49,500 tequila to find a Scotch.
Case-only confusion
Products push a full case as the only option, with the per-bottle price in small grey text. New buyers who want one bottle bounce.
Wrong product on the page
A "Syrah" URL shows a Cabernet, vintages don't match between links and titles, and titles carry stray code. It reads as careless on a premium product.
Cheap and cluttered
Inconsistent bottle photos, cramped layouts and no clear hierarchy make good wine look budget. The store undersells the product.
Adopt PupSak's simplicity
PupSak works because it never makes the visitor think. They land, see "Shop by product" and "Shop by size" as big clear icons, tap, and arrive. The rebuild must apply that exact logic to a bottle store: a few obvious choices up front, then powerful filtering underneath for those who want to dig.
Vineyard Vault today
- 7 top-level menus that overlap
- No visual "shop by" entry points
- Spirits uncategorised
- Case-only pricing up front
- Invisible header, cluttered hero
The PupSak way, applied to wine
- A handful of clear categories
- Big icons: Shop by Type, Region, Occasion
- Every spirit in a named category
- Per-bottle price first, case as an upsell
- Solid header, one clear hero message
Reset the theme, keep the products
The current theme should not be patched further. The problems are structural: a previous developer has layered custom sections on top, and the header and navigation issues are baked in. Patching means fighting that legacy at every step.
The developer is to install a clean, modern, mobile-first Shopify theme (Shopify's free Dawn, or a premium wine/liquor theme) and rebuild the structure on top of it. All products, prices and images remain in Shopify, so nothing in the catalogue is lost. Only the theme and navigation are replaced, not the data.
Faster, cleaner, cheaper long-term
A clean theme gives native filtering, a mobile-first layout and no inherited clutter. Less developer time fighting old code, fewer bugs.
All catalogue data
Products, variants, prices, images and customers live in Shopify, not the theme. Switching themes doesn't touch them.
Collections need rebuilding
The re-categorisation (especially spirits) is real work whichever way we go. Doing it on a clean theme is the right time to do it once, properly.
From 7 confusing menus to 5 clear ones
The whole catalogue reorganised around how people actually shop: by what they want to drink first, then filtered by region, estate, price and so on. Region and Vineyard stop being top-level menus and become filters, which is what they are.
-
WINE (mega-menu)
- By type: Red · White · Rosé · MCC & Sparkling · Sweet & Fortified
- By region: Stellenbosch · Franschhoek · Swartland · Paarl · Tulbagh · Bot River · Constantia
- By estate: Remhoogte · Quoin Rock · Glenelly · Ridgeback · Raats · Barton & more
- Quick links: Bestsellers · New arrivals · Award winners · Magnums
-
SPIRITS (mega-menu, properly categorised)
- Whisky · Brandy & Cognac · Tequila & Mezcal · Vodka · Gin · Rum · Liqueurs
- BEER (if the range justifies it, otherwise fold under "More")
- SPECIALS Deals · Bundles · Under R150/bottle · Clearance
- GIFTING Gift sets · By price · Corporate · International shipping
The Wine mega-menu (hover state)
Build the WINE menu as a mega-menu that opens on hover or tap, laying out the three ways to browse plus quick links and a promo slot.
What the new homepage looks like
The wireframe below is the homepage layout to build, top to bottom. Its job is to move a visitor into the right category fast and look premium doing it.
Mobile homepage (design this first)
Most wine browsing happens on a phone, so the mobile layout is built first, not adapted afterwards. Big tappable category icons, stacked sections, and a sticky "Shop Wine" bar at the bottom.
What the mobile layout must do
- Category icons big enough to tap with a thumb, two per row.
- Search reachable from the top bar at all times.
- Sticky add-to-cart on product pages so buying is always one tap away.
- Filters collapse into a single "Filter" button that opens a full-screen panel.
The giveaway page the ads point to
Every Meta ad in the Windfall campaign sends traffic to this page, not the homepage. It has one job: get the visitor to buy two cases of Windfall wine and enter the draw. Minimal navigation, one clear action, no distractions.
Rules for this page
- One goal only: the 2-case purchase. Strip the full navigation so there is nowhere to wander off.
- State the entry steps in plain language near the top, and repeat them beside the buy button.
- Pre-build a 2-case path so adding qualifying cases is one tap, not a hunt through the store.
- Countdown to 1 October for urgency; sticky "Add 2 cases" button on mobile.
- Link full terms (dates, verification, availability, valid to June 2027) at the foot.
A dedicated Wine hub, not a crowded hero
Region and estate browsing comes off the homepage hero and onto its own Wine page. The hero stays clean with one message; this page is where the depth lives: shop by region, then by farm, then by type.
How people narrow down to the bottle they want
Build every category page (Wine, Red Wine, Stellenbosch, and so on) on one shared template: filters down the left, results on the right. Region and Vineyard live here as filters, not menus. The wireframe below is the layout to build.
Filter
Rules for the product card
- Show the per-bottle price first and largest, with per-case as the secondary line. This directly fixes the case-only bounce.
- Consistent bottle photography: same background, same crop, same lighting, so the grid looks clean.
- Show region and estate as small tags, plus any award/rating badge.
- Quick-add to cart on hover, with a bottle/case toggle.
The single-product page, done properly
Build every product page on this layout: image left, buy box right, specs and tasting notes below, related wines at the bottom. The per-bottle price and a clear bottle/case selector are the priority.
Layout
- Large, consistent bottle image left; buy box right.
- Buy box: per-bottle price prominent, then a clear Bottle / 6-bottle case selector, then Add to Cart.
- Region, estate, grape, vintage and rating as clean spec rows.
- Tasting notes and food pairing below the fold, well formatted (the copy here is already good, it just needs a clean layout).
- "You might also like" from the same region or estate.
- Delivery & packaging reassurance near the button.
Data clean-up (must happen)
- Fix the Remhoogte page showing Cabernet copy on a Syrah URL.
- Make URL, title and body vintage match on every product.
- Strip stray code and duplicated words from product titles.
- One consistent title format: Wine · Region · Vineyard Vault
Turning one messy list into proper categories
Every spirit currently sits in one bucket. The taxonomy below maps real products from the current catalogue into named categories. The developer and merchandiser must place each product into the matching collection, and build the Spirits menu around these categories.
| New category | What goes in it (from your live range) |
|---|---|
| Whisky — Scotch (single malt) | Ardmore 2010, Caol Ila 2013, Bunnahabhain, Edradour 9YR, Waterford Peated |
| Whisky — Bourbon & world | Widow Jane 10YO Bourbon, and any Irish/other whiskies |
| Brandy & Cognac | Big Bore 5 & 10YO Brandy, Avante Cape Brandy range, Tessendier, François Voyer Cognac |
| Tequila & Mezcal | Clase Azul (Gold, Reposado, Plata, Añejo, Ultra), Mezcal Vago, Clase Azul Mezcal |
| Vodka | Crystal Head Vodka (all pack sizes) |
| Gin · Rum · Liqueurs | Group the remaining spirits here; split out once volume grows |
Spirits category page (build like this)
Making it feel premium
Header
Solid, always-legible bar. Dark background, light logo and menu, prominent search. Sticky on scroll. This alone lifts the whole first impression.
Colour
Deep wine burgundy, warm gold accent, off-white and charcoal. Rich and grown-up, not the current flat white. Replace with the confirmed brand palette before launch.
Photography
One consistent bottle-shot standard: same background, crop and lighting across the whole catalogue. This is the single biggest "looks cheap vs looks premium" lever.
Typography
One clean serif for headings (wine heritage), one simple sans for body. Generous spacing. Stop cramming.
Mobile first
Most wine browsing is on a phone. Design the mobile layout first: big tappable category icons, sticky add-to-cart, simple filters.
Consistency
Same card, same buttons, same spacing everywhere. Consistency is what reads as "trustworthy shop" to a buyer about to spend R1,000+.
Exactly what to build, in order
A phased brief the developer can quote and work through. P0 items are quick, high-impact fixes that shouldn't wait for the full rebuild.
- Fix the header so the menu is legible on every page (solid background or scrim).
- Fix the Remhoogte wrong-product page and sweep vintages/titles across the catalogue.
- Make per-bottle price visible on product cards and pages.
- Install a clean, mobile-first theme (Dawn or a premium wine theme).
- Rebuild the top navigation to the 5-menu structure with mega-menus.
- Build the new homepage per the wireframe: hero, Shop by Type / Region / Occasion, featured, trust bar.
- Build the dedicated Wine hub page (region / estate / type) and the campaign giveaway landing page. The giveaway page must be live before 10 August.
- Re-categorise all wine into Type / Region / Estate collections.
- Re-categorise spirits into the taxonomy in this document.
- Set up the filter system (type, region, estate, grape, price, bottle/case, vintage, rating, stock) and sorting.
- Apply the product-card rules and a bottle/case selector.
- Standardise bottle photography across the catalogue.
- Apply the type, colour and spacing system; build the gifting and specials landing pages.
- Add reviews/ratings, delivery reassurance, and SEO landing pages for regions and estates.
- QA on mobile end to end, then launch.
Decisions required to start
- Approve the reset-theme approach over patching the current theme.
- Select the theme: free Dawn, or a premium wine/liquor theme.
- Confirm the brand palette, logo and the photography standard.
- Assign ownership of merchandising: sorting every product into the new collections.