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
As part of your installation, you need to install the headless sales channel in order to send automated order confirmation emails. Please follow the steps below to get your headless access token.
How to get your Storefront API key
Shopyflow requires a Storefront API access token to securely connect your Shopify store to your Webflow site. To get that token we will install the Shopify Headless App.
1. Go to the Shopify App Store and install the Shopify Headless App.
2. You will be redirected your Shopify Admin. Depending on when you are doing the installation, buttons to click might be slightly different. Click Install or Add sales channel when prompted.
3. Click Create storefront.
4. Your app is installed. Rename your app if needed. Next, let’s configure the API access. Click Manage next to Storefront API.
5. Storefront API access scopes lets you choose which information and functionalities are available for Shopyflow to access. Scroll down to the scopes and enable ALL THE SCOPES.
6. Enabling all the required scopes is crucial and is where most installation mistakes occur. Please ensure your Storefront API permissions match the image above exactly. Once you've enabled all the scopes, click Save.
7. Scroll to the top and copy the public access token.
8. Go back to the Launch Checklist.
