Edit me

Make AXIS yours.

What shoppers see comes from the CMS, a few labelled controls and your Shopify store.

01

Add your colourways

CMS › Colourways. One item per finish: Name, Case, Strap, Case colour and Strap colour (they draw the ring chips), Shot, Price, Tagline and Description.

Order sets the order of the chips. Every chip row and grid on the site reads this collection, so a new item shows up everywhere at once. Tick Sold out to grey a finish out.

02

Swap the images

Shots: 4:5, the watch face-on and centred, same framing in every finish, so the swap lines up. Use the shot’s own background colour for the panel behind it (the Choose section uses #E7EEF4).

Details and box: 1:1. Day photos: 4:5. Hero: 16:10 or wider. Select an image and use Replace in the right panel.

03

Line up the hero ring

Select Orbit Hero on Home. Watch position X/Y % is the centre of the watch face as a percentage of your photo (open it in any editor and divide the pixel position by the width and height). Ring size %, Ring squash and Ring tilt match the ring to the face.

Crop focus X/Y % keeps the right part of the photo in view on each breakpoint. The ring follows the crop at every width. Readouts are Top line|Bottom line; {time} shows the ring’s time.

04

Edit the day

Select Day Timeline on Home. Stops holds each moment: time, name, 4:5 photo, heading, line, up to three stats and a ground colour. A dark ground switches the text to light automatically.

The hero day rail reads the same stops. Scroll per stop sets how long each moment stays pinned.

05

Connect Shopify

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

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

06

Paste variant IDs

In Shopify admin, open the watch and click a variant: the number at the end of the URL is its variant ID. Paste it into Variant ID on the matching colourway.

Missing an ID? The Add button explains what to fill in instead of failing silently.

07

Set up the membership

The Plan Picker offers Watch only or Watch + AXIS Plus. Create the membership in Shopify as its own product, or as a selling plan with a subscriptions app, and paste its variant ID into Membership ID on the Plan Picker.

Cart permalinks add the membership as a normal line. For true monthly billing, attach a selling plan to that product in your subscriptions app. Edit the badge (First month free), monthly price and labels in the same panel, or untick 1st month free.

08

Preorder or waitlist

Plan Picker › Mode switches the button between Buy, Preorder (adds an Order: Preorder note and shows a ship date) and Waitlist (links to your waitlist page or form).

09

Brand, colours and type

Colours live in the colour styles (Ice, Midnight, Lime, Titanium, Shot). Text uses the text styles, set in Inter Tight and JetBrains Mono.

The wordmark is the Wordmark component: select it and change the text.

10

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.

Create a free website with Framer, the website builder loved by startups, designers and agencies.