<div class="swatches-wrapper"> {% assign colors = "Navy, Grey, Pink" %} {% for option in product.options_with_values %} {% for variant in product.variants %} {% assign name = variant.title %} {% assign stringSplit = name | remove: ' ' | split: '-' %} {% for stringPart in stringSplit %} {% if forloop.index == 1 %} {% if colors contains stringPart %} <div class="swatch-option {{stringPart}}" data-color="{{ variant.title }}" data-id="{{variant.id}}"> <span class="tooltip">{{ variant.title }}</span> </div> {%else%} --2-- {%endif%} {%endif%} {% endfor %} {% endfor %} {% endfor %} </div> <script> $('.swatch-option').click(function(){ $('.swatch-option').removeClass('active') $(this).addClass('active'); }); </script>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter