How to display Shopify product information in Webflow with Shopyflow

Shopyflow features a comprehensive data sync from Shopify to Webflow CMS. All the essential Shopify product information is present in the CMS, and in real-time sync with Shopify. In CMS powered Buy Modules this data can be used without needing an attribute.

However in static Buy Modules, and even in CMS powered Buy Modules for variant specific information that changes by user choices, like SKU, Stock count, selected variant image, or metafields, it’s required to use Shopyflow components.

A Shopyflow component is a native Webflow element with a Shopyflow attribute. All the Shopyflow components are available in Store Builder.

Available Shopify product data displayers in Shopyflow Webflow App

Product information displayers are Shopyflow components that dynamically pulls data from Shopify Storefront API and display as its content on page load.

The following components are directly available in the Shopyflow Webflow App for both Add flow and Convert flow

Add components to your page using Shopyflow Store Builder

Shopyflow Webflow App comes with an extensive library of components for you to easily copy and paste into your page without leaving the Webflow designer.  

The store builder features 2 workflows:

Add flow

Get any of the displayer Shopyflow components with required attributes, as native copyable Webflow elements.

1. Login to Shopyflow Webflow App in Webflow designer
2. Go to Store Builder
3. Click Add new
4. In the opening list select the Shopify data you want to display

Convert flow

Let’s you convert any regular Webflow element into a Shopyflow component by adding the required attributes.

1. Login to  Shopyflow Webflow App in Webflow designer
2. Select the Webflow element that you want to Convert
3. Go to Store Builder Click Convert
4. In the opening list select the Shopify data you want to display