Free ON WEBFLOW.IO DOMAINS

Buy Module Overview

Understanding the Buy Module, the building block of Shopyflow

Buy Module is the core building block of Shopyflow. Every Buy Module is associated with a single product from your store and allow your store visitors to configure and perform the purchase of a particular product.

Buy Module is used for creating CMS powered product detail pages, product listing items or as a stand alone product component anywhere in your store.

How to add a Buy Module to your site

Open Shopyflow Webflow App in Webflow designer
Go to Store Builder
Click Add new
In the opening list select Buy Module
From the dropdown select a specific product from your store or CMS if you are building with CMS data.
Copy the component and paste anywhere in the project.
Make sure you also have a Cart Module present in the same page.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

‍

Buy Module structure

Buy Module is wrapped in the Product Container component. Product Container is a Div Block that is assigned the sf-product attribute, and as the attribute value it stores the Shopify Product ID of the product that it is built for.

Product ID is sourced from CMS if the Buy Module is in a Collection List or a CMS product page template. Or it can be typed manually if it’s a static page or a component. Along with the product container an Add to cart button is the only required component for the Buy Module to function properly.

Buy Module components

A Buy Module can have the following components. All those components listed below are available in the Shopyflow Webflow App right in the Webflow designer.

‍