Adding color swatches in Venture theme

Ariyeh_Even_Hai
Shopify Partner
15 0 1

Hey!

Im considering using Shopifie's Venture theme... color swatches are a must for us and so after

reading the toturial here im seeing this solution wont work on venture theme.

Can anybody please point me in the right direction on how to do that on Venture.

(Im also intrested in displaying the swatches on collection pages, any info on that will be awesome.)

 

Thanks a ton!

0 Likes
SmartCookie
Shopify Expert
82 2 2

Hi Ariyeh,

You could use this app to add it in: https://apps.shopify.com/swatchify

Hope that helps

Michael

Smart Cookie Design - Shopify Partners & Experts
0 Likes
Ariyeh_Even_Hai
Shopify Partner
15 0 1

Can it display the swatches at the collection pages? I didn't see anything about it in the app description or their website. There is also no description of the differences between the plans... Thanks!

0 Likes
SmartCookie
Shopify Expert
82 2 2

Hi, You would need to contact the app developers for that level of info :)

Thanks

Michael

Smart Cookie Design - Shopify Partners & Experts
0 Likes
JDev
Shopify Partner
2 0 0

Hi Ariyeh, did you ever get swatches to show on Venture? I want to do the same for both color and size. Thanks.

0 Likes
Benjamin_Lung
New Member
2 0 2

I'm setting up the Venture theme now and figured this out.  Make sure you create 60px x 60 px color GIFs and name them for each color.

----------------------------------------------------------------------------------

1.  After the following code on the PRODUCT-CARD.LIQUID snippet

{% if settings.product_vendor_enable %}
      <div class="product-card__brand">{{ product.vendor }}</div>
    {% endif %}

------------------------------------------------------------------------------------------

2.  INSERT this 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 %}

Christopher_Wic
New Member
1 0 1

@benjaminlung,

Where are you hosting your color GIF's? In the asset section or the library? Ive tried to paste links to the both places without any success. 

Any help would be appreciated!

Yaaayu
Tourist
4 0 2

Code works great .....  below is screenshot after i injected the above code into .liquid file... the outcome of my website (venture theme)

ss.jpg

You the man Benjamin 

JFu
New Member
1 0 0

Thank you both for this tutorial! @Yaaayu @Benjamin_Lung 

I added the codes, changed the links to how it appears on Shopify file upload without the file name. But it doesn't seem to be able to connect the swatches to the swatch gifs? Any help would be appreciated!


JFu_4-1605569682299.png

 

 

JFu_3-1605569574972.png

JFu_2-1605569483291.png

 

 

0 Likes
Yaaayu
Tourist
4 0 2

Ok .. share your website url.. will help out

 

0 Likes