Product pages - Add color swatches to products

Tourist
4 0 0

I use the Minimal theme and everything worked, just wanted to point a few things out with regards to the following steps:

Create a new Liquid snippet called swatch.liquid

This was fine.

Include swatch.liquid in product.liquid

Since the contents in product.liquid have been sectioned into product-template.liquid (under Sections), the swatch code was instead inserted right after the following code in product-template.liquid (found at around line 200).

Click to expand...

{% form 'product', product, class:productform_class %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
{% for variant in product.variants %}
{% if variant.available %}

<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>

{% endif %}
{% endfor %}
</select>

Locate your selectCallback function

The selectCallback function is located in theme.js under Assets.

Add code at the bottom of theme.liquid

This was fine.

Upload a soldout.png graphic to your theme assets

This was also fine.

Add CSS to your stylesheet

The CSS only works if added at the end of theme.scss.liquid under Assets.

And then the rest seems to work fine.

Hope it helps:)

0 Likes
New Member
5 0 0

Hi @vietbq1989

Thanks for your help. I'll check that out then reply directly to your post to let you know.

0 Likes
Excursionist
22 1 5

@CrispinL 

I followed the same steps as you did, but somehow my swatch background are not set.

PureTime_0-1606128240707.png

The option is called 'Viserfarve' - and the pictures uploaded to assets are called sort.jpg, krom.jpg and guld.jpg (and I changed to jpg in line 5 in swatch.liquid.

Anyone with a clue on why it does not show the correct backgrounds on the swatches?

EDIT: Or will this ONLY work with background colors, if the option is named Color or Size (and not Viserfarve)?

As my page is in Danish I will never use the word Color (Farve in Danish), so if this is the case, I assume I can't use this out of the box, right?

EDIT 2: I found the solution. For others:

In the swatch.liquid - you can change the option name it matches around line 30:

{% if downcased_option contains 'color' or downcased_option contains 'viserfarve' %}

 

Excursionist
22 1 5

EDIT:

Nevermind again - error 40

Another question:

One of my colors has a name with a special Danish character in it (ø).

However, it doesn't seem to work - whether I name the file soelv.png solv.png or sølv.npg.

Any ideas @TyW or @CrispinL ?

 

0 Likes

@PureTime 

Try "s-lv.png" because the instructions say you need to "handleize" the name. It looks like Liquid's handle filter converts the "non-A-to-Z" character to dash when looking for the file.

One trick to find out is to open the "Add new product" page, as if you're creating a product (you're not actually going to, so don't Save the product). Put your color name in as the Product Title, then go to the very bottom and click on "Edit website SEO". Check the "URL and handle" box at the end, and just copy that handle. For example, if you pasted "Sølv" as Title, the handle generated is "s-lv".

You can also inspect the HTML code of your product page, and look for ".png" to see how your color's name is getting handleized by the Liquid handle filter. Then just copy that name and use it as your filename.

If my reply helped you, please give it a Like and mark it as Accepted Solution.
Do you want me to fix your theme code? Visit https://www.fiverr.com/s2/a9cef5059a
Need a website tester? Visit https://www.fiverr.com/s2/e4370711eb
0 Likes
New Member
2 0 0

Is it possible to change the code so that it looks for the products title and the variants color in the swatch file's name?  Reason being:  we have multiple products that have the same color name, but are not the same color.  We've done the color 'black' many, many times.  For example:  Product title: Lyssa Top.  Color: Black.  lyssa-top-black.png or black-lyssa-top.png.  Product title: Lisa Dress.  Color Black.  lisa-dress-black.png or black-lisa-dress.png.  Is this possible?

0 Likes

@blakeblake  -- in your "swatch.liquid" snippet, find and change this part of the code (note: this is only a small part of a longer line):

 

background-image: url({{ value | handle

 

to:

 

background-image: url({{ product.handle | append: '-' | append: value | handle
(OR)
background-image: url({{ product.title | append: '-' | append: value | handle

 

(First one uses product's SEO handle, while the second uses the Product's actual title. Normally both are same, but you can edit the product and make them different. The handle can be edited by clicking "Edit website SEO" at the bottom of the product edit page. Use the variation that makes more sense to you. To put the color name in the front - helps you organize your files better, maybe - just swap around the position of "value" and "product.handle/title".)

Save it, then open a product page. You'll see the swatches without any image. Use Inspector or View Page Source to look for "background-image:" on all the swatches to find out the actual file name generated. Follow the file name in creating your color files. Enjoy!

If my reply helped you, please give it a Like and mark it as Accepted Solution.
Do you want me to fix your theme code? Visit https://www.fiverr.com/s2/a9cef5059a
Need a website tester? Visit https://www.fiverr.com/s2/e4370711eb
New Member
2 0 0

@Arundas

Thank you!! Worked perfectly.

0 Likes
Tourist
8 0 7

If someone could send me the right way - This thread almost hits the spot

I have a catalogue that is separated by color then its variants are length and weight.

I would swatch the colors, so on relative pages it will link to other colors of the same product.

Any help would be appreciate it.

0 Likes
Shopify Expert
96 4 8

@TyW  this solution working on the Debut theme ?

0 Likes