A very easy coding question (BEGINNER)

manuellz54
Tourist
5 0 1

Hi, I was looking for implementing color swatches to my shop. I found this code but I have a question.

Where it says "link to your files" how do I add more than one image? (I've tried with commas, hosting files..) It partially works but it only appears the first link image, the following ones don't.
Thanks.

This is the code:

{% for option in product.options %}
        {% if option == 'Color' %}
            {% assign index = forloop.index0 %}
            {% assign colorlist = '' %}
            {% assign color = '' %}
            {% assign colorweb = '         link to your files         ' %}
            {% for variant in product.variants %}
                {% capture color %}
                    {{ variant.options[index] }}
                {% endcapture %}
                {% unless colorlist contains color %}
                    <img src="link-to-your-files{{ color | downcase | strip_newlines | strip_html | replace_first: ' ', '_' | remove: ' ' | append: '.gif' }}" width="16" height="16" border="0" alt="{{color}}" style="border: 1px solid black;" />
                    {% capture tempList %}
                        {{colorlist | append: color | append: ' '}}
                    {% endcapture %}
                    {% assign colorlist = tempList %}
                {% endunless %}
            {% endfor %}
        {% endif %}
    {% endfor %}



And this is an example of how the problem looks like (there should be different colours, not only white)

https://ibb.co/JBCYH5d

0 Likes
GravitySApps
New Member
10 0 0

Hi, you can use the app that will give you a quick solution without any coding. Here is our app that adds swatches to homepage, search results, product and collection pages: https://apps.shopify.com/display-variant-swatches

Once installed and enabled, it should automatically show the color swatches.  There is a 7-day free trial so you can test it without any charges.

0 Likes