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 sourced Product Page Templates or Product Listing Grid Items
- Dynamic Product Items (Cart Upsell Items, Related Products etc.)
- Static Product Items (A static Buy Module anywhere in your site for any Shopify product)
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.
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.
Product Container
Product container component provides product context to the Buy Module. It is the outermost element of the Buy Module.
Add to Cart Button
Below components allow users to add to product to cart and checkout.
- Add to Cart Button
- Buy Now Button
- Shop Pay Button
Product information diplayers
You can use the following components to display product information directly pulled from Shopify storefront API in a Buy Module.
- Product Name
- Product Price
- Product Compare Price
- Product Description
- Product Image Gallery
- Product/Variant SKU
- Product/Variant Stock count
- Product Taxonomies (Vendor, Tags, Collections, Product Type)
- Shopify Product Metafields
- Selected Variant Option
Purchase Controls
You can use the following components to allow your customers to configure their purchase using the Buy Module.
- Variant Option Changers
- Quantity Changers
- Selling Plan Changers(Subscription Module)
Cross selling, Configurable Products and Bundles
You can create cross sells, bundles, and configurable products using the following components in the Buy module
