Adding sizes to collections page

Highlighted
Tourist
9 0 2

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 -- */

 

 

Sizes disappear as page fully loadsSizes disappear as page fully loadsSizes show at firstSizes show at first

0 Likes
Shopify Expert
277 13 53
Provide your store url !

Sudipta 
MS Web Designer | Task4Store
20,000+ Tasks Completed | 1000+ Happy Clients

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution

0 Likes
Highlighted
Tourist
9 0 2

shopUAL.com

 

BUT, I am editing a copy of our theme, so the changes I have made to the code are not live on this site yet.

 

Thanks! :)

0 Likes
Highlighted
Shopify Partner
1233 162 361

If you could provide a preview link that'd be helpful. When you preview your theme from your code editor a bar will appear at the bottom that allows you to Share Preview. You can copy that link and paste it here. It's likely javascript that's removing it after page load. 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted