Docs
Free ON WEBFLOW.IO DOMAINS

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!

Introducing the Product Listing Module

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.

Populating the Product List

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

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

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.

Introducing the Product Listing Module

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.

Populating the Product List

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

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

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.

Introducing the Product Listing Module
Populating the Product List
Taxonomy Filters
Variant Option Filters