(Edit me)

Make TEMPO yours.

Everything a shopper sees comes from the CMS, a few labelled controls and your Shopify store.

Add your colourways

CMS › Colourways. One item per colourway: Name, Short name, two swatch colours, Accent (the colour of the giant wordmark and speed lines), Cut-out and Shot.

Order sets the order of the swatches. Every swatch row on the site is a list of this collection, so new items appear everywhere at once.

Swap the images

Cut-out: transparent PNG or WebP, 4:5, the shoe centred, same angle and size in every colourway, so the hero swap lines up.

Shot: 4:5 photo on a plain background, same framing in every colourway. Tech macros 1:1. Lifestyle 16:10 and 4:5. Box 1:1. Select an image layer and use Replace in the right panel.

Connect Shopify

Open the Main layout template, select Bag drawer and paste your store domain (your-store.myshopify.com). Set currency, free-shipping amount and an optional discount code there.

Checkout uses Shopify cart permalinks, so no app or API token is needed.

Paste variant IDs

In Shopify admin, open the product and click a variant: the number at the end of the URL is its ID.

In each colourway, fill Variant IDs as size=ID pairs using the first size column, for example 42=44012345678901, 42.5=44012345678902. List sold-out sizes in Sold out (40.5, 45) to grey them out.

Sizes and fit

Select the Size Lab (Home and the product page). Sizes holds EU/US/UK per size. Narrow and Wide set how many sizes the fit toggle moves (-1 is half a size down).

Mode switches the button between Buy, Preorder and Waitlist. The Fit guide table on Home reads the Sizes collection.

Brand, colours and type

Colours live in the colour styles (Chalk, Graphite, Orange, Volt, Ink). Text uses the text styles (Display, Heading, Hero and more), set in Archivo and Geist Mono.

The wordmark is a Wordmark component: select it and change the text. The hero wordmark is the Text control on the Colourway Stage.

Before you publish

Replace hello@example.com on the Contact page, check the Legal page with your own terms, and set the site title, description and favicon in Site Settings.