App reviews, troubleshooting, and recommendations
Is there any way in the new Shopify "search & discover" app to show colours in groups?
Currently, the app pulls the variants from the option "Colour". However all of our variants are supplied by brands that all use different names for the colours, so some of our products will be:
- Matt White
- Gloss White
- High Gloss White
etc etc
This then shows on the colour filter which is quite unmanageable as we have 100s of different colours with all strange names. Think it would be a great feature if Shopify could add colour "groups" that you could put the relevant variants into ie:
Group - White
- Matt White
- Gloss White
- High Gloss White
Group - Grey
- Light Grey
- Dark Grey
- Anthracite
Solved! Go to the solution
This is an accepted solution.
Thanks @guest4 ! I appreciate the help.
I was actually able to figure out how to get swatches showing using all Shopify admin/theme customizer controls, no custom code. I created a variant metafield called "Color", and then enabled the theme to use the swatch display for the Color filter. I had been thinking this would only apply to the Product Color Option, but it applied to my metafield filter since the name "Color" matched up. It pulls hex values and any pattern images I want to use for swatches from the theme's swatch settings so I have full control of the display there. Clicking a color filter filters down to products with any variant that has that color family assigned, and shows the correct colored variant image in results. Pretty slick to see this working without any coding! It's great to be able to fully manage color families without an app now.
Search & discover , and other platform features typically only provide entry-level baseline functionality.
Currently if you need that higher level of filter control either the theme an advanced customization, or you should use a more dedicated service that specializes in filter|search with an app integration for shopify; like agolia ,klevu.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
You can use metafields on variant level and define the real color name. That way you can group them on frontend and then search by metafields value would solve the problem.
Yes that's exactly right, its the only way currently we have managed to make it work, the only issue with this, is you have to combine the "Product Metafield" and "Variant Metafield" and it then only displays as a basic text list:
White
Black
Blue
etc
Without any swatch/hex colours to show the customer, which is what they are expecting to see in the colour filter.
Hello,
You can use the Merge value feature in this app https://apps.shopify.com/ultimate-search-and-filter-1. You can easily merge multiple white colors like Matt White, Gloss White, etc. into White and show that white color in the filter. Please also see this topic https://docs.sobooster.com/search/product-filtering-guide/merge-filter-values
Yes, I know that some apps already have this feature. I was hoping the Shopify "search and discovery" app could adopt something similar, as it's the default app and works with most free/paid themes without having to then custom install and pay for a separate app.
If you're already using the metafields to "canonicalize" your filter options, then you're already half way there. The next step is customizing the template to use swatches instead of text links.
If you're using a compatible theme, then there is a template with code that is outputting the product filters. You'll need to modify that template to display the filters the way that you'd like.
If you change the input for the color swatches from the variant options to the metafield, then you'll achieve what you're trying to do. At that point you'll have full control of the layout for the filters.
All themes are different, but you may find the filter template in a file like product-filter.liquid. And within that template you may find some code like this:
{%- assign filter_label = filter.label | downcase -%}
{%- if filter_name == 'color' or filter_name == 'colour' -%}
{%- assign flag_color_filter = true -%}
{% endif %}
<ul class="facets__list list-unstyled {{ section.settings.filter_style }} m-0" >
{%- for value in filter.values -%}
<li class="list-menu__item facets__item">
<label for="Filter-{{ filter.label | escape }}-{{ forloop.index }}" class="facet-checkbox{% if value.count == 0 and value.active == false %} facet-checkbox--disabled{% endif %}{% if isColor %} facet-checkbox--color{% endif %}">
<input type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
id="Filter-{{ filter.label | escape }}-{{ forloop.index }}"
{% if value.active %}checked{% endif %}
{% if value.count == 0 and value.active == false %}disabled{% endif %}
>
{%- if flag_color_filter -%}
{%- assign color_name = value.label | downcase | replace: " ", "" -%}
{%- assign color_slug = value.label | downcase | strip | replace: " ", "-" -%}
{%- capture color_image -%}{{ color_slug }}.png{%- endcapture -%}
<span class="d-flex rounded-circle overflow-hidden position-relative color-box{% if section.settings.filter_style == "filter_list" %} me-2{% endif %}" style="background-color:{{ color_name }};">
<img class="img-fluid" alt="{{ tag | remove_first: groupTagTitle | remove_first: '_' | escape }}" src="{{ color_image | file_img_url:'master' }}" />
</span>
{%- endif -%}
...
In the above code, if you changed the logic in the first couple lines, then the rest may snap into place.
Hi! I'm wondering if you were able to figure this out on your theme? I gave it shot based on the direction by Guest4 below and more Googling research but so far no luck. I have filtering set up on a variant metafield "color" but no luck converting the text values to a hex color. Curious if you were able to get it working. Thanks!
One way to convert the color names to hex color values involves two steps.
1.) Defining an array of color data
2.) Using the color name to find the color value.
This process would start at some point in the template before the filters. At that point, you would define the array of color data.
At a later point in the template, once you have the color name, you would use the color name to look up the hex color value in the array of color data.
---
Defining the color data as a string and converting it to an array:
{% assign colors_data = "red:#FF0000,white:#FFFFFF,blue:#0000FF" | split: "," %}
Getting the color name (Reference: Code snippet above in the 2023-01-11 post):
{%- assign color_name = value.label | downcase | replace: " ", "" -%}
Find the hex color value in the array of color data:
{% for color_data in colors_data %}
{% assign _color_data = color_data | split: ":" %}
{% if color_name == _color_data[0] %}
{% assign color_hex = _color_data[1] %}
{% endif %}
{% endfor %}
Using the hex color value (Reference: Code snippet above in the 2023-01-11 post):
style="background-color: {{ color_hex }};"
---
This post referenced the following URL: https://gist.github.com/glaubermagal/397ec4c209068637563f14d3b9edde78
This is an accepted solution.
Thanks @guest4 ! I appreciate the help.
I was actually able to figure out how to get swatches showing using all Shopify admin/theme customizer controls, no custom code. I created a variant metafield called "Color", and then enabled the theme to use the swatch display for the Color filter. I had been thinking this would only apply to the Product Color Option, but it applied to my metafield filter since the name "Color" matched up. It pulls hex values and any pattern images I want to use for swatches from the theme's swatch settings so I have full control of the display there. Clicking a color filter filters down to products with any variant that has that color family assigned, and shows the correct colored variant image in results. Pretty slick to see this working without any coding! It's great to be able to fully manage color families without an app now.
Nice work!
Nice work, yes we managed it the same way, "Variant" metafields was the key, was a bit confusing at first, to put variant metafields on products with no variants, but now our colour filter is working the same as yours which is great!
I'm also using an app called "Metafields Guru" which has an excel like editor, which helps if you have lots of products, to make sure they all have a metafield value, and to check there are no anomalies.
I know it's been a while but I have the same challenge.
I need to group a couple dozen variant colors under a color group called "Mint". These is no standard swatch for "Mint". Based on what you said, I created a metafield called "Color" and added a mint hex code to that metafield in an applicable product. I also changed the Swatch Option to "Metafields".
"Mint" still shows up as a white dot instead of the hex code I added to the metafield.
Do I need to assign the Color metafield with the Mint hex code to every product with a color that has Mint in it? Any insights would be a huge help. Thanks.
Supporting this Merge Value feature requires an insane amount of work and resources.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025