Product Listing Module
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
Product Listing Module offers the ability to filter products in real-time, based on Shopify taxonomies (Collection, Product Type, Tags, and Vendor), and variant option values (such as Color, Size, Material). This component is made up of three sub-components:
- Collection List Container: Groups the Product List with Taxonomy Filters and Option Filters.
- Taxonomy Filters and Option Filters: Lists of filter buttons for taxonomy and option filtering.
- Product List: The affected Product List that displays the filtered products.
Creating a shop page
Follow the below steps to create a shop page with filterable Product Listing Module.
1. Introduce the Product Listing module to your page using the Shopyflow Webflow App
2. Populate your product list with Shopify data through CMS
3. Add Taxonomy Filters to your module
4. Add Option Filters to your module
Webflow app usage
Webflow app settings
Inner components
Module contents
Available methods
Product List Container
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.
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
Product List Container
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
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
Active Filter Value State
How to customise the selected state of Filter Value
Selected Filter Value component and all its children elements are given the sf-active class. sf-active class can be used as a combo class to alter the style of the active selection of the component and its children elements.
Filter Unavailable State
How to customise the unavailable state of the Filter Value and the parent Filter Group
Unavailable Filter Value component is given the sf-filter-unavailable class. sf-filter-unavailable class can be used as a combo class to alter the style (e.g. hidden or lower opacity) of the element.
Additionally Filter Wrapper component is also given the sf-filter-unavailable class when non of its child Filter Values are available.
Related Utilities
