What this preview changes
This is a working design preview, built from the store’s real catalogue of 1,034 products and 27 artists. It shows what better navigation and a much lighter page could look like before any work happens on the live Shopify store.
The homepage drops from 8.8 MB to 1.0 MB, about 9 times lighter.
Speed, measured
Lighthouse 12, mobile preset (simulated slow 4G, mid-range phone), median of 3 runs per page. Measured 21 October 2026. Scores are out of 100; Google treats a main-image load time (LCP) under 2.5s as good.
Homepage
| Site | Speed score | Main image loads | Page weight | Of which photos | Requests |
|---|---|---|---|---|---|
| Live store | 50 | 22.1s | 8.8 MB | 6.2 MB | 385 |
| Preview | 99 | 1.8s | 1.0 MB | 924 KB | 50 |
Collection page
| Site | Speed score | Main image loads | Page weight | Of which photos | Requests |
|---|---|---|---|---|---|
| Live store(1 run) | 56 | 9.7s | 3.6 MB | 1.3 MB | 283 |
| Preview | 96 | 2.6s | 607 KB | 398 KB | 38 |
Product page
| Site | Speed score | Main image loads | Page weight | Of which photos | Requests |
|---|---|---|---|---|---|
| Live store | 47 | 14.3s | 3.8 MB | 1.2 MB | 342 |
| Preview | 99 | 2.2s | 384 KB | 266 KB | 25 |
Accessibility, best-practice and SEO scores for the same pages: Homepage: live 86/71/92, preview 100/100/100. Collection page: live 90/75/100, preview 100/100/100. Product page: live 86/75/100, preview 100/100/100.
Problems found, and what the preview does
Live store todayHomepage photos are uploaded straight from iPhones at about 3,000px wide and sent to every visitor at full size.
In the previewEvery photo is requested at the width the screen needs (240 to 1,200px) at quality 70, in WebP. Only the first row loads straight away; the rest load as you scroll.
Live store todayThe menu has five links. “New Arrivals” contains the whole store, and there is no way to browse by type or joint size.
In the previewA Shop menu with 9 product types, joint size and country shortcuts, an Artists menu, and “Latest arrivals” showing only the newest batch. Phones get a bottom tab bar.
Live store todayCollection pages can only be sorted, not filtered.
In the previewFilters for type, joint size, price, artist and country, plus a “hide sold” switch. Filters are saved in the page address, so a filtered view can be shared as a link.
Live store todayThere is no quick way to find a specific piece.
In the previewInstant search across every piece and artist, opened from the header or with the / key.
Live store todayThe homepage has four H1 headings, no meta description and no structured data for Google.
In the previewOne H1 per page, a written description on every page, and Store, Product, CollectionPage and BreadcrumbList structured data.
Live store todayThe refund, shipping, privacy and terms pages are blank, and /pages/about returns a 404.
In the previewAll four policy pages and an About page exist, with draft text clearly marked for the owner to replace.
Live store todayProduct pages make you scroll back up to buy on a phone.
In the previewA buy button stays at the bottom of the screen on phones, with a save-for-later heart beside it.
Things to try
Small touches that make browsing glass feel closer to handling it. All of them switch off for visitors who have reduced motion turned on.
Tilt a card
Product cards tilt toward the pointer and catch a sheen, like glass under a light.
Hover for a second photo
Cards swap to the next photo on hover. The extra photo only loads when you hover.
Quick add
Add a piece from the grid; it flies into the bag and a toast confirms it.
Surprise me
Opens a random piece in quick view.
Watch filters settle
Results animate into place as you filter.
Open a product
The photo you tapped grows into the product page.
Drag the shelves
Homepage rows scroll by dragging or with arrows.
Zoom in
A lens magnifies product photos on hover.
Scroll down
The header tucks away while you scroll, and comes back when you scroll up.
Save a piece
The heart pops when you save something, and phones give a short buzz.
Product data to tidy up
The filters are built from the store’s existing product types and tags. A few gaps would make them better on the real store:
- Only 395 of 1,034 products have a joint size tag. Slides, bangers and downstems without one won’t appear under a joint size filter.
- 139 products aren’t in an artist collection, so they can’t be filtered by artist. Most are Moodmats and house items.
- 1 product has no product type at all.
- Every product lists the same vendor, “Off Grid Society Aotearoa”. Setting the vendor to the artist would make artist filtering automatic in Shopify.
What is only a demo
- The cart works, but checkout stops at a message. On the real store, that button would go to Shopify’s checkout.
- Policy, About and Contact pages use draft text. The owner needs to supply the final wording, and a lawyer should review the terms.
- The $150 free-shipping bar, delivery times and payment wording are examples, not the store’s real terms.
- Prices and stock are a snapshot taken when the preview was built, not live.
Taking this to the live store
The recommended route is to keep Shopify behind the scenes and put this site in front of it. The owner keeps adding products, taking orders and reading sales reports in the same Shopify admin. This site shows the products, with live stock, and the checkout button hands over to Shopify’s secure checkout.
Product and collection addresses stay the same, so search rankings carry over. Shopify’s visitor reports only count its own themes, so a small analytics add-on covers visitor numbers.