Shopyflow installation takes place in 2 simple steps.
Shopyflow requires a Storefront API access token to securely connect your Shopify Store to your Webflow site. To generate your Store API access token;
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Shopyflow requires a Storefront API access token to securely connect your Shopify Store to your Webflow site. To generate your Store API access token;
1. Head to your Shopify Admin > Settings > Apps and Sales Channels section and click Develop apps link.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Shopify Storefront data and cart logic is bound to your Webflow elements through Shopyflow attributes. Connecting your Webflow site to Shopify is done by adding custom attributes to your Webflow elements.
Yet, you are not required to type or edit attributes manually. Shopyflow provides you with the pre-configured components needed to create your store, as copyable Webflow elements right in Webflow designer.
All the copyable Shopyflow Components are native editable Webflow elements. There is no layout or styling limitation on any element.
In the below image hover your mouse on the hotspots to see all the required Shopyflow attributes to build a product page like this in Webflow
.png)
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.
Setting up the CMS auto-sync takes place in 5 simple steps:
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.
If you already have a store, head over to the syncs page in your Shopyflow Dashboard. Click on Add New Sync.
Choose the Shopify store you want to use from the dropdown list.
Click Continue.
Select a Webflow Project from the dropdown list to sync with the Shopify store you picked in the previous step.
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.
If you are connecting to a new Webflow account, you will be redirected to an authorization screen where you can will pick your Webflow project or workspace.
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.
On the sync page, and click the refresh icon on the right to reload the Webflow project list.
If you already have created the Shopyflow collections, they will be present in the dropdown lists.
If you haven't yet, create the collections for your Shopify Product Options, and Shopify Products by click the Create a new collection button in the dropdown lists.
Due to current limitations of Webflow CMS API, Shopyflow requires you to create 3 multi-reference fields manually.
Go to Webflow and open up your newly created Shopify Product Collection's settings.
Create 3 multi-reference fields with names Product Option 1 Values, Product Option 2 Values, Product Option 3 Values and Product Collections (optional), and connect them to your product options collection that you picked earlier.
Click on the test button to verify your setup. If your setup is correct the continue button will be enabled.
Click continue.
Match the Shopify product fields with the fields in the Webflow CMS.
Select the products you want to send to Webflow CMS in the left panel.
You can also select a sample product in the left and send it to your Webflow CMS by clicking the first button at the bottom.
You can send or re-sync your products to Webflow CMS by clicking the second button at the bottom.
You can skip product transfer altogether by clicking on the last button.
Click continue.
To enable auto-sync you need to do some additional setup in Shopify.
Go to Shopify Admin > Settings > Notifications, scroll all the way down to the Webhooks section.
Create 3 webhooks for Product Creation, Product Deletion and Product Update events using the Webhook URL that's shown on the page. Choose Latest as Webhook API version.
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.
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 above should turn green when tests pass. Once they do, you can save the sync.
