Product List Container
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
Collection container groups and connects the Filter & Sort UI with the filtered Product List by containing both elements. Product List Container is a Div Block with the sf-collection attribute.
Webflow app usage
Webflow app settings
Inner components
Module contents
Available methods
Taxonomy Filter
Taxonomy Filters apply filters to the displayed products in the Product List based on following Shopify taxonomies in real-time.
- Product Type
- Vendor
- Collections
- Tags
Taxonomy filters are made of 3 elements.
- Taxonomy Filter Wrapper: The outermost element of the Taxonomy Filter, containing the Taxonomy Filter Values and the Filter Reset button. It is a div element with the sf-filter attribute that takes the taxonomy name as a value (e.g., collections, product-type, vendor, or tags).
- Taxonomy Filter Value: The element that stores and toggles the assigned filter value on click. It uses the sf-filter-value attribute to store the value of the taxonomy filter (e.g., "Summer Collection" or "Nike"). When a Taxonomy Filter Value with
sf-filter-value="Nike"is clicked, the Product List is reduced to products with the Vendor set to "Nike" in Shopify. - Filter Reset Button: Clears all the filters applied to the Product List from the taxonomy group
Option Filter
Option Filters apply filters to the displayed products based on the variant group names in real-time. For example your users can filter all the products in your store that has a "Color" variant with the value of "Red".
Option Filters are made of 3 elements.
- Option Filter Wrapper: The wrapper element of the Option Filter, containing the list of Option Filter Values and the Filter Reset button.
- Option Filter Value: The element that stores and toggles the assigned filter value on click.
- Reset Filter Button: Clears all the filters applied to the Product List from the taxonomy group.
Product List
The Product List component is the Collection List Element that features the Shopyflow Products Collection. Every Collection Item in the Product List is a Buy Module that can be filtered in real-time using the Taxonomy and Option Filters.
Configuring the Product List
1. sf-list attribute must be added to the Collection List element that is the immediate parent of the Collection Items.
2. Every Product Item must be a Product Container that has a sf-product attribute with the Product ID set as it's value and sourced from the CMS.
Component
contents
Taxonomy Filter
Taxonomy Filters apply filters to the displayed products in the Product List based on following Shopify taxonomies in real-time.
- Product Type
- Vendor
- Collections
- Tags
Taxonomy filters are made of 3 elements.
- Taxonomy Filter Wrapper: The outermost element of the Taxonomy Filter, containing the Taxonomy Filter Values and the Filter Reset button. It is a div element with the sf-filter attribute that takes the taxonomy name as a value (e.g., collections, product-type, vendor, or tags).
- Taxonomy Filter Value: The element that stores and toggles the assigned filter value on click. It uses the sf-filter-value attribute to store the value of the taxonomy filter (e.g., "Summer Collection" or "Nike"). When a Taxonomy Filter Value with
sf-filter-value="Nike"is clicked, the Product List is reduced to products with the Vendor set to "Nike" in Shopify. - Filter Reset Button: Clears all the filters applied to the Product List from the taxonomy group
Webflow app usage
Webflow app settings
Option Filter
Option Filters apply filters to the displayed products based on the variant group names in real-time. For example your users can filter all the products in your store that has a "Color" variant with the value of "Red".
Option Filters are made of 3 elements.
- Option Filter Wrapper: The wrapper element of the Option Filter, containing the list of Option Filter Values and the Filter Reset button.
- Option Filter Value: The element that stores and toggles the assigned filter value on click.
- Reset Filter Button: Clears all the filters applied to the Product List from the taxonomy group.
Webflow app usage
Webflow app settings
Product List
The Product List component is the Collection List Element that features the Shopyflow Products Collection. Every Collection Item in the Product List is a Buy Module that can be filtered in real-time using the Taxonomy and Option Filters.
Configuring the Product List
1. sf-list attribute must be added to the Collection List element that is the immediate parent of the Collection Items.
2. Every Product Item must be a Product Container that has a sf-product attribute with the Product ID set as it's value and sourced from the CMS.
Webflow app usage
Webflow app settings
State management
Related Utilities
