How to Setup Metafields for the Filter
We're glad to introduce you a new function for the filter on Chromium 4.0 - Filter by Collections & Metafields. This one uses metafields to generate values instead of tags that we're used to do for the filter before. This article will guide you step-by-step on how to add values to the metafields for the Filters.
NOTE: Before jumping to setup the Filter by metafields, remember to create JSON file and upload it into the Files section in the admin. In case you still don't know how to create the JSON, you can take this document to make one.
After having JSON and apply it on the theme, now let's get started to create metafields for the Filter.
We all know that we have 3 dropdowns in the Filter, each one is corresponding with each metafields that we're going to create. For this function, we just need to create 2 metafields for 2 dropdowns. It may make you confused, we will jump up on this to clarify right now.
Go to the theme editor of the store, click on the Theme Settings (placed at the bottom of the sidebar settings). At the FILTER SECTION, you can see the settings for this new function.
- Select as collection value: you can choose which dropdown include the collections. In this example, I set it in the filter lv1
- Filter by: choose the Collection & Metafields option
- Filter lv1 attribute: since I chose collections for filter lv1, this field will be typed in the box "collections"
- Filter lv2, lv3 attribute: will be corresponding with each metafields created after
This is a brief introduction for the new function, then we'll get into the step-by-step guide on how to create metafields for the filter
1. Create metafields
First, you login to your Shopify admin > go to Settings placed at the bottom left corner of the screen
At the sidebar, scroll down to see the Metafields sector. Click on it and choose a part of the store to add new field.
On the top right corner, clicking on the Add definition button to have a new one
Then, you can insert any text on the name field. At the bottom, click to Select the content type. Choosing a type of content for the definition, the common type is Single Line Text. Under the content type, there're two options for you to choose: One value and List of values (you can choose the appropriate one for the definition)
You need to create 2 definitions for both metafields lv2 and lv3
2. Add Filters
After creating the definitions for metafields, we go to add the filters for these
- Go to Online Store > Open Navigation
- Scroll down to see the Collection and Search filters > Click on Add filters and a popup will be shown > Tick on the metafields
- Make sure the metafields shown on the filter list
3. Insert values into the metafields
Because you've just created a definition for product, it has no values yet. To add values into the metafields, you go to the product you want to add and insert the values
Go to the product section on the Shopify admin, choose the product you want to add metafields values. Scrolling down til the bottom of the page and you can see the Metafields section.
>> NOTE: this is the same as adding tags, you add all the values you want so that when customers filter, the products including those values will be shown on the filter result.
For instance, I've just created the Test lv2 and Test lv3 definitions (metafields) so I add the values the same with the values on the dropdown of lv2 and lv3 into the metafields Test lv2 and Test lv3 respectively (you don't need to add all of the values, just the values you want the product to be included)
I add the values CBR-500; CBR-500RR; CBR-1000RR; CB500X into the metafield lv2
and 2018 into the metafields lv3
4. Copy and paste the Namespace and Key into the field on the Theme editor
Go back to the definitions you created on the first step. Copy the Namespace and key of two metafields
and paste them on the filter lv2 and lv3 on the theme editor and click Save
5. See the result
After you complete all the steps above, the product you added the metafields to will be shown on the filter result.
I remind you this to make sure there's no mistake here
- Select as collection value: I set the collection value in the filter lv1. Therefore, in the Filter lv1 attribute, I type the "collections" into it (If I choose lv2 or lv3, I will type the "collections" into the Filter lv2 attribute or lv3 attribute)
- Filter by: please choose the option - Collection and Metafields
- Filter lv1 attribute: collections
- Filter lv2 attribute: paste the namespace and key of metafields lv2 (Test lv2)
- Filter lv3 attribute: paste the namespace and key of metafields lv3 (Test lv3)
Okay let's see the result