How to show color variant swatches on collection page? And map color name to image?

[Wahsh_Beast]

Hello everyone!

I have 2 questions if you will allow me.....

1) How can I add a color swatch for the variants available to a product on a category/collections page? (Just like the example in the image).

2) When opening up a product page, how can you map the variant names to the correct images? Eg: when selecting the 'green' option for a t-shirt, I want to see the image that represents that specific color.

Thanks.

[Dirk]

Hey, @Wahsh_Beast 

Below are my suggestions for your questions regarding variant color swatches and variant image mapping.

1. Some third-party themes have this feature built into them. If you are interested in buying a third-party theme, I'd be happy to suggest a couple that has the feature. Alternatively, you could add some custom code into the theme by hiring a Shopify Expert to do this for you. Otherwise, there is a great app that you can install that will accomplish this, called Collection Swatch Pug.

2. We actually offer a free step-by-step guide that you can follow, here, to set this up in your store.

Let me know if you have any questions!

[Scandica]

Hey, Dirk, of course we are interested in themes with built-in such a functionality! Could you please suggest some for Clothing and fashion industry.

[Aaliyan-Gul]

Prestage Shopify theme
Exp:  https://teddyfresh.com/ 

you can contact us on fiverr.com/ishopifyexpert 🙂

[MICHAEL_CARAVAG]

Hello Dirk. The question that was asked here was how to add color swatches to the Collection page; but the modifications to the theme.js file adds color swatches to the Products pages. Interestingly enough, I have found this same question asked a number of times in my search for an answer and each time the solution given does not seem to be correct.

I have the Debut Theme and am in the final stages of completing a new Shopify store for my client. Now they are asking me to implement Color Swatches on the Collections page and I am searching for a solution that does not involve a 3rd party app with a monthly cost. I'd be quite happy to purchase a plugin with a one-time cost, but these apps that are charged monthly are unacceptable to me.

Any thoughts as to the best solution?

[EdmondsLove]

I'm using the simple theme and I am also interested in the answer to this question. 

I'd buy a theme or pay a one time fee but don't want to buy a monthly subscription for this basic feature. 

In the collections view of multiple products I just want to show all the color variants.  Toggling the variant from the list view is nice to have but mostly just want to show that there are other color options.  

[MICHAEL_CARAVAG]

Edmonds,

I was able to get this done with a developer that I've worked with for a number of years. He's not one of the Shopify experts, but he's a savvy coder that managed to get it done for me within a day. I paid him $200, but I'm thinking he might do it for less now that he knows exactly how to implement it in the Debut theme. Email me at michael@mcsquaredprod.com if you're interested and I'll connect you directly with him.

You also may want to reach out to Mark at eBiz Trait. They are on the list of Shopify experts. They also did a complex customization for me and they did a great job. 

[minddesign]

Here is one way to do this but using rgb (or hex) values for colors. Change option1 to any other options used for colors.

<div class="swatches flex items-center justify-center mt-auto">
    {% assign colorNames = 'Red;Green;Blue' | split: ";" %}
    {% assign colorValues = 'rgb(255, 0, 0);rgb(0, 255, 0);rgb(0, 0, 255)' | split: ";" %}

    {% if product.variants.size > 1 %}
      {% assign uniqueColors = product.variants | map: "option1" | uniq %}
      {% for color in uniqueColors %}
        {% assign currentVariant = product.variants | where: "option1", color | first %}
        {% for colorName in colorNames %}
          {% if colorName == currentVariant.option1 %}
            {% assign colorIndex = forloop.index0 %}
          {% endif %}
        {% endfor %}
        <a class="inline-block w-8 h-8 mx-1 rounded-full"
           style="background-color: {{ colorValues[colorIndex] }}"
           href="{{ product.url }}?variant={{ currentVariant.id }}"
           data-image="{{ currentVariant.featured_image.src | img_url: '300x300', crop: 'center', scale: 2 }}"
           data-variant-id="{{ currentVariant.id }}">
          <span class="sr-only">{{ currentVariant.option1 }}</span>
        </a>
      {% endfor %}
    {% endif %}
  </div>

[ZaheedaT]

Where should this code go? 

[TommyKatt]

Where you want the color swatches to show, most likely in the product.liquid template. But it depends on the theme. 

[MRamzan]

Here is a quick video guide for adding color swatches on collection pages: