Connect your store
The cart reaches Shopify's checkout through a cart link. Follow these six steps to connect your own store.
Connect your store
The cart reaches Shopify's checkout through a cart link. Follow these six steps to connect your own store.
Connect your store
The cart reaches Shopify's checkout through a cart link. Follow these six steps to connect your own store.
Steps
01
Create a Shopify store
Sign up for a Shopify plan. A development store is free for testing, but it asks visitors for a password before checkout.
02
Add your products
In Shopify admin, open Products and add one product for each item in the Products collection in Framer. Give each the same price, because the site shows the prices from the CMS.
03
Copy your store domain
Find your myshopify.com address in Shopify under Settings, then Domains. Copy it without the https:// part.
04
Paste the domain into the cart drawer
In Framer, open each layout template (Main, Main with newsletter and Main with closing band), select Cart drawer and paste the domain in Store domain. Set it on the Desktop copy; Tablet and Phone follow. The Add to cart button has no domain field.
05
Add the variant IDs
In Shopify admin, open each product and copy its variant ID, the last number in the address of the variant page. In Framer, open Products, select the item and paste the number in Shopify variant ID. The Add to cart button and the cart read it. Keep each CMS price equal to the Shopify price.
06
Test a checkout
Publish the site, add a product to the cart and press Checkout. Shopify's checkout page should open with the same product and price. If the cart shows the demo note instead, the domain or a variant ID is missing.
Demo mode
This demo runs without a store, so the cart shows an example checkout until you add your Shopify domain.
Steps
01
Create a Shopify store
Sign up for a Shopify plan. A development store is free for testing, but it asks visitors for a password before checkout.
02
Add your products
In Shopify admin, open Products and add one product for each item in the Products collection in Framer. Give each the same price, because the site shows the prices from the CMS.
03
Copy your store domain
Find your myshopify.com address in Shopify under Settings, then Domains. Copy it without the https:// part.
04
Paste the domain into the cart drawer
In Framer, open each layout template (Main, Main with newsletter and Main with closing band), select Cart drawer and paste the domain in Store domain. Set it on the Desktop copy; Tablet and Phone follow. The Add to cart button has no domain field.
05
Add the variant IDs
In Shopify admin, open each product and copy its variant ID, the last number in the address of the variant page. In Framer, open Products, select the item and paste the number in Shopify variant ID. The Add to cart button and the cart read it. Keep each CMS price equal to the Shopify price.
06
Test a checkout
Publish the site, add a product to the cart and press Checkout. Shopify's checkout page should open with the same product and price. If the cart shows the demo note instead, the domain or a variant ID is missing.
Demo mode
This demo runs without a store, so the cart shows an example checkout until you add your Shopify domain.
Steps
01
Create a Shopify store
Sign up for a Shopify plan. A development store is free for testing, but it asks visitors for a password before checkout.
02
Add your products
In Shopify admin, open Products and add one product for each item in the Products collection in Framer. Give each the same price, because the site shows the prices from the CMS.
03
Copy your store domain
Find your myshopify.com address in Shopify under Settings, then Domains. Copy it without the https:// part.
04
Paste the domain into the cart drawer
In Framer, open each layout template (Main, Main with newsletter and Main with closing band), select Cart drawer and paste the domain in Store domain. Set it on the Desktop copy; Tablet and Phone follow. The Add to cart button has no domain field.
05
Add the variant IDs
In Shopify admin, open each product and copy its variant ID, the last number in the address of the variant page. In Framer, open Products, select the item and paste the number in Shopify variant ID. The Add to cart button and the cart read it. Keep each CMS price equal to the Shopify price.
06
Test a checkout
Publish the site, add a product to the cart and press Checkout. Shopify's checkout page should open with the same product and price. If the cart shows the demo note instead, the domain or a variant ID is missing.
Demo mode
This demo runs without a store, so the cart shows an example checkout until you add your Shopify domain.