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 & Cart
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).
Preview the cart modal Overlay by clicking on the navigation component in the Layers panel
Logo
0
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
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.