Collection Filters

Collection Filters is a part of a Main collection section.

You can create filters for your online store that let customers refine which products appear on collection pages and in search results. For example, if you sell watches, you could create filters for brand name, price, dial size, and water resistance.

Filter types

You can select up to 5 default filters and up to 20 custom filters for your store.

Default filters

Filters for product availability, price, vendor, product type, and tags, are included by default.

Custom filters

Custom filters can be created using your product variant options, or with Metafields ↗ (opens in a new tab). For example, if you sell clothing with different variants for size, then you can add a filter for size.

Learn more about adding custom filters with Metafields ↗ (opens in a new tab).

Edit filters

You can edit the filters used in your online store from the app.

1. In the Shopify Search & Discovery ↗ (opens in a new tab) app, go to the Filters and then click Edit filters.
2. Select the filters that you want to make available to your customers.
3. Optional: Click and drag your filters to reorder them.
4. Click Save.

You can read more common information about filters in official documentaiton ↗ (opens in a new tab).

Color filters

The filter of colors is displayed by default with checkboxes. But it is much clearer to have this list with pictures of colors. In order for this you need to upload a picture for each color.

Prepare pics for upload to store Content / Files

To upload any pic you just need to name the picture correctly. The name of the picture is the key to recognize that the picture contains a color.

The picture name pattern is as follows: color-value-of-the-option.png where value-of-the-option is the only variable part of the pattern.

Let's say you have the following set of colors:

So you have to upload the following pictures (lower case name, 100 x 100 px size):

1. pill-pic-color-gray.png
2. pill-pic-color-khaki.png
3. pill-pic-color-pink.png
4. pill-pic-color-violet.png
5. pill-pic-color-green.png
6. pill-pic-color-orange.png
7. pill-pic-color-red.png
8. pill-pic-color-yellow.png

Upload

1. From your Shopify admin, go to Content > Files.
2. Click Upload files.
3. Select files to upload (up to 20 at one time), and then click Open.

Once you have uploaded all the pictures with matching names, you need to enable the colored pics option in the admin. For this do next steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the Lumia theme that you want to edit, and then click Customize.
3. Click Theme settings.
4. Click Collection Page.
5. In the Color pics group check Replaces list filter style with pics checkbox.
6. Click Save.

Layout

Inner

Hidden default

Enabled by default: Yes

Visible

Enabled by default: No

Steps to enable first look

1. From your Shopify admin, go to Online Store > Themes.
2. Find the Lumia theme that you want to edit, and then click Customize.
3. Click Theme settings.
4. Click Collection page.
5. Select Inner in the Filter layout field.
6. Check / Uncheck Closed filter by default checkbox.
7. Click Save.

Outer fixed

Enabled by default: No

Steps to enable

1. From your Shopify admin, go to Online Store > Themes.
2. Find the Lumia theme that you want to edit, and then click Customize.
3. Click Theme settings.
4. Click Collection page.
5. Select Outer in the Filter layout field.
6. Click Save.