Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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;
}
}
Hi @andreyroy your product also have color option beside of size, you want to show that also on collection page?
it will be like this
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 = "" %}
<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>
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
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_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>
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 %}
<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;
}
i have broke something
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.
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;
}
}
Hi @Ahsan_ANC any chance you could help me add the variant pills to my product page from my website too?
yes please share store url and explain what you actually want
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?
Yes possible please update to the theme you want and update me i will add code on that theme
Hi I have the same question, i want to show available size on product grid, where to add the code?
Hello Ahsan, I have several customisation requirements. How can we connect?
its in my signatures below
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025