Step 2 - Populate the page content with CMS data
Populating the page content is very simple. All the CMS fields are named as their target components. Please see the below interactive guide to connect your fields to the page template.
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.
Sourcing your products from CMS has countless benefits. Templated yet customisable product pages, available CMS data to quickly create Product Listing pages and server-side rendering of the content are just a few to note.
Below guide will teach how to build a product page using the Webflow CMS, source all the page content, and the Shopyflow configuration dynamically from CMS.
This tutorial assumes that you have a basic understanding of the Buy Module. If you haven't yet taken a look at it, we recommend that you go check out how Buy Module and its components work here.
Make sure to copy the Shopyflow code snippet from your Dashboard and paste it into the head section of your Webflow site in site settings to complete the Shopyflow installation.
This guide requires the installation of the Shopyflow Webflow App on your Webflow account. If you haven't installed it yet, head over to the Webflow Apps Marketplace and add it to your site or to your workspace.
This tutorial covers the steps of building the product page template in Webflow designer using real product data. Before starting this tutorial make sure you have completed the Shopify to Webflow CMS data transfer steps following this guide.
We start creating the product page by adding a CMS Buy Module to the page. Buy Module is made of all native Webflow elements with Shopyflow attributes on them. We are going to populate the content and the product specific attribute values using the CMS fields.
To add the Buy Module open the Shopyflow App in Webflow and follow the below steps:
Populating the page content is very simple. All the CMS fields are named as their target components. Please see the below interactive guide to connect your fields to the page template.
By default CMS Buy Module comes with static Image Gallery Thumbnails. It's always a good idea to source them CMS so you design/build with real data, and serve the images instantly to your visitors before Shopify data is fetched on the page load.
We have two types of product-specific attribute values to source from the CMS. Follow the interactive guide below to connect your attribute values correctly.
If you want to use Custom Option Selectors instead of the standard ones, please see Step 7 in this guide.
Let's make the Option Selectors conditionally visible to avoid having redundant option selectors in the Buy Module when they are not needed.
Now we have a UI that allows products to be added to the cart, yet our page doesn't have a cart element. Let's introduce a cart to complete the purchase experience on this product page.
Cart Module by default has all the elements. You are encouraged to style, move around and explore the inner elements to tailor the Cart Module to your needs.
To have a deeper dive into the structure and the sub-components of the Cart Module, visit the component documentation page.
Now we have a Cart Module placed in a fixed positioned popup. The cart popup element becomes visible with a class called sf-cart-opened, after a new element is successfully added to the cart. To hide the cart popup initially on the page load:
If you change the display property to none for the Cart Popup, the cart opening transitions are not going to work. Instead, when you edit the Cart Module go ahead and add the sf-cart-opened class to the Cart Popup element to make it visible and remove the same class to hide it.
Shopyflow offers a very powerful way to create Custom Option Selectors by using Collection Lists. To find out more please watch 5-minute in-depth tutorial below.
Once you added the Cart Popup component to your page your store is ready to go. At this point we suggest that you publish your site and see if everything works as expected.
The Step 7 is optional. You can replace the regular Select Inputs with the Custom Option Selectors. Complete the last step for customizing your option selectors.
