001 / Edit Me
How to turn this template into your store. Swapping the product takes about ten minutes and lives almost entirely in the CMS.
01
Swap the product in ten minutes
1. Open the CMS and edit the single item in the Product collection: name, brand, kind, intro, price, compare-at price, SKU, stock note and the Checkout Link.
2. Replace the five Product images, then the three finish names, SKUs, prices, swatch colours, images and Checkout Links. Delete a finish you do not need by giving it the same values as another.
3. Rewrite the Specs, Features, Steps and Compare collections. The first eight Specs appear beside the hero photo; the numbered pins point to Specs rows 1, 2 and 3.
4. Type your brand once in the Navigation component (Brand) and once in the footer. Nothing else in the layout contains product words.
02
Supplier photos
Supplier images are rarely the shape a layout wants. Crop them before upload using the ratios below. Everything is shown in greyscale by default; remove the greyscale effect on a photo frame if you sell a colourful product.
Hero image 4:5 or 1:1 at 1600 px. Gallery images 1:1 at 1200 px. Finish images 7:6 at 1600 px. Bundle images 1:1 at 1000 px. Step images 1:1 at 1000 px. Keep each file under 300 KB for fast pages.
03
Connect checkout links
Every Buy button reads a Checkout Link field. Paste one URL per field and the button works; nothing else needs wiring.
Shopify Buy Button or cart link: in Shopify create the product, then use a cart permalink such as https://your-store.myshopify.com/cart/VARIANT_ID:1 or the Buy Button share link.
Stripe: create a Payment Link for the product and paste the buy.stripe.com URL. Lemon Squeezy: open the product, choose Share, and paste the checkout URL. Each finish and each bundle has its own field.
04
Colours and type
The colour tokens are Ink, Paper, Ground, Hair, Mid and Signal. Signal is the only colour in the template and appears on the stock dot, the price saving and the dimension labels. Change it once in the styles panel.
Type is Inter Display for headings and text and Geist Mono for labels. Swap either in the text styles: Display XL, Display, Heading 2, Heading 3, Body Large, Body, Label and Price.
05
Pages and CMS map
Pages: Home, Product, Bundles, Reviews, FAQ, Shipping, Returns, Track your order, About, Contact, Terms, Privacy, Refunds, Edit Me and 404.
Collections: Product (one item), Specs, Features, Steps, Reviews, FAQ, Zones (shipping regions), Bundles and Compare. Every list on the site is a CMS list, so editing an item updates every page that shows it.
06
Track your order
The tracking form emails the order number to you. To show live carrier status, replace the form with your tracking provider’s embed or link the button to its tracking page.
07
Honest by design
This template ships without countdown timers, fake stock counters, invented reviews or pop-up discounts, and we ask you to keep it that way. The demo reviews are fictional CMS items and are labelled as demo on the page. Delete them before you launch and add your own.
002 / Photo slots
Image slots at a glance.
Hero image
4:5 or 1:1
1600 px
Home, sticky bar
Images 2 to 5
1:1
1200 px
Photography strip, Product page
Finish images
7:6
1600 px
Finish Picker
Bundle images
1:1
1000 px
Bundles
Step images
1:1
1000 px
Set-up steps