03 — Shopify storefront and theme · Concept
Saltbrim
Helps a small headwear label sell caps online: an editorial campaign, a side-by-side fit guide, unambiguous colour and size choices, and a bag that confirms every change. Built as both a live preview and an Online Store 2.0 theme.
Scan to try it on your phone
- Business
- Independent headwear label (fictional)
- Project
- Shopify storefront and theme
- Status
- Concept · live demo
- Built with
- Astro, TypeScript, CSS, Shopify Liquid
(01)
The brief
Saltbrim is a fictional headwear label with four caps in three silhouettes: low-profile, structured and technical. Caps are bought on fit as much as on looks, and fit is the hardest thing to judge from a screen.
The store has to look like a label, not a template: campaign photography first, then clear help with choosing a silhouette, a colour and a size, and a bag that never leaves people wondering what they added. The label needs a theme it can edit in the Shopify editor.
- Goal 01 Lead with an editorial campaign
- Goal 02 Make the three fits easy to compare
- Goal 03 Keep colour and size choices unambiguous
- Goal 04 Deliver an editable Online Store 2.0 theme
(02)
Design decisions
-
01
Campaign first, product in view
A full-bleed campaign image with one call to action, and a separate portrait crop on phones so the cap is on the first screen. A small tag names the cap in the photo and links to it.
-
02
Find your fit
Matched side profiles, same angle and head scale, compare low-profile, structured and technical caps next to their crown heights. The same panel appears on every product page with that cap’s fit marked.
-
03
Variants that switch the photos
Colours are labelled swatches and sizes show the head size they fit. Choosing a colour swaps the gallery to that colour’s photos, sold-out sizes stay visible and say so, and the URL keeps the exact choice.
-
04
Honest by default
No invented reviews, countdowns or crossed-out prices. Quick add only appears when a card’s colour fully decides the variant; caps with sizes ask you to choose first.
(03)
The customer journey
The journey covers comparing fits, choosing a colour and size, and managing the bag. Checkout is a clearly marked demo end state that collects nothing.
-
Step 1
Find your fit
Three silhouettes side by side, with crown height, structure and the caps in each fit.
-
Step 2
Choose colour and size
Labelled colours, sizes by head circumference, and a sold-out size that says so. The price and availability update with your choice.
-
Step 3
Review the bag
The bag drawer confirms the exact colour and size added, and lets you change quantities or remove items in place.
-
Step 4
Browse by fit
Filter the collection by fit with shareable links, sort by price and see every colour name on the cards.
(04)
How it’s built
- The preview runs without a Shopify account: catalog data is local and the bag is stored in the browser, so it survives reloads.
- Checkout is a demo end state that explains what Shopify would do next. It asks for no personal or payment details and creates no order.
- The theme uses Shopify’s native product, option value, variant and cart objects, swatches from option values, storefront filters and the Ajax Cart API.
- Photography is licensed from Pexels, credited in the store footer and served as AVIF and WebP at sizes matched to the screen.
Theme source
The Online Store 2.0 theme lives in the repository under shopify-theme/, with setup notes, a sample product CSV and the results of Shopify Theme Check. Photos are not bundled with the theme.