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)

[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

[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.