display available size collection list

Solved

display available size collection list

rogerjet
Excursionist
38 0 3

Hi,

I would like to show the size variants below the product image on the collection view and product grid.  When clicking the available size it should take you to the product page.

 

I have seen a few stores have it but not sure how it is done.

 

view my store swaace.com.au I am using the dawn theme.

 

something like the example below.

 

rogerjet_0-1716704043449.png

 

 

Accepted Solution (1)
Ahsan_ANC
Shopify Partner
1409 254 326

This is an accepted solution.

here is the updated css

.ancvariants {
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: left;
flex-wrap: wrap;
    margin-bottom: 10px;
}
.ancvariants a {
    color: #000;
    border: 1px solid grey;
    padding: 10px;
    text-decoration: none!important;
    width: 35px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 2px;
font-size: calc(var(--font-heading-scale) * 1.3rem);
}
.ancvariants a:hover {
    background: #000;
    color: #fff;
}
.ancvariants a.outstock {
    border-color: rgba(var(--color-foreground), .1);
    color: rgba(var(--color-foreground), .6);
    text-decoration: line-through !important;
}
.ancvariants a.outstock:hover {
   
    color: #fff;
}
.card__information {
    padding-bottom: 0;
}
@media only screen and (max-width: 768px){
 slider-component .ancvariants a{
padding: 2px;
}
}
Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search

View solution in original post

Replies 28 (28)

Ahsan_ANC
Shopify Partner
1409 254 326

Hi @andreyroy your product also have color option beside of size, you want to show that also on collection page?

 

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
rogerjet
Excursionist
38 0 3

Hi @Ahsan_ANC yes if the colour variant is available I would like to show it 

Ahsan_ANC
Shopify Partner
1409 254 326

it will be like this

Ahsan_ANC_0-1716724355236.png

 

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
rogerjet
Excursionist
38 0 3

Then I  would just want the size, for colour I will do something else like show it as 2 products.

Ahsan_ANC
Shopify Partner
1409 254 326

you will remove the color option from product variants and add a new product?

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
rogerjet
Excursionist
38 0 3

I will keep the colour options.

Ahsan_ANC
Shopify Partner
1409 254 326

Hi, please create a duplicate theme and apply this on that and share preview url

in file featured-collection.liquid  add this css 

.ancvariants{
    display:flex;
    gap:5px;
  }
  .ancvariants a {
    color: #000;
    border: 1px solid grey;
    padding: 3px;
    text-decoration: none !important;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

at this position

Ahsan_ANC_0-1716725647201.png


and in the card-product.liquid file add this code at very bottom 

{% assign sizes = "" %}
<div class="ancvariants">
  {% for option in card_product.options_with_values  %}
      {% if option.name contains 'ize' %}
       {%- for value in option.values -%}
        {% for variant in card_product.variants %}
          {% if variant.title contains value %}
            {% unless sizes contains value %}
              <a href="{{ variant.url }}">{{ variant.title | split:'/' | first }}</a>
           {% assign sizes = sizes | append:value %}
              {% endunless %}
            {% endif %}
      
          {% endfor %}
      
    {% endfor %}
      {% endif %}  
    {% endfor %}
        
      </div>

 

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
rogerjet
Excursionist
38 0 3

Hi @Ahsan_ANC ,

Thanks working for the featured collection but for product grid it is only showing for the last row but the style is not the same.

 

Take a look at my preview store https://gvdnqhk3yft08ytg-69331648824.shopifypreview.com

rogerjet_0-1716728716444.png

is it possible to match the style i have in the product view??

rogerjet_1-1716728777409.png

And also is it possible to reduce the line spacing between the size and the price

rogerjet_2-1716728842024.png

 

 

rogerjet
Excursionist
38 0 3

Hi @Ahsan_ANC ,

 

Some issue with the code it is not showing all the available sizes.  See example

rogerjet_0-1716774862241.png

Size small is available but on the collection list does not show size S

 

rogerjet_1-1716775008572.png

 

Ahsan_ANC
Shopify Partner
1409 254 326

Hi @rogerjet please in the file component-card.css change the value of bottom from zero to 35px; like show below

Ahsan_ANC_0-1716786334550.png

to

Ahsan_ANC_1-1716786424750.png

 

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
rogerjet
Excursionist
38 0 3

rogerjet_0-1716786704167.png

 

No change with this code.

 

An ideas why some sizes mabye missing?

Ahsan_ANC
Shopify Partner
1409 254 326

doing that will send new code in few minutes

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
Ahsan_ANC
Shopify Partner
1409 254 326

Hi @rogerjet  please remove all the code you added yesterday and add this, keep the above change of component-card.css file

in the card-product.liquid file add the following code at the location specified in below screenshot

{% assign sizes = "" %}
       {% for option in card_product.options_with_values  %}
      {% if option.name contains 'ize' %}
       {%- for value in option.values -%}
             {% assign sizes = sizes | append:','| append:value | append:',' %}
    {% endfor %}
             {% endif %}            
    {% endfor %}    
      <div class="ancvariants">
        {% for variant in card_product.variants %}
          {% assign ntitle = variant.title | split:'/ ' | first | strip %}
          {% assign ntitle = ',' | append:ntitle | append:',' %}
            {% if sizes contains ntitle %}
              <a href="{{ variant.url }}">{{ ntitle | remove:','}}</a>
              {% assign sizes = sizes | remove:ntitle %}
             {% endif %} 
            {% endfor %}
      </div>

 

Ahsan_ANC_0-1716792198022.png


remove all the css you added and edited yesterday  and add the following css at the very bottom of base.css

.ancvariants {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
}
.ancvariants a {
    color: #000;
    border-radius: 25px;
    border: 1px solid grey;
    padding: 10px;
    text-decoration: none !important;
    width: 50px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

 

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
Ahsan_ANC
Shopify Partner
1409 254 326

I think you have removed border-radius property.
here is updated css for better hover effect

.ancvariants a {
    color: #000;
    border: 1px solid grey;
    padding: 10px;
    text-decoration: none!important;
    width: 45px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 2px;
}
.ancvariants a:hover {
    background: #000;
    color: #fff;
}



Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
rogerjet
Excursionist
38 0 3

Hi @Ahsan_ANC,

 

Thanks so much for your help we are very close.

 

I want to be able to show the no stock Sizes grey out with strike through.

rogerjet_0-1716803309865.png

Also some products can have 5 or 6 sizes to can look messy.  Can i adust the font to make the size smaller similar to the other text for the product title?

Ahsan_ANC
Shopify Partner
1409 254 326

here is the updated codes 

{% assign sizes = "" %}
       {% for option in card_product.options_with_values  %}
      {% if option.name contains 'ize' %}
       {%- for value in option.values -%}
             {% assign sizes = sizes | append:','| append:value | append:',' %}
    {% endfor %}
             {% endif %}            
    {% endfor %}    
      <div class="ancvariants">
        {% for variant in card_product.variants %}
          {% assign ntitle = variant.title | split:'/ ' | first | strip %}
          {% assign ntitle = ',' | append:ntitle | append:',' %}
            {% if sizes contains ntitle %}
              <a {% unless variant.available %}class="outstock"{% endunless %} href="{{ variant.url }}">{{ ntitle | remove:','}}</a>
              {% assign sizes = sizes | remove:ntitle %}
             {% endif %} 
            {% endfor %}
      </div>


and updated css

.ancvariants a {
    color: #000;
    border: 1px solid grey;
    padding: 10px;
    text-decoration: none!important;
    width: 35px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 2px;
font-size: calc(var(--font-heading-scale) * 1.3rem);
}
.ancvariants a:hover {
    background: #000;
    color: #fff;
}
.ancvariants a.outstock {
    border-color: rgba(var(--color-foreground), .1);
    color: rgba(var(--color-foreground), .6);
    text-decoration: line-through !important;
}
Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
rogerjet
Excursionist
38 0 3

i have broke something

rogerjet_0-1716805505375.png

 

Ahsan_ANC
Shopify Partner
1409 254 326

here is the updated css

.ancvariants {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
}
.ancvariants a {
    color: #000;
    border: 1px solid grey;
    padding: 10px;
    text-decoration: none!important;
    width: 35px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 2px;
font-size: calc(var(--font-heading-scale) * 1.3rem);
}
.ancvariants a:hover {
    background: #000;
    color: #fff;
}
.ancvariants a.outstock {
    border-color: rgba(var(--color-foreground), .1);
    color: rgba(var(--color-foreground), .6);
    text-decoration: line-through !important;
}
.ancvariants a.outstock:hover {
   
    color: #fff;
}
Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
rogerjet
Excursionist
38 0 3

Hi @Ahsan_ANC ,

 

on the featured collection mobile view for some reason the size of the box is larger than everywhere else.

rogerjet_0-1716810677938.png

Then if I have too many variants they overlap each other.

rogerjet_1-1716810736854.png

 

and the other small issue is the white space between the price and the size.  I would like to reduce the orange shade and add white space where the green shade is.

rogerjet_2-1716811105844.png

 

 

 

Ahsan_ANC
Shopify Partner
1409 254 326

This is an accepted solution.

here is the updated css

.ancvariants {
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: left;
flex-wrap: wrap;
    margin-bottom: 10px;
}
.ancvariants a {
    color: #000;
    border: 1px solid grey;
    padding: 10px;
    text-decoration: none!important;
    width: 35px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 2px;
font-size: calc(var(--font-heading-scale) * 1.3rem);
}
.ancvariants a:hover {
    background: #000;
    color: #fff;
}
.ancvariants a.outstock {
    border-color: rgba(var(--color-foreground), .1);
    color: rgba(var(--color-foreground), .6);
    text-decoration: line-through !important;
}
.ancvariants a.outstock:hover {
   
    color: #fff;
}
.card__information {
    padding-bottom: 0;
}
@media only screen and (max-width: 768px){
 slider-component .ancvariants a{
padding: 2px;
}
}
Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
rogerjet
Excursionist
38 0 3

Hi @Ahsan_ANC,

 

Thank you so much for the amount of effort you put into this.

Kate_JRC
Tourist
7 0 1

Hi @Ahsan_ANC any chance you could help me add the variant pills to my product page from my website too? 

Ahsan_ANC
Shopify Partner
1409 254 326

yes please share store url and explain what you actually want

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
Kate_JRC
Tourist
7 0 1

Sure. Store url is https://www.jerichoroadclothing.com.au We are in the process of updating to the Dawn theme but would like to add the variant pills that are on the product pages (photo attached) to the collection page too so that people can see what sizes are available. Is this possible? 

variant pills.jpg

Ahsan_ANC
Shopify Partner
1409 254 326

Yes possible please update to the theme you want and update me i will add code on that theme

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
enjoykidsus
Visitor
1 0 0

Hi I have the same question, i want to show available size on product grid, where to add the code?

AM_SFY
Visitor
1 0 0

Hello Ahsan, I have several customisation requirements. How can we connect?

Ahsan_ANC
Shopify Partner
1409 254 326

its in my signatures below

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search