Build filterable Shopify Product Listing in Webflow
Product Listing Module offers the ability to filter products in real-time, based on Shopify taxonomies, and variant option values. This guide deep dives into the components of a Product Listing Module and explains how can you easily add a Product Listing component into your Shopyflow site.
In the end of this tutorial you are going to have a Product Listing module that can filter products by
- Shopify product organization taxonomies(Collection, Product Type, Tags, and Vendor)
- Variant option values (such as Color, Size, Material)
Let's dive in!
The Product Listing Module is made up of:
- Filter components (based on product taxonomy like tags or collections),
- Product List (sourced from Webflow CMS synced with Shopify),
- Product Listing Container (the wrapper that connects all components).
This video explains how to add a Product Listing Module to your page using the Shopyflow Webflow App and breaks it down into it's critical components.
Product list is the product items feed in the Product Listing module. This guide explains how to configure the Product List and the Product Containers that displays the Shopify products in your Webflow page.
Taxonomy Filters, filter the Product List, by the product organization taxonomies that are assigned in Shopify product settings, in this guide we explain how you can easily configure, display and customize these filter elements using the CMS data.
Variant Option Filters, filter the Product List, by the variant options assigned in Shopify product settings, in this guide we explain how you can easily configure, display and customize these filter elements using the CMS data.
The Product Listing Module is made up of:
- Filter components (based on product taxonomy like tags or collections),
- Product List (sourced from Webflow CMS synced with Shopify),
- Product Listing Container (the wrapper that connects all components).
This video explains how to add a Product Listing Module to your page using the Shopyflow Webflow App and breaks it down into it's critical components.
Product list is the product items feed in the Product Listing module. This guide explains how to configure the Product List and the Product Containers that displays the Shopify products in your Webflow page.
Taxonomy Filters, filter the Product List, by the product organization taxonomies that are assigned in Shopify product settings, in this guide we explain how you can easily configure, display and customize these filter elements using the CMS data.
Variant Option Filters, filter the Product List, by the variant options assigned in Shopify product settings, in this guide we explain how you can easily configure, display and customize these filter elements using the CMS data.
