Edit me
Make it yours.
Everything here is native Framer and CMS-driven. Start with these steps.
01
Remove the Buy template button
Remove the Buy template button
The floating Buy template button is a sales demo. After you buy, delete the layer named Buy Template (remove after purchase) in the Main layout template, or turn its visibility off. It then disappears from every page.
The floating Buy template button is a sales demo. After you buy, delete the layer named Buy Template (remove after purchase) in the Main layout template, or turn its visibility off. It then disappears from every page.
02
Logo
Logo
The logo is the Logo code component in the Navigation and Footer. Change the letters before and after the O, the size and the colours in the right panel.
The logo is the Logo code component in the Navigation and Footer. Change the letters before and after the O, the size and the colours in the right panel.
03
Colours
Colours
Edit the colour styles: Paper, Ink, Yuzu and Blood drive the whole site. Each flavour has its own colour in the Flavours CMS.
Edit the colour styles: Paper, Ink, Yuzu and Blood drive the whole site. Each flavour has its own colour in the Flavours CMS.
04
Fonts
Fonts
Text styles use Pathway Extreme, Golos Text and Space Mono. Swap them in Assets, Text styles, and every page follows.
Text styles use Pathway Extreme, Golos Text and Space Mono. Swap them in Assets, Text styles, and every page follows.
05
Products and checkout
Products and checkout
Products and Flavours live in the CMS. Paste your Shopify product or cart link into each item’s Checkout or Buy link field and the Add to cart buttons use it.
Products and Flavours live in the CMS. Paste your Shopify product or cart link into each item’s Checkout or Buy link field and the Add to cart buttons use it.
06
Hero product
Hero product
The hero uses a photo plus a cut-out of the same photo (same size) so the can sits in front of the headline. Replace both with your product photo and a transparent cut-out exported at the same size.
The hero uses a photo plus a cut-out of the same photo (same size) so the can sits in front of the headline. Replace both with your product photo and a transparent cut-out exported at the same size.
07
Motion
Motion
Motion comes from code overrides that only add a CSS class. Clear a layer’s Code Override to remove its motion. Nothing is ever hidden if motion is off.
Motion comes from code overrides that only add a CSS class. Clear a layer’s Code Override to remove its motion. Nothing is ever hidden if motion is off.
08
Forms
Forms
The contact and newsletter forms send to Framer Forms. Point them at your inbox or tool in the form settings.
The contact and newsletter forms send to Framer Forms. Point them at your inbox or tool in the form settings.