Building a headless Shopify storefront that has a sizeable inventory requires a robust CMS solution to build on top of. CMS not only provides a better development experience due to templated pages, it also offers good SEO and faster page loading speed. However going the CMS way comes with its own challenge: Your Shopify inventory must be kept in sync with the CMS.

To clear this hurdle, Shopyflow comes with a powerful feature: Shopify → Webflow CMS Auto-sync. Using Shopyflow's auto-sync tool, you can keep your Shopify inventory in sync with Webflow CMS. This means whenever you update, create or delete a product in Shopify, the changes to the inventory will be applied to Webflow CMS almost instanteneously.

Setup

Setting up the CMS auto-sync takes place in 5 simple steps:

• Selecting a Shopify store to sync
• Selecting a Webflow project
• Selecting Webflow CMS collections
• Matching Shopify product fields with Webflow CMS collection fields
• Registering Webhooks to Shopify

‍

① Connect to Webflow

1. In order to create your first sync, you must have a store in your Shopyflow account. If you haven't added one, please follow this guide to add your first store.
2. If you already have a store, head over to the syncs page in your Shopyflow Dashboard. Click on Add New Sync.
3. Choose the Shopify store you want to use from the dropdown list.
4. Click on Continue.
5. Select a Webflow Project from the dropdown list to sync with the Shopify store you picked in the previous step.
6. If there are no Webflow projects in the list, click on Connect to a new Webflow account button or install the Shopyflow Webflow App on a Webflow project. An authorization screen will pop up where you will pick a Webflow project or a Webflow workspace.
7. When the authorization is complete you will be redirected to a success page. Close this screen, and go back to the tab where your Sync setup is.
8. On the sync page, click on the refresh icon on the right to refresh the Webflow project list.
9. Choose your Webflow project from the dropdown and click on Continue.
10. In Step 3, create the collections you plan to use by clicking on the Create a new collection button in the dropdown lists.

‍

③ Create reference fields

Due to current limitations of Webflow CMS API, Shopyflow requires you to create 3 multi-reference fields and 2 reference fields manually.

1. Create the multi-reference and reference fields that are shown in the video below.
2. Publish your Webflow site.
3. Click the test button to validate your CMS schema.
4. Click on Continue.

‍

④ Match fields

1. Match the Shopify product fields of all your synced collections with the fields in the Webflow CMS.
2. Click on Sync all products to transfer your products to Webflow CMS. Clicking this button multiple times will overwrite the existing CMS items but won't create duplicates. You can also skip product transfer by clicking on the Don't sync for now button.
3. Click on Continue.

‍

⑤ Turn on Auto-sync

To enable auto-sync you need to do some additional setup in Shopify.

1. Go to Shopify Admin > Settings > Notifications, and select Webhooks.
2. Create 3 webhooks for Product Creation, Product Deletion and Product Update events and 3 webhooks for Collection Creation, Collection Deletion and Collection Update events using the Webhook URL that's shown on the page. Choose Latest as Webhook API version.
3. For increased security you must add your webhook secret. You can find it at end of webhooks section in Shopify. It is a random string of characters under the "Your webhooks will be signed with" text. Please see the video below for more details. Enter into the Webhook Secret to save it.
4. After creating the webhooks and saving the secret, click on the three dots icon next to each webhook in Shopify and click Send test to finalize your auto-sync setup. The test indicators in Shopyflow sync manager should turn green when tests pass.
5. Click on Save.

You are all set!