Docs

Home

Docs

Home

Docs

Home

Sync Shopify products and create custom fields in Framer CMS

Learn how to

In this doc, we will:

Create a collection

Filter which items to import

Sync standard Shopify Fields

Sync custom Shopify Fields

Create fields editable in Framer CMS

Make updates to the CMS

Create a collection

After you've logged in and connected your store:

Create a collection

After you've logged in and connected your store:

Create a collection

After you've logged in and connected your store:

Click on the "CMS" icon on the top bar of Framer

If you don't have a collection yet, click on the "Import" button on the left panel

If you already have a collection, click on the "Plugins" button on the top bar and open the plugin

Name your new collection and hit "Create"

By default, it will be called "Framer Commerce", however we recommend something like "Shop" as it will be part of your slug for your product pages.

Name your new collection and hit "Create"

By default, it will be called "Framer Commerce", however we recommend something like "Shop" as it will be part of your slug for your product pages.

Name your new collection and hit "Create"

By default, it will be called "Framer Commerce", however we recommend something like "Shop" as it will be part of your slug for your product pages.

Customize what fields you want to sync then hit "Sync Products"

Review the sections below for detailed explanations.

Customize what fields you want to sync then hit "Sync Products"

Review the sections below for detailed explanations.

Customize what fields you want to sync then hit "Sync Products"

Review the sections below for detailed explanations.

Filtering Items

By default, the plugin will import all the items from your Shopify store. If you want to only import specific items, you can:

Filtering Items

By default, the plugin will import all the items from your Shopify store. If you want to only import specific items, you can:

Filtering Items

By default, the plugin will import all the items from your Shopify store. If you want to only import specific items, you can:

On Shopify, assign a unique Vendor to all items you want to import

On the plugin in the CMS, select the "Filter" tab on the toggle

Enter the Vendor name exactly as you created it on Shopify (case-sensitive).

Shopify Fields (Standard)

We display a list of all standard available Shopify data for you to choose from. Simply check off all the fields you want sync. Things to consider:

Shopify Fields (Standard)

We display a list of all standard available Shopify data for you to choose from. Simply check off all the fields you want sync. Things to consider:

Shopify Fields (Standard)

We display a list of all standard available Shopify data for you to choose from. Simply check off all the fields you want sync. Things to consider:

Your Product ID, Title, and Slug are required

These are essential pieces to how the integration works.

Your Product ID, Title, and Slug are required

These are essential pieces to how the integration works.

Your Product ID, Title, and Slug are required

These are essential pieces to how the integration works.

You can choose between using Price data from the CMS or our components

We recommended using our Price components to display live data for variants and multi-currency.

You can choose between using Price data from the CMS or our components

We recommended using our Price components to display live data for variants and multi-currency.

You can choose between using Price data from the CMS or our components

We recommended using our Price components to display live data for variants and multi-currency.

Every store uses fields and properties differently

Product Tags, Product Types, and Collections are all different ways to organize products. It's up to you how to use them.

Every store uses fields and properties differently

Product Tags, Product Types, and Collections are all different ways to organize products. It's up to you how to use them.

Every store uses fields and properties differently

Product Tags, Product Types, and Collections are all different ways to organize products. It's up to you how to use them.

The 'Has Variants' toggle indicates whether a product has variants

This variable can be connected to canvas components for display logic, such as a "Quick Add" buttons.

The 'Has Variants' toggle indicates whether a product has variants

This variable can be connected to canvas components for display logic, such as a "Quick Add" buttons.

The 'Has Variants' toggle indicates whether a product has variants

This variable can be connected to canvas components for display logic, such as a "Quick Add" buttons.

Shopify Fields (Custom)

Import your Shopify custom metadata fields to manage content directly in Shopify or use these fields for advanced features like product grouping, upsell suggestions, and color variations.

Shopify Fields (Custom)

Import your Shopify custom metadata fields to manage content directly in Shopify or use these fields for advanced features like product grouping, upsell suggestions, and color variations.

Shopify Fields (Custom)

Import your Shopify custom metadata fields to manage content directly in Shopify or use these fields for advanced features like product grouping, upsell suggestions, and color variations.

Creating & using a new Metafield on Shopify

From your Shopify dashboard, click on "Settings" and then "Custom Data"

Click on "Products" and then "Add Definition"

Configure as you please, including a unique namespace key (the identifier), and hit "Save"

Go to your product page, scroll down to the "Product Metafields" section and populate your content

Syncing your Metafields on Framer

From your Shopify dashboard, click on "Settings" and then "Custom Data"

Click on "Products" and then on the metafield you wish to import

Copy the namespace key exactly as it is

In our plugin on the Framer CMS, scroll to the Custom Metafields section

Click "Add new" and paste in your namespace key

Framer-only Fields

You can add and edit content directly in Framer that isn't synced from Shopify, just like you would in a traditional Framer CMS collection.

Framer-only Fields

You can add and edit content directly in Framer that isn't synced from Shopify, just like you would in a traditional Framer CMS collection.

Framer-only Fields

You can add and edit content directly in Framer that isn't synced from Shopify, just like you would in a traditional Framer CMS collection.

In our plugin on the Framer CMS, scroll to the Framer-only fields section

Click on "Add new" and choose your field type

Make sure you give each field a unique name

Making Updates

Click 'Sync' to update your Shopify data, or 'Manage' to adjust synced fields, namespace keys, and Framer-editable fields. Here are some things to consider:

Making Updates

Click 'Sync' to update your Shopify data, or 'Manage' to adjust synced fields, namespace keys, and Framer-editable fields. Here are some things to consider:

Making Updates

Click 'Sync' to update your Shopify data, or 'Manage' to adjust synced fields, namespace keys, and Framer-editable fields. Here are some things to consider:

Live data like inventory and variants update automatically

You only need to hit the "Sync" button to update CMS data.

Live data like inventory and variants update automatically

You only need to hit the "Sync" button to update CMS data.

Live data like inventory and variants update automatically

You only need to hit the "Sync" button to update CMS data.

If you delete a product on Shopify, it will be removed from the Framer CMS after you hit Sync.

Make sure your CMS is updated to avoid broken products.

If you delete a product on Shopify, it will be removed from the Framer CMS after you hit Sync.

Make sure your CMS is updated to avoid broken products.

If you delete a product on Shopify, it will be removed from the Framer CMS after you hit Sync.

Make sure your CMS is updated to avoid broken products.