Can I add clothing sizes to product images on my shop page?

[wings-n-nomad]

Hi, I would like to know if it is possible to add the sizes to the first picture on our shop?

We have the theme Narrative at this moment. It’s easier for our clients we think when they see which size is still available.

Thank you!

[SheetalZadfiya]

Hi @wings-n-nomad

1. Go to Snippets / product-card.liquid

  {% if product.featured_media %}
  {% include 'card-image', type: product.featured_media.preview_image, grid_style: grid_style %}
  {% endif %}

  {% unless product.has_only_default_variant %}
  

    {%- for variant in product.variants -%}
    - 
    {%- endfor -%}
  

  {% endunless %}

2. Go to Assets/theme.scss.liquid

.product_grid_img{
  position:relative;
}
.grid_variant{
  position:absolute;
  bottom:0;
  right:10px;
  list-style:none;
}
.grid_variant li{
  padding:3px;
  min-width:60px;
}
.grid_variant li button{
  background:#fff;
  border:0;
  color:#000;
  border-radius:0;
  padding:5px 10px;
  width:100%;
}
.grid_variant li button[disabled]{
  position:relative;
  color:#b9b9b9;
}
.grid_variant li button[disabled]:after{
  position: absolute;
    content: "";
    z-index: 1;
    top: 40%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(34, 34, 34, 0.3);
    opacity: 1;
    transform: rotate(330deg) translateX(-9%);
    width: calc(100% + 10px);
}

I look forward to hearing from you.