Add a custom SVG as a filter icon
What are Filter Icons?
Filters icons are blocks that can be added to Collection Items (in collection pages), and Search (in search page). For every single block, you can define a custom icon for a product option.
For example — If you have filers for Color and Size, in a collection page, you can add two Filter icons blocks to the Collection items section and define icons that appear next to each filter name.
Add filter icons
- In Theme Editor, navigate to the Collection, or search page.
- Select the collection items on the theme editor's left-side panel (Or Search if you are on the search page), and create a new Filter Icon block.
-
Repeat step 2 for every new filter icon, enter each option name in a separate block and select its relevant icon, or paste an SVG code for it.
- Select the newly added Filter Icon block, and on the right side of the Theme Editor, where block settings appear, type the name of the option you want to target, e.x. Price. Then select the relevant icon from the icons dropdown.
Add a custom SVG as a filter icon
Paste your SVG code in the Filter Icon block settings in the Custom SVG input field.
Make sure your SVG code starts with <svg> and and with </svg>.
Do not add any extra characters or symbol outside of the SVG tags (<svg>...</svg>), or it may cause the design to break.
