Color swatches on collection page Venture theme

Solved
MVUILL
Excursionist
27 0 8

Hi there! 

I found a tutorial to add the color swatch variant on the collection page (Venture Theme). 

I added the code below to product-card.liquid snippet. The colors name are ok but the color picture is not displayed (printscreen and website link below the code). Is there anything I did wrong on the code ? 

 

{% for option in product.options %}
{% if option == 'Color' %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% assign colorweb = 'https://cdn.shopify.com/s/files/1/0510/8636/0743/files/' %}
{% for variant in product.variants %}
{% capture color %}
{{ variant.options[index] }}
{% endcapture %}
{% unless colorlist contains color %}
<img src="https://cdn.shopify.com/s/files/1/0510/8636/0743/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 %}

 

 

https://www.french-address.com/collections/amour-amour

MVUILL_0-1618409707292.png

 

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 display the color swatches.  There is a 7-day free trial so you can test it without any charges.

0 Likes
BRADIENT
Tourist
4 1 2

This is an accepted solution.

remove , '_'

...replace_first: ' ', '_' | remove: ' ' | append: '.gif'...