Display color swatches on collection page filter in Dawn theme

[kk1212]

Hi, does anyone know how to add color swatches in filter option on collection page for Dawn theme. Not variants, need the swatches on filter (search and discovery app of shopify 2.0)

[kk1212 · Accepted solution]

I was able to figure it out. Add color as a metafield and update values in products. Then add this metafield in filter of  "search and filter" . 

Go to edit code>facets.liquid. Search for svg <rect> tag. inside rect tag, in Fill option replace "none" with below code.

" {% if filter.label == 'Color' %} {{ value.label }}{% else %}none{% endif %}"

You will have to replace it at all the places in facets.liquid to make it work in all filters.

It will work for mostly all the generic colors. 

[okur90]

The built-in search and discovery app for Shopify 2.0 with the Dawn theme does not support colour swatches in the filter options on the collection page. However, you can achieve this functionality using a third-party app from the Shopify App Store.

[kk1212]

Am sure there must be a workaround for making the current search and discovery app show swatches. Possibly through code changes.

I really don't want to spend on buying a new theme or paying a third party app at this stage for such a small feature. If anyone is aware of the same, do let me know.

Thanks in advance.

[SearchaniseTeam]

Hi @Kk1212

It’s Stacy from Searchanise Team, the app that provides professional search and filter capabilities for Shopify stores.

If you're looking to display color swatches in the Dawn theme, one solution is to install the Smart Search Bar & Filters app. The app allows you to easily add color swatches, making it easier for your customers to find the products they're looking for.

In addition to color swatches, the app has a range of other useful features that can help you better serve your customers and grow your business. It provides promotion tools such as merchandising, labels, and quick buttons (such as "Add to cart").

Another useful feature is real-time analytics to help you track customer behavior and identify popular search terms and filters. This information can help you optimize your store's search functionality to improve the overall shopping experience for your customers.

If you would like to find out more about these and other features that our app has to offer for your store, check out the listing.

[mok]

Helo Searchanize, I am interested to know if Searchanize has a color filter that has actual color swatches (rather than text) that can be customized to show the actual colors of the actual products (not a generic list with your colors). I would want this to be able to be customized by me so I can adjust the product colors and filter menu according to seasons product color changes. I am not referring to color selectors on product pages, I am asking about a filter search bar on the side. Note: The colors are not integrated into product data from suppliers. It was not apparent in Searchanise information and I only heard mention of a color filter with your "stock" color choices. I look forward to hearing from you. The image is what I am looking for

[SearchaniseTeam]

Hi Mok,

I'm sorry for the delayed answer. If I get it correct, you want to display actual product colors in swatches, don't you? There is such a feature in Searchanise that allows you to download images for swatches displaying patterns (dotted, striped, snakeskin) or complex shades of color (gold, silver, chrome) and so on.

Check out the screenshot below, the "snake skin" is displayed as a color swatch under the products and in filters on the left. 

 

Here are the help instructions on how to set it up: https://docs.searchanise.io/set-up-color-families-shopify/ 

I hope it helps.

Best,

Stacy

[kk1212 · Accepted solution]

I was able to figure it out. Add color as a metafield and update values in products. Then add this metafield in filter of  "search and filter" . 

Go to edit code>facets.liquid. Search for svg <rect> tag. inside rect tag, in Fill option replace "none" with below code.

" {% if filter.label == 'Color' %} {{ value.label }}{% else %}none{% endif %}"

You will have to replace it at all the places in facets.liquid to make it work in all filters.

It will work for mostly all the generic colors. 

[mok]

I tried this, but just the check boxes changed color - and when they are checked, they look weird. I actually want a larger swatch of color, which would need more code to make the shape and then fill it with color.

[Carina13]

 

Dear Kk1212,

I tried your solution and particularly it works 🙂 But the colors are wrong - only "orange" is correct. The other colours not. Can you tell me where I can find the settings of these colours and/or how to change it? Maybe the problem is the german language of my colors? Only "orange" is the same name in english and german. So I think I need to map something between the english color names and the german. 

Enclosed a picture how it looks at the moment. 
It would be great if you have an idea!!! 

Thank you!

Karin

[kk1212]

Hi @Carina13 

Sorry for late reply. Yes it takes English names of the color only. There is another way where you have to upload swatch images of your color and you can call it as an image. In my store, I need to show body types png in filters. Body shape is the filter name which I have kept and changed the facet code .  copying one fieldset code which have color code and body type image below. Hope this will help.

<fieldset class="facets-wrap parent-wrap {% if filter_type == 'vertical' %} facets-wrap-vertical{% endif %}">
<legend class="visually-hidden">{{ filter.label | escape }}</legend>
<ul
class="{% if filter_type != 'vertical' %} facets__list{% endif %} list-unstyled no-js-hidden"
role="list"
>
{% if filter.label != 'Body Shape' %}
{%- for value in filter.values -%}
<li class="list-menu__item facets__item{% if forloop.index > 10 and filter_type == 'vertical' %} show-more-item hidden{% endif %}">
<label
for="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}"
class="facet-checkbox{% if value.count == 0 and value.active == false %} facet-checkbox--disabled{% endif %}"
>
<input
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
id="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}"
{% if value.active %}
checked
{% endif %}
{% if value.count == 0 and value.active == false %}
disabled
{% endif %}
>

<svg
width="2.6rem"
height="2.6rem"
viewBox="0 0 26 26"
aria-hidden="true"
focusable="false"
>
<rect width="16" height="16" stroke="currentColor" fill=" {% if filter.label == 'Color' %} {{ value.label }}{% else %}none{% endif %}" stroke-width="1"></rect>
</svg>

<svg
aria-hidden="true"
class="icon icon-checkmark"
width="1.1rem"
height="0.7rem"
viewBox="0 0 11 7"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M1.5 3.5L2.83333 4.75L4.16667 6L9.5 1"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>

<span aria-hidden="true">{{ value.label | escape }} ({{ value.count }})</span>
<span class="visually-hidden">
{{- value.label | escape }} (
{%- if value.count == 1 -%}
{{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
{%- else -%}
{{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
{%- endif -%}
)</span
>
</label>
</li>
{%- endfor -%}
{% else %}
{% assign counter = 1 %}
{%- for value in filter.values -%}
{% capture body_type %}{{ value.label }}.png{% endcapture %}
<li class="list-menu__item facets__item{% if forloop.index > 10 and filter_type == 'vertical' %} show-more-item hidden{% endif %}">
<label
for="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}"
class="facet-checkbox{% if value.count == 0 and value.active == false %} facet-checkbox--disabled{% endif %}"
>
<input
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
id="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}"
{% if value.active %}
checked
{% endif %}
{% if value.count == 0 and value.active == false %}
disabled
{% endif %}
>

<svg
width="5.4rem"
height="7.2rem"
viewBox="0 0 72 54"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs>
<filter id={{ counter }}>

<feImage xlink:href="{{ body_type | asset_img_url }}" />
</filter>
</defs>
<rect width="54" height="72" stroke="currentColor" fill="none" stroke-width="1" style="filter:url(#{{ counter }});"></rect>
</svg>

<svg
aria-hidden="true"
class="icon icon-checkmark"
width="1.1rem"
height="0.7rem"
viewBox="0 0 11 7"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M1.5 3.5L2.83333 4.75L4.16667 6L9.5 1"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>

<span aria-hidden="true">{{ value.label | escape }} ({{ value.count }})</span>
<span class="visually-hidden">
{{- value.label | escape }} (
{%- if value.count == 1 -%}
{{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
{%- else -%}
{{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
{%- endif -%}
)</span
>
</label>
</li>
{% assign counter = counter | plus: 1 %}
{%- endfor -%}
{% endif %}
</ul>
{% comment %} No show more for no JS {% endcomment %}
<ul
class="{% if filter_type != 'vertical' %} facets__list{% endif %} no-js-list list-unstyled no-js"
role="list"
>
{%- for value in filter.values -%}
<li class="list-menu__item facets__item">
<label
for="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}-no-js"
class="facet-checkbox{% if value.count == 0 and value.active == false %} facet-checkbox--disabled{% endif %}"
>
<input
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value }}"
id="Filter-{{ filter.param_name | escape }}-{{ forloop.index }}-no-js"
{% if value.active %}
checked
{% endif %}
{% if value.count == 0 and value.active == false %}
disabled
{% endif %}
>

<svg
width="2.6rem"
height="2.6rem"
viewBox="0 0 26 26"
aria-hidden="true"
focusable="false"
>
<rect width="16" height="16" stroke="currentColor" fill="{% if filter.label == 'Color' %} {{ value.label }}{% else %}none{% endif %}" stroke-width="1"></rect>
</svg>

<svg
aria-hidden="true"
class="icon icon-checkmark"
width="1.1rem"
height="0.7rem"
viewBox="0 0 11 7"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M1.5 3.5L2.83333 4.75L4.16667 6L9.5 1"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>

<span aria-hidden="true">{{ value.label | escape }} ({{ value.count }})</span>
<span class="visually-hidden">
{{- value.label | escape }} (
{%- if value.count == 1 -%}
{{- 'products.facets.product_count_simple.one' | t: count: value.count -}}
{%- else -%}
{{- 'products.facets.product_count_simple.other' | t: count: value.count -}}
{%- endif -%}
)</span
>
</label>
</li>
{%- endfor -%}
</ul>
</fieldset>

[TimAU]

Hi I just tried this on Dawn 9.x and all of my swatches were coloured black instead of being empty or the correct color. I've followed all the instructions, checked them twice and not added the swatches to "files" but also to "assets" as some of the apps in the past have used the assets. Any ideas?

[kk1212]

Hi @TimAU 

Please check the code on Carina's reply. Hope that will solve your problem

[vera_p]

Hi! Thanks for the code!

I have the same issue but as my colors are not written in English, the color swatches appear in black.

(I am no expert in code so please excuse my simple questions :))

My metaobject states the "color" items as, for example, "display name" = Azul and "hexcode" = #hexcode

I have tried some changes to the metaobject "color":

• If I change the metaobject item display name to "blue", the color swatch appears as a very bright blue (I would assume that the code reads the blue color and provides a general tone for that)
• If I change the display name to the hexcode, the color swatch correctly assumes that color, but the name next to the select checkbox is the hexcode (when it should be "Azul", the metaobject display name)

Is there a way to change your code so that the checkbox delivered the hexcode of that metaobject and the display name would stay intact?

Thanks a lot!!!

[kk1212 · Accepted solution]

https://www.youtube.com/watch?app=desktop&v=AocEXVenuIM&t=737

follow the metaobject tutorial. No code solution for the same 

[vera_p]

Hi! Thanks a lot!

I had already seen this video but my Search & Discovery App does not let me do the final step of the "display" selection for the filters, in which you select the hex codes as displays (images below)

I have tried to see with Shopify but no solution was found (and I am using Dawn Theme 13)

Do you have a solution here? 🙏

  

[kk1212]

Can you share metaobject screenshot and search and filter>color screenshot as well.

YouTube video screenshot you are sharing is of search and filter section, while your store screenshot is of metafield. 

[vera_p]

Hi! Thanks for this! I did not see your reply until now 🙂

Please let me know if I'm doing anything wrong!! I do hope so 🙂

Thanks a lot!!

Screenshot for the Content > Metaobject:

 Screenshot from settings > Custom data > Metaobject "Cor":

Screenshot from S&D filter section (using product metafield "swatch cores" as below):

+ Screenshot from Product Metafield definition using the Metaobject (this is what defines the S&D filter, since I cannot add the metaobject directly as filter):

[ahsannsajjad]

The built-in search and discovery app for Shopify 2.0 with the Dawn theme does not support color swatches in the filter options on the collection page. However, you can achieve this by adding metafield.

Add color as a metafield and update values in products. If you want to show color swatch with color name your metafield text should look like this

• <span style="background-color: #000000; display: inline-block; width: 16px; height: 16px; margin-right: 6px;"></span>Black

Change background color according to your colors

This worked on my theme.

I hope this will be helpful.

[TimAU]

hi @ahsannsajjad what 'type' of metafield did you create, i tired single line text but literally got a line of code in text rather than swatch. thanks, Tim

[ahsannsajjad]

I have used single line text, with list of values option, If its showing code instead of swatches then you might need some changes in your code, I can help you with If you need.

[kk1212]

https://www.youtube.com/watch?app=desktop&v=AocEXVenuIM&t=737

Follow the tutorial, no code solution .

[MRamzan]

You can add color swatches on collection pages: