Docs
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

  1. Open Shopyflow Webflow App in Webflow designer
  2. Go to Store Builder
  3. Click Add new
  4. In the opening list select Buy Module
  5. From the dropdown select a specific product from your store or CMS if you are building with CMS data.
  6. Copy the component and paste anywhere in the project.
  7. 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.

Learn more →

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

Learn more →

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

Learn more →

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

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