Edit me

Setup guide

Make MIRAGE yours.

Products live in the CMS, a few labelled controls set the rest, and checkout runs on your Shopify store.

01

Add your frames

CMS › Frames. One item per colour: Name (e.g. Marina Tortoise, which sets the page link), Frame (the model name shoppers see), Colour, Swatch, Image (4:5, same angle and size for every colour so the swap lines up), Price and Lens 2 add-on.

Order sets the order of the colour chips. Turn on Tortoise pattern for patterned acetate. Items with the same Frame name are offered as colours of one frame.

02

Paste your Shopify variant IDs

Every frame colour has two variants in Shopify: one per lens. In Shopify admin open the product, click a variant and copy the number at the end of the address (…/variants/44012345678901).

Paste it into Variant ID · Lens 1 (tinted) and Variant ID · Lens 2 (polarised) on that colour’s CMS item. A full admin link also works; the number is read from it.

03

Connect your store

Open the Main layout template and select Bag drawer. Paste your store domain (your-store.myshopify.com), then set the currency and the free-shipping amount. An optional discount code is passed to checkout.

Checkout uses Shopify cart permalinks, so no app or API token is needed. Until a domain is set, Checkout opens this guide.

04

Lookbook and pins

CMS › Looks. One item per photo (4:5): Number, Title, Caption, Page, Frame colour (a colour name from Frames) and Lens.

Frame pin X and Y place the shop dot on the frames, as a percentage of the photo (0 is the left or top edge, 100 the right or bottom). Lens pin X and Y add a second dot on a lens; set them to 0 to hide it. Pins stay on the photo at every screen size.

05

Hero photo and hair overlay

Select Cover Art on Home. Photo is the hero image; Focus X and Y keep the subject in view as the screen changes shape. The pin uses the same X/Y percentages as the lookbook.

Hair overlay is optional: a transparent cut-out of the same photo, exported at the same size, that sits in front of the masthead so the letters tuck behind the hair. If you change the photo, replace or clear the overlay. Without one, the masthead simply sits on the photo.

06

Lenses, notes and selling modes

Lens names, the add-to-bag label and the small note (Leather case included) are controls on Cover Art, Lookbook, Frame Picker and Quick Buy. The bag drawer has its own case note with an image and text.

Mode switches every buy button between Buy, Preorder and Waitlist. Waitlist sends shoppers to a link of your choice, such as Contact.

07

Brand, colours and type

Colours are colour styles (Shell, Sand, Tortoise, Terracotta, Amber, Sky, Ink). Text uses the text styles, set in Jost and Manrope.

The wordmark is live text: change MIRAGE in the navigation, the footer and the Masthead control on Cover Art.

08

Before you publish

Replace hello@example.com on the Contact page, adapt the Legal page to your own terms, and set the site title, description and social image in Site Settings.

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