Product Filter

The Product Filter Element is a tool that allows customers to easily find the products they need quickly and efficiently. With intelligent filtering options based on criteria such as availability, collection, vendor, product type,…, and more, the Product Filter Element enhances the shopping experience, helping customers conveniently discover the right products.

From Element list > Shopify > Product Filter

Note: This element can be active on all pages and the results will be displayed on the Collection page.

1. Content

1.1. Add item

Note: Please note that the predefined fields for collection, availability, vendor, product type, price, and tag can only be used once.

• Availability:

Here, you can fill in the Label field and Select All Text field is required (you can filter both product in-stock and out-of-stock when selecting this option)

• Collection

There are 2 Collection sources, you can choose to show All Collections or Specific Collection

1. For All Collection, will show all collections in your Shopify store
2. For Specific Collection, you can choose to show 1 or more collections here

• Vendor

Show all vendors of products in Shopify store

Note: Display by other filters, for example by each filtered collection

• Product type and Tag work the same as Vendor

• Price

There are 2 Price filter types: Custom segment steps and Custom price for segment

1. For Custom segment steps: select the desired number of segments (ex: 5)

2. For Custom price for segment: You can drag or fill in the desired number. (ex: max 1000000)

• Custom

You can create other filters as you wish via metafields

For Custom, you need to use Metafield and Search & Discovery app

Step 1: Go to Custom data of Products in your Shopify admin page > Add Definition

Step 2: Fill in information such as name, description,…

Note: Namespace and key used to fill in Product metafield name in element can get data

Step 3: Enable Filter in product index

Step 4: Add metafield created to the product you want

Step 5: Go to Search & Discovery app, and find your metafield, now all the metafields you added to the product will be displayed here

Step 6: Add Namespace and key

Step 7: Enter metafield values

1.2. Other options

You can config for Submit button, Items per row and Space Between

2. Design

Product Filter allows you to configure design for General, Label, Select, Submit button

In each main option, there are so many options inside to change Color, Background color, Border, Border radius, Width, Spacing, etc. Please go here to figure them out.