Filter

About the filter, you can choose Dynamic filter (Storefront filtering) from Shopify OS 2.0 OR Filter by tags.

Dynamic Filter

Dynamic filter (Storefront filtering) allows merchants to add filters to their collection and search results pages based on the following product and variant attributes: Availability, Price, Product type, Vendor, Variant options and Metafields. More information, see Storefront filtering.

1. From your Shopify admin, go to Online Store -> Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Choose Collection from the dropdown window. After that, scroll to Filter at Product grid.

4. Choose Type as Storefront Filtering.

If your product collection contains over 5000 products, then filters are hidden. For more information, see Add storefront filtering. You must install Shopify Search & Discovery to customize the filter.

To select the filters that will appear on your collection pages:

1. From your Shopify admin, go to Online Store -> Navigation.

2. Scroll down to Collection and search filters.

3. Open Shopify Search & Discovery. Scroll down to Customize filter settings and click View filters -> Edit filters.
4. Select one or more filter options from the list of available filters.

5. Click Done to save your product options.

6. Click Save to update your collection and search filters.

Filter By Tags

1. From your Shopify admin, go to Online Store -> Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Choose Collection from the dropdown window. After that, scroll to Filter at Product grid.

4. Choose Type as Tag Filtering (Filter By Tags).

A maximum of 1,000 tags can be returned. Refer to this link.

Set up filter options in Theme Editor

1. From your Shopify admin, go to Online Store -> Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Choose Collection from the dropdown window. After that, add block "Filter" at Product grid section.

4. Enter heading and list tags.

Add tags to your products

1. From your Shopify admin, go to Products -> All products.

2. Find and choose the product that you want to edit.

3. In the Organization sections, please add tags for the product (using a comma to separate different tags).

Required condition: The tag you add in Theme Editor and the tag you add to your products must be the same. Take note for lowercase and uppercase. If they are different, they will not show.

For example: If you would like to filter by color and price, your products have below options: Red color, White color, Blue color, Black color, Under $100, $100 - $200, Above $400. Then you need to fill in Theme Editor all these options.

You can use below instruction to set up product tags by Bulk Editor to edit easily for many products

Set up product tags by Bulk Editor

1. From your Shopify admin, go to Products -> All products.

2. Click More filters. After that, find and choose the collection that you want to edit.

3. Select number of products that you want to edit and click Edit products.

Custom style for Filter option

Halo offers 3 styles for Filter option: Checkbox, Swatch or Rectangle. If you would like to use Swatch or Rectangle style, please follow instructions below.

1. From your Shopify admin, go to Online Store -> Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Choose Collection from the dropdown window. After that, scroll to Filter at Product grid.

4. Enter Filter Option Name for Swatch style in Swatch Style For Filter textbox (or enter Filter Option Name for Rectangle style textbox).

The default theme uses Color Board from the w3schools website for the Color variant option. If the color name doesn't exist on the w3schools website, it will not display on your site.

With Color swatch filter option, if your products have custom color/special color, please choose Swatch Type as Advance Color (Use Image With PNG Format).

After that, please upload image with the same name as the variant color name (Go to Settings → Files -> Upload Files).

Naming convention: Lower cap and use a hyphen "-" to replace white space if your color image name has the white space. For example: your special color will have this name: "Holo Rainbow", you will upload the png image is holo-rainbow.png