I used a guide (https://help.groupthought.com/article/660-collections-add-product-sizes-to-collection-pages) to get size swatches showing on the collection page and adjusted a few things to fit my theme (Impulse). I have finally adjusted the style code so the size swatches appear in the correct color, BUT the sizes disappear after a second of being on the screen. It seems like they disappear as my product images are appearing. Anyone else having this issue or know of any suggestions to help?
Code I inserted into the product.grid.item.liquid:
<span style="display:block; margin-top:5px">
{% unless sold_out %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
{% assign downcased_option = option.name | downcase %}
{% if downcased_option contains 'size' %}
{% assign is_size = true %}
{% for value in option.values %}
{% assign variant_avialable = true %}
{% if product.options.size == 1 %}
{% unless product.variants[forloop.index0].available %}
{% assign variant_avialable = false %}
{% endunless %}
{% endif %}
<span class="size-values {% unless variant_avialable %}soldout{% endunless %} text-center">{{ value | escape }}</span>
{% endfor %}
{% endif %}
{% endfor %}
{% endunless %}
{% endunless %}
</span>
Code I inserted into theme.scss.liquid:
/* -- Collection size swatches -- */
span.size-values {
background-color: $colorBtnPrimary;
color: set-accent-text-color($colorTextBody);
padding: 4px 10px;
margin-right: 2px;
}
span.size-values.soldout {background-color: lighten($colorBtnPrimary, 20%);}
@include media-query($small) {
span.size-values {
padding: 2px 4px;
margin-right: 1px;
}
span.size-values.soldout {
opacity:0.3;
display:none;
}
}
/* -- end size swatches -- */
