Build Shopify stores using Relume and Shopyflow in Webflow

Shopify and Webflow Apps

Shopyflow consists of two apps: a Shopify App and a Webflow App. These apps work together to connect both platforms, configure Storefront API credentials and scopes in Shopify, and sync Shopify data to Webflow CMS. The steps below outline the installation process.

1. In Shopify Admin click on the search bar at the top and type ”Shopyflow”.
2. Select the Shopyflow App from the search results.
3. Click Install.
4. When redirected back to Shopify admin, click Install again in the popup.
5. Open the app, and log in using your credentials. If you don’t have an account, sign up for free on Shopyflow.
6. On the Shopyflow opening screen, click Connect to a Webflow Project.
7. A new window will open, If you’re not logged into Webflow, sign in first.
8. Select your Webflow project from the list.
9. Click Authorize App, and close the authorization window.
10. Click Save in Shopyflow.
11. Click Open in Webflow  link to go to your Webflow project and start using Shopyflow Webflow App in the Webflow designer.

Import Shopify data to Webflow CMS

Our apps are already installed and ready to use. Now we are going to enable Shopyflow in our Webflow project and Import Shopify Data to Webflow CMS using the  Shopyflow Webflow App just with a few clicks.

1. Open the Shopyflow App in Webflow.
2. Click Installation
3. Enable "Auto-install" to inject the Shopyflow installation code to your site.
4. Check the "I understand" box and click Save.
5. Publish your site to apply the changes.
6. Go back to home screen and click on "Import and Manage Shopify Data".
7. Shopyflow will automatically detect the required CMS collections, including:
   1. Products (Product details)
   2. Product Options (Product variations)
   3. Collections (Product groupings)
   4. Tags (Product categorization)
   5. Vendors (Brand or supplier details)
   6. Product Types (Item classification)
8. Click Start Import and wait for Shopyflow to sync the data.

Depending on the number of products, the import may take a few minutes.

Setting up the product page template

Our installation is done and we are ready to build the product page. We are provided with multiple layouts in Shopyflow Relume Library to create our product page template. Follow the simple steps below to get ready to launch your product page.

Copy/Paste the Buy Module

1. Go to Shopyflow Relume Library and copy the product page component of your choice
2. In Webflow designer, open the Products CMS Template in the Pages Panel
3. Paste the copied Relume component inside of the Main Wrapper element

Set the Product ID on the Product Container

1. Open the Navigator panel and expand all the elements in
2. Select the --Product Container component and go to the Settings tab
3. In the Custom Attributes section, locate the sf-product attribute and set its value to the Product ID field from the CMS

Configure the Variant Option Selectors

In the Products CMS collection there are there are 3 Product Option Name fields(Plain Text Fields) and 3 Product Option Value fields(Multi-reference fields connected to Product Options collections). We are going to use each set to configure and populate our Variant Option Selectors.

1. Select the Collection List inside of the first Variant Option Selector block
2. Connect its source to the Product Option 1 Values field
3. Select the --Custom Option Wrapper component and go to element Settings
4. Set the sf-change-option attribute value to Product Option 1 Name
5. Select its direct child element, --Custom Option Value, and set its sf-option-value attribute to Displayed Name field from the CMS
6. Select the inner Text Block element and set its content to Displayed Name to display the option name
7. Select the label element and set its text source to Product Option 1 Name
8. Now select the outermost element of the Variant Option Selector block that has the class product_header1-option and make it conditionally visible. So it’s visible only if the Product Option 1 Values field is set
9. Repeat the above steps for the other two Variant Option Selector blocks

Connect Product Information

The rest of the elements in the Buy Module don't require any further configuration since all their attributes are set. Even though they will get populated automatically on the page load, the best practice is connecting them to their respective CMS fields. This way we will take advantage of the server-side rendering feature of Webflow. All the elements have a corresponding field in the CMS with the same name, all you need to do is binding their content to those fields.

1. Set the text source of --Product Title component from CMS
2. Set the text source of --Price and --Compare Price component from CMS
3. Set the text source of --Product Description component from CMS
4. Set the image source of --Main Image component from CMS
5. Set the thumbnail collection to Gallery Images field
6. Select the --Thumbnail element, and set its background image to Product Gallery Image

Publish and Test

1. Publish the site and verify the product page functionality.
2. Test the Add to Cart feature.
3. Proceed to Checkout to confirm the integration is working properly.

Add the Product Listing Component

1. Open the Shopyflow Relume Library and navigate to the Product Listing folder.
2. Choose a component that best fits your needs (e.g., Filters 3).
3. Click Copy, then go back to Webflow Designer.
4. Remove any existing product listing section.
5. Paste the copied component inside the Main Wrapper element.

Populate the Product List

1. Select the Product List element and connect it to the Products CMS collection.
2. The Product List element contains the sf-product-list attribute, which dynamically loads filtered product items.
3. Inside it, the Product Container serves as a wrapper for individual product items.
4. Select the Product Container and set its sf-product attribute value to the Product ID field from the CMS.

Connect Product Information

1. Link the Product Page link to the correct CMS field.
2. Set the Product Image to display dynamically from the CMS.
3. Connect the Product Title field.
4. Assign Price and Compare Price fields.

💡 Tip: Each product item is a Buy Module, meaning you can also add:

• Add to Cart buttons
• Variant Option Selectors
• Quantity Changers
• Image Galleries

Configure Product Filters

Make the Filter Panel Visible for Editing

1. The filter panel is inside a modal, placed next to the Filters Button.
2. Select the modal in the Navigator.
3. Go to the Transform Settings in the Styles Panel and disable the applied transform (click the eye icon).

Configure Taxonomy Filters

1. Expand all elements in the Navigator.
2. Locate the Filter Group List, which contains Taxonomy Filter Wrappers (one for each filter type: Collection, Product Type, Vendor, and Tags).
3. Each Taxonomy Filter Wrapper has:
   1. sf-filter attribute (set to the taxonomy type).
   2. A Filter Reset Button.
   3. A Collection List containing the Taxonomy Filter Value components.

Assign Filter Values

1. Select a Taxonomy Filter Value component.
2. Set its source as the corresponding CMS collection (e.g., Collections, Product Types, Vendors, or Tags).
3. In Custom Attributes, set the sf-filter-value attribute to the Name field from the CMS.
4. Finally, set the Label text to display the Name field.

Repeat for other Filter Groups

Repeat the above process for:

• Product Type filters
• Vendor filters
• Tags filters

Finalizing Filters & Active States

1. Remove any helper elements.
2. When a filter is active, the sf-active class is applied to the component and its children.
3. Checkbox icons and form pills use sf-active to style the active state.
4. If needed, customize the appearance of active filters.
5. Remove the sf-active classes before publishing.
6. In Transform Settings, click the eye icon to reapply the hidden state to the modal.

Configure the Active Filters List & Sorting Controls

1. The Active Filters List dynamically displays selected filters using the Active Filter Item component.
2. Each item consists of:
   • Filter Item Title (showing the filter name).
   • Filter Remover Button (to clear an applied filter).
3. The Sorting Control is a pre-configured Select element with necessary attributes. No further setup is needed.

Publish and Test

1. Publish your site and verify the Product Listing Module.
2. Check if:
   • Products load correctly.
   • Filters apply dynamically.
   • Sorting works as expected