Docs
Free ON WEBFLOW.IO DOMAINS

Building CMS based Shopify product pages in Webflow with Shopyflow

Shopyflow uses CMS collections to store Shopify data in Webflow this enables developers to build their product pages with real time Shopify store data. 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 walks you through the simple steps of adding and configuring your Buy Module in CMS product page template.

Before diving into this tutorial, make sure you’ve completed the installation and Shopify data import steps. If you haven’t done those yet, no worries—just follow the links below for step-by-step guidance.

  1. Installation guide
  2. Shopify Data Import and Sync to Webflow CMS

Adding a Cart Module to the page

When you are building a page with Shopyflow that allows customers to add a product to cart you are always going to need a Cart Module in the page for the user to see that the product is added to Cart. Before introducing our Buy Module to the product page template let's add a Cart popup to the page.

To add the Cart Module open the Shopyflow App in Webflow and follow the below steps:

  1. Navigate to CMS Product page template in the Pages panel
  2. Open the Shopyflow Webflow App in the apps section
  3. Go to Store Builder section
  4. Click Add New button in the app
  5. Select Cart Module from the list
  6. In the opening screen select with popup option and click Copy element button
  7. Paste the Cart Module anywhere in the page

Don't set the display property of the Cart Popup element to none.

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.

Managing the Cart Popup visibility

Once you pasted the Cart Module, it is 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:

  1. Open the Navigator Panel
  2. Make sure you select the --Cart Popup element which is the outermost element of the Cart Module.
  3. Remove the class sf-cart-opened class from the element.

Introducing the Buy Module

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:

  1. Navigate to CMS Product page template in the Pages panel
  2. Open the Shopyflow Webflow App in the apps section
  3. Click Add new.
  4. Select Buy Module from the list.
  5. In the product dropdown select Dynamic (CMS) and click Copy element button.
  6. Paste the Buy Module into a container element in Webflow Designer.

Once you have your Buy Module in the page, follow the instructions in the below video to configure your Product page template, and connect the CMS content to your Buy Module.

Configuring the Buy Module

No items found.
No items found.
No items found.