How can I group colors in the new search & discover app?

Shopify Apps
1

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

1 Like
2

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.

3

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.

1 Like
4

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.

5

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

6

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.

7

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 %}

{%- for value in filter.values -%}
	- 

In the above code, if you changed the logic in the first couple lines, then the rest may snap into place.

See also: [https://shopify.dev/themes/navigation-search/filtering/storefront-filtering/support-storefront-filtering#the-filter-display](https://shopify.dev/themes/navigation-search/filtering/storefront-filtering/support-storefront-filtering#the-filter-display)
8

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!

9

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

10

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.

3 Likes
11

Nice work!

12

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.

2 Likes
13

Supporting this Merge Value feature requires an insane amount of work and resources.

14

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.