How do I add a small image (icon) before each list item, in my custom metafield filter?
The list items here, are pointing to three different collections.
The theme I’m using is Sense.
See the image below.
Topic summary
Adding small icons before each filter list item in a Shopify Sense theme, specifically for metafield-based collection filters.
Initial guidance: Edit the theme’s Liquid, targeting facets.liquid. Insert icon markup near the rendered label (value.label | escape) to display icons alongside filter values.
Issue encountered: A single image appeared on all items across different filters (e.g., Benefit and Availability). A suggestion was to branch by filter.label to separate logic per filter group.
Refinement: The need was unique icons per individual filter value (e.g., More Energy, Improved Sleep, Immunity Health). The solution uses Liquid conditionals on value.value to output a distinct icon for each option.
Technical notes: Liquid is Shopify’s templating language; facets.liquid handles filter UI; metafields are custom data used to define filter values.
Artifacts central to implementation: screenshots indicating exact placement and code snippets demonstrating conditional checks.
Outcome: Resolved. The poster implemented value.value-based conditions to assign unique icons per filter item. No remaining open questions.
Hello @nxthxnxo
need to edit some liquid files on sense theme to achieve this one get done with add small icons on the filter.
Hi @nxthxnxo ,
Please go to facets.liquid file, find ‘value.label | escape’ and add code here:
Hope it helps!
1 Like
Hi thanks for answering, I’m struggling to code it so that I can add a unique image for each filter item?
Hi @nxthxnxo ,
Will each filter show a separate image? Same as Benefit other than Availability?
Yes so when I add the code for one image,
It will show on every filter list item within ‘Benefit’ and it will also show in ‘Availability’.
Hi @nxthxnxo ,
Please add code here:
Code:
{%- if filter.label == 'Availability' -%}
{%- elsif filter.label == 'Benefit' -%}
{%- endif -%}
Hope it helps!
1 Like
I think I need the code adjusted so I can put unique icons for each element inside the filter, i.e.
More Energy
Improved Sleep
Immunity Health
Hi, I’ve managed to figure it out! Many thanks for the help.
{%- if value.value == 'More Energy' -%}
{%- elsif value.value == 'Improved Sleep' -%}
{%- elsif value.value == 'Immunity Health' -%}
{%- else -%}
{%- endif -%}
1 Like