Global components

Wrapper

Shopify Wrapper

This component connects your site to Shopify. Make sure this exists on every page of your Framer site. There are no visual elements, so you can set it to Absolute, -10 z-index, 1x1, etc.

Open the component and set your Shopify Storefront Domain and Shopify Storefront Access Token from the controls panel on the right.

Navigation & Warenkorb

Navigation

This is the top-level navigation component with the cart component nested inside.

It has an overlay (cartClick tap event fed from the nested Cart component) which contains the Cart preview (contents in the section below).

Vorschau des Warenkorb-Modal-Overlays, indem Sie auf das Navigationskomponente im Ebenenbedienfeld klicken

If you copy and paste the component above, the rest of the components will be included as they are nested in the overlay.

Cart

This component lives inside the navigation. The counter is dynamic.

The cartClick tap event is fed to the parent component to trigger the Cart overlay.

0

Checkout modal top bar

This component lives inside the navigation overlay. The counter is dynamic.

The Close tap event dismisses the modal.

My cart

0

Checkout card

This component lives inside the navigation overlay. All contents will pull from Shopify.

Checkout modal bottom bar

This component lives inside the navigation overlay. The price and currency are dynamically populated from Shopify.

You can fully customize the Checkout button inside the nested component.

Subtotal

$NaN USD

Checkout

Product item

Product card

Connect shopifyProductID variable to the matching field in your CMS.

Connect title variable to the matching field in your CMS.

Connect slugLink variable to the corresponding CMS collection slug
(i.e. /product/:slug)

Connect collection variable to the matching field in your CMS. You can use this to filter by collections.

If you want a short description preview on your card, connect cmsShortDescription variable to a text field in your CMS (currently setup as descriptionSnippet).

If you don't want a description, you can go into the component and disconnect the variable.