Configure your Shopify store
Learn how to set up your Shopify store to work with Framer.
In this doc, we will:
Step 1: Install the Shopify Headless App
This establishes a connection to Shopify and generates the Storefront API access token required for Framer Commerce.
Step 1: Install the Shopify Headless App
This establishes a connection to Shopify and generates the Storefront API access token required for Framer Commerce.
Step 1: Install the Shopify Headless App
This establishes a connection to Shopify and generates the Storefront API access token required for Framer Commerce.
1
Install the Shopify Headless App
Click to expand
1
Install the Shopify Headless App
Click to expand
1
Install the Shopify Headless App
Click to expand
2
In the app, click Create storefront
Click to expand
2
In the app, click Create storefront
Click to expand
2
In the app, click Create storefront
Click to expand
3
In the Storefront API section, click Manage
Click to expand
3
In the Storefront API section, click Manage
Click to expand
3
In the Storefront API section, click Manage
Click to expand
4
Next to Storefront API permissions, click the edit (pencil) icon
Click to expand
4
Next to Storefront API permissions, click the edit (pencil) icon
Click to expand
4
Next to Storefront API permissions, click the edit (pencil) icon
Click to expand
5
Enable the permission for "unauthenticated_read_product_inventory"
Click to expand
5
Enable the permission for "unauthenticated_read_product_inventory"
Click to expand
5
Enable the permission for "unauthenticated_read_product_inventory"
Click to expand
6
Click Save in the top bar
Click to expand
6
Click Save in the top bar
Click to expand
6
Click Save in the top bar
Click to expand
7
Under Public access token, click the copy (clipboard) icon
Save this token somewhere secure — you’ll need it when connecting your store in Framer Commerce.
Click to expand
7
Under Public access token, click the copy (clipboard) icon
Save this token somewhere secure — you’ll need it when connecting your store in Framer Commerce.
Click to expand
7
Under Public access token, click the copy (clipboard) icon
Save this token somewhere secure — you’ll need it when connecting your store in Framer Commerce.
Click to expand
Step 2: Get Your Shopify Domain
Framer Commerce needs your Shopify domain to know which store to connect to. You can use your default myshopify.com domain or a custom subdomain.
Step 2: Get Your Shopify Domain
Framer Commerce needs your Shopify domain to know which store to connect to. You can use your default myshopify.com domain or a custom subdomain.
Step 2: Get Your Shopify Domain
Framer Commerce needs your Shopify domain to know which store to connect to. You can use your default myshopify.com domain or a custom subdomain.
1
On your Shopify dashboard, click on Settings
Click to expand
1
On your Shopify dashboard, click on Settings
Click to expand
1
On your Shopify dashboard, click on Settings
Click to expand
1
Click on Domains
Click to expand
1
Click on Domains
Click to expand
1
Click on Domains
Click to expand
3
Copy either your primary domain or myshopify domain.
For the fastest setup, use the domain ending in .myshopify.com
A custom subdomain is recommended for brand consistency and reliable cookie persistence (learn more). It must be set as the Primary domain and be different from your Framer site’s domain.
This can be changed later at any time
Click to expand
3
Copy either your primary domain or myshopify domain.
For the fastest setup, use the domain ending in .myshopify.com
A custom subdomain is recommended for brand consistency and reliable cookie persistence (learn more). It must be set as the Primary domain and be different from your Framer site’s domain.
This can be changed later at any time
Click to expand
3
Copy either your primary domain or myshopify domain.
For the fastest setup, use the domain ending in .myshopify.com
A custom subdomain is recommended for brand consistency and reliable cookie persistence (learn more). It must be set as the Primary domain and be different from your Framer site’s domain.
This can be changed later at any time
Click to expand
3
Save this domain somewhere accessible.
You’ll paste it into Framer Commerce in the next step.
3
Save this domain somewhere accessible.
You’ll paste it into Framer Commerce in the next step.
3
Save this domain somewhere accessible.
You’ll paste it into Framer Commerce in the next step.
Remix OFFSIDE template for free
Just log into Framer to explore how Framer Commerce works, no extra signup.
Stay up to date
Be the first to hear about new templates, features, and offers.
Remix OFFSIDE template for free
Just log into Framer to explore how Framer Commerce works, no extra signup.
Stay up to date
Be the first to hear about new templates, features, and offers.
Remix OFFSIDE template for free
Just log into Framer to explore how Framer Commerce works, no extra signup.
Stay up to date
Be the first to hear about new templates, features, and offers.