When getting started with creating collection filters, it is best to be aware of the following.
Product Tags mirror what’s added to the Collection Filters. Product Variants display the Variants on the Product Page and under the Product in the Collections Page.
If you wish to display the variants within the filter as well as on the page, you will need to add the Variant and the Tag.
Adding a Filter Variant
Step 1. Login to the product you wish to add a variant to by going to Products on the left hand menu of your dashboard.
Step 2. Once within a product you will see an input box on the right hand menu under [Tags], you can click the within the input box to enter your variant. For the example below we are entering the a Color with the name sky blue.
Note: All tags are case sensitive, if you wish to use the custom color filters we highly suggest you keep all tags and variants to lowercase. If the variant is a double barreled name (ex. sky-blue) you will need to add the ‘-’ hyphen to the Tag and Variant. This way everything is also consistent.
Step 3. The tag will highlight and give you the option to add to the tags, click the tick box within the dropdown from the input box and your tag will be added.
Step 4. For this step you will need to go to your theme customisation tool, to do this go back to the dashboard and go to Online Store > Themes > Select Customise under the chosen theme.
Step 5. From within the Theme Customisor you can go to the collection page by either clicking a pre-made link in the navigation or selecting Collections from the drop down at the top and following the journey through to a Collection page.
Step 6. From here you will need to select [Theme Settings] from the bottom left link and in the newly populated area you will need to go down to and open [Collection Filters].
From here you may see some populated areas or they may be blank. These are the Filters related to the Tags of products. So for every element added here, there will be a tag added for it within the product [Refer to Step 2.].
Note: Here you will see Custom Colors to add your own color followed by the Tag boxes with titles. The first box is related to colors only as titled ‘Filter Color List Tags’.
Within a Tag box, first enter your tag title (ie. Filter List #Two Title) followed by your list of tags in the following box (ie. Filter List #Two Tags). For each tag added here, you will need to have those tags within the product page under tags [Refer to Step 2.] and vise versa, if a tag exists in a product, for example under Color, you will need to add that tag to the list of Colors here within the Collection Filters.
That’s it, your newly created Tags with Tag Title will show up within the Filters List on the collection page for visitors to search by filter.
Adding a Variant
For every product there is a possibility it will have a variant, you can add variants to products and it’s simple.
Simply go to Products within the dashboard and select a product to add variants to. If a product starts out without any variants, you scroll down to add a variant where you will see options to add variants by Size, Color or add your own.
Simply add a variant title, followed by your variant names, click Done and Save the product.
Note: All tags are case sensitive, if you wish to use the custom color filters we highly suggest you keep all tags and variants to lowercase. If the variant is a double barreled name (ex. sky-blue) you will need to add the ‘-’ hyphen to the Tag and Variant. This way everything is also consistent.
If you choose to have custom colors you will need to keep the variant name lowercase and consistent with the tag name [Refer to Step 2 of Adding a Filter Variant].
Adding Custom Colors
You have the option to add up to 5 custom colors easily through the Theme Customisor. If you refer back to Adding a Filter Variant you will have seen the area for adding your own colors, but please note both Tag and Variant are case sensitive and will need the name of the Color to be consistent with this.
If you go back to the filters area [Refer to Step 5 of Adding a Filter Variant], you will see up to 5 boxes with color selectors above the Color Filters for adding your own custom colors.
Simply title the name of the color as the title you added the product tag [Refer to Step 2 of Adding a Filter Variant] and add you chosen color by selection the circle box below and either choosing a color or inputting your own color HEX code.
That’s it, your custom color will show within your filters and if displayed, the colors under the products on the collection page.
Note: If you find the color isn’t showing, please refer back to a product with the color and check that the tag name mirrors the name within the Tags and Color Name, it is also worth checking the same Color in the variants to be consistent with naming.