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. …

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: 35…

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]

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]

[rogerjet_0-1716786704167.png] No change with this code. An ideas why some sizes mabye missing?

doing that will send new code in few minutes

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_…

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; just…

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 othe…

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 %} …

i have broke something [rogerjet_0-1716805505375.png]

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;…

display available size collection list

Store Design

rogerjet May 28, 2024, 1:25am 22

Hi @Ahsan_ANC ,

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

Topic		Replies	Views
How to display "size" in collection page and product detail page? Technical Q&A	54	518	November 9, 2023
display available size collection list and product grid Dawn Store Design css , shopify-themes	9	190	January 30, 2025
adding size variations to collection page Store Design	7	35	July 14, 2021
Display available size variants on product grid collection Store Design collection-page	2	56	December 17, 2022
How To Show Size Variants On Collection Page In Be Yours Theme Shopify Discussion troubleshooting , shop-performance	11	298	January 27, 2024

display available size collection list

Related topics