Edit Me
Make TIDELABEL yours.
Everything repeatable lives in the CMS. The walk, the cart and the motion are code components with plain controls.
01
Connect Shopify
1. In Shopify admin, open a product, then a variant. The number at the end of the URL (/variants/4021…) is its Variant ID.
2. Paste it into that product’s Shopify Variant ID field in the CMS (Products). Sizes can each have their own variant: on the product page select the Size + add layer and fill Size variants, e.g. S:4021001, M:4021002.
3. Open the Nav component, select the Garment Bag layer and type your store domain (your-store.myshopify.com) into Shopify store.
4. Publish. Add to bag, then Checkout, opens Shopify checkout with the bag filled in (cart permalinks, no app or API key needed).
5. No Shopify? Leave Variant ID empty and paste any checkout link (Stripe Payment Link, Gumroad, Shopify Buy Button) into Buy Link. The buttons then open it directly.
Want live stock and variants? Install Shopify Connect or Framer Commerce from the Marketplace; their components can replace these.
02
Swap the walk
Select the Walk layer in the Home hero. Frames 01, 04, 07 and 10 are the poses; the frames between are motion blur. Drop in your own transparent cut-outs (same size, feet on the same line).
Start position, End position and Figure size set the route. Edge trim lets her walk further on small screens. The footer uses the same component with Plays set to When in view + hover.
03
Collections and colours
Each collection has a Colour and an Ink colour in the CMS. They flood the Five looks strip, the sticky panels on Home and the collection pages.
04
Products
Every product has a Still (shown first) and an On Model photo (shown on hover), two gallery photos, sizes, price and description.
05
Lookbook and stockists
Looks and Stockists are CMS collections. Stockist photos follow the cursor on desktop and show inline on phones.
06
Fonts, colours and forms
Colours are in Assets > Colors (Bone, Ink, Cobalt…). Text styles use Instrument Sans. The newsletter and wholesale forms send to Framer form submissions; connect a webhook or email in the form settings.