Goal: Show clickable size variants under product images on collection/product grids (Dawn theme), linking to the product page. Color variants were kept but not displayed as pills.
Implementation: Added size “pills” via Liquid in card-product.liquid and CSS for .ancvariants. Initial CSS placed in featured-collection.liquid, later moved to base.css. Minor layout tweak in component-card.css (bottom changed to 35px).
Fixes/iterations: Addressed issues where styles applied only to the last row and some sizes (e.g., S) were missing. Revised Liquid to build a comma-delimited list of size options, then iterate variants to print unique sizes reliably.
Styling updates: Added hover effects, border radius, reduced font/box sizing, and an .outstock class to grey out and strike through unavailable sizes. Adjusted spacing by setting card__information padding-bottom to 0 and refining gaps.
Mobile: Resolved oversized boxes and overlapping by adding flex-wrap, smaller padding in a media query, left alignment, and margin-bottom.
Outcome: Original request functionally achieved with refined layout and mobile responsiveness. OP expressed thanks. Subsequent posts asked for similar implementation on another store and guidance on where to add code; helper confirmed it’s possible and invited follow-up (no final code shared for those yet).
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.
Hi @andreyroy your product also have color option beside of size, you want to show that also on collection page?
Hi @Ahsan_ANC yes if the colour variant is available I would like to show it
Then I would just want the size, for colour I will do something else like show it as 2 products.
you will remove the color option from product variants and add a new product?
I will keep the colour options.
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
and in the card-product.liquid file add this code at very bottom
{% assign sizes = "" %}
{% 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 %}
{{ variant.title | split:'/' | first }}
{% assign sizes = sizes | append:value %}
{% endunless %}
{% endif %}
{% endfor %}
{% endfor %}
{% endif %}
{% endfor %}
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
is it possible to match the style i have in the product view??
And also is it possible to reduce the line spacing between the size and the price
Hi @Ahsan_ANC ,
Some issue with the code it is not showing all the available sizes. See example
Size small is available but on the collection list does not show size S
Hi @rogerjet please in the file component-card.css change the value of bottom from zero to 35px; like show below
to
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_values %}
{% if option.name contains 'ize' %}
{%- for value in option.values -%}
{% assign sizes = sizes | append:','| append:value | append:',' %}
{% endfor %}
{% endif %}
{% endfor %}
{% for variant in card_product.variants %}
{% assign ntitle = variant.title | split:'/ ' | first | strip %}
{% assign ntitle = ',' | append:ntitle | append:',' %}
{% if sizes contains ntitle %}
{{ ntitle | remove:','}}
{% assign sizes = sizes | remove:ntitle %}
{% endif %}
{% endfor %}
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;
}
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;
}
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.
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?
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 %}
{% for variant in card_product.variants %}
{% assign ntitle = variant.title | split:'/ ' | first | strip %}
{% assign ntitle = ',' | append:ntitle | append:',' %}
{% if sizes contains ntitle %}
{{ ntitle | remove:','}}
{% assign sizes = sizes | remove:ntitle %}
{% endif %}
{% endfor %}
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;
}
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;
}
Hi @Ahsan_ANC ,
on the featured collection mobile view for some reason the size of the box is larger than everywhere else.
Then if I have too many variants they overlap each other.
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.
