Shopify Storefront data and cart logic is bound to your Webflow elements through Shopyflow attributes. Connecting your Webflow site to Shopify is done by adding custom attributes to your Webflow elements.
Yet, you are not required to type or edit attributes manually. Shopyflow provides you with the pre-configured components needed to create your store, as copyable Webflow elements right in Webflow designer.
All the copyable Shopyflow Components are native editable Webflow elements. There is no layout or styling limitation on any element.
In the below image hover your mouse on the hotspots to see all the required Shopyflow attributes to build a product page like this in Webflow
Above product page has the following components:
This is the simplest form of a product page you can create using Shopyflow. We call it the Buy Module.
Buy Module is the core building block of Shopyflow. You can have as many Buy Modules as you like in a single page and even nest one inside another and build highly custom shopping experiences.
Every Buy Module is associated with a single product from your store and allow your customers to configure and perform the purchase of that particular product. So all the components inside of the Buy Module like; Product Title, Price, Product Decription, Gallery images, Discounts etc. are automatically populated on the page load with the Shopify store data.
In your Buy Module you can also feature:
All these components are separately available in the Shopyflow Webflow App to insert into your Buy Module with a click.
To have a deep dive into the structure and the sub-components of the Buy Module visit the Product Container page.
