Shopify themes, liquid, logos, and UX
Hello everyone,
I'm using Dawn theme (version 5.0.0) and I want to add a gray out to the unavailable variants of my product page.
How can I achieve a similar result like the image below?
Can you help me with this survey?
Thank you in advance.
Solved! Go to the solution
This is an accepted solution.
Hello everyone,
I have found the solution for this topic.
Since this is a community and I think knowledge should be shared, here we go.
In the main-product.liquid, right after this code line
{% if option.selected_value == value %}checked{% endif %}
Paste the following code
{%- for variant in product.variants -%}
{% if value == variant.title %}
{% if variant.available == false %}disabled{% endif %}
{% endif %}
{%- endfor -%}
Provide the store URL..
Hello @oscprofessional ,
Thank you for replying, you can test it on the native Dawn theme (version 5.0.0)
Thank you
Hi @King-Kang . Go to edit code > Sections > featured-product.liquid.
Find this element:
<variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" data-update-url="false" {{ block.shopify_attributes }}>
{%- for option in product.options_with_values -%}
<fieldset class="js product-form__input">
<legend class="form__label">{{ option.name }}</legend>
{%- for value in option.values -%}
<input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="{{ product_form_id }}"
{% if option.selected_value == value %}checked{% endif %}
>
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value }}
</label>
{%- endfor -%}
</fieldset>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-radios>
And change it with:
<variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" data-update-url="false" {{ block.shopify_attributes }}>
{%- for option in product.options_with_values -%}
<fieldset class="js product-form__input">
<legend class="form__label">{{ option.name }}</legend>
{%- for value in option.values -%}
<input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="{{ product_form_id }}"
{% if option.selected_value == value %}checked{% endif %}
>
{% if value.inventory_quantity != 0 %}
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value }}
</label>
{% else %}
<label style="opacity:0.5; text-decoration:line-through;" for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value }}
</label>
{% endif %}
{%- endfor -%}
</fieldset>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-radios>
You'll get something like this (last one is out of stock).
Hello @MarinaPetrovic ,
Thank you for helping me with this survey 🙂
I replaced the code with the one you provided in the feature-product.liquid, but unfortunately it didn't change anything yet.
Another print to show which variant is out of stock.
Thank you
Hi @King-Kang , my mistake.
You should go to edit code > Sections > main-product.liquid.
@MarinaPetrovic this doesn't seem to be functioning for me. would you mind having a look at my preview site?
https://tr6c9oj2rsd3uniw-36045684869.shopifypreview.com
Many thanks
Hello @MarinaPetrovic ,
I replaced it now in main-product.liquid, but unfortunately it doesn't work yet.
Thank you for your time.
@MarinaPetrovic I found this info that could be relevant for this topic!
https://barstool.engineering/shopify-dawn-soldout-variant-styling/
It is not perfectly well done because it's not working, but I think it can be helpful.
What do you think? Is this could be the path? Can you still help with this additional info?
Thank you in advance 🙂
If you'd like to try this approach, go to edit code > assets > global.js. Code lines: 888 - 899. Replace them with:
class VariantRadios extends VariantSelects {
constructor() {
super();
// Trigger change when loaded
this.onVariantChange()
}
// Overwrite updateOptions method to check for unavailable variants
updateOptions() {
const fieldsets = Array.from(this.querySelectorAll('fieldset'));
this.options = fieldsets.map((fieldset) => {
return Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value;
});
const possibleVariants = this.getVariantData().filter(variant => variant.option1 === this.options[0])
for (let index = 0; index < possibleVariants.length; index++) {
const variant = possibleVariants[index]
const input = document.querySelector(`[value="${variant.option2}"]`)
if (!variant.available) {
input.classList.add('unavailable')
} else {
input.classList.remove('unavailable')
}
}
}
}
customElements.define('variant-radios', VariantRadios);
And go to assets > section-main-product.css and add this:
.product-form__input input[type='radio']:disabled + label,
.product-form__input input[type='radio'].uanvailable + label {
border-color: rgba(var(--color-foreground), 0.3);
color: rgba(var(--color-foreground), 0.4);
text-decoration: line-through;
}
.product-form__input input[type='radio'].unavailable:checked + label {
color: rgb(var(--color-background));
}
Exactly like I did @MarinaPetrovic , and still not working... I want to note that I did these changes in a new Dawn theme (5.0.0) from scratch, to avoid any code conflicts, also in the css code I also tried by adding !important. But still not working 😞
Please share url.
This is an accepted solution.
Hello everyone,
I have found the solution for this topic.
Since this is a community and I think knowledge should be shared, here we go.
In the main-product.liquid, right after this code line
{% if option.selected_value == value %}checked{% endif %}
Paste the following code
{%- for variant in product.variants -%}
{% if value == variant.title %}
{% if variant.available == false %}disabled{% endif %}
{% endif %}
{%- endfor -%}
Thanks for sharing!
Was there any other coding added (like anything previously mentioned in this thread)? This code on it's own doesn't work for myself.
Hello @joedogfish
Did you try in an empty Dawn theme?
I mean, a new one from scratch, without customizations.
Ive tried it on my current site (has a few customisation) which is probably whats affecting it
@joedogfish , can be...
I'm using it in the site I'm working on, but first I tested it in an empty one, and worked really well. Just to note, the theme used was Dawn and the version 5.0.0.
Sadly if you have cutomizations, I can't help you further, since I'm not a programmer...
Thank you! This is the closest thing that has worked, (I just switched to Dawn). But unfortunately it actually shows the word "disabled" next to the sold variant, instead of being grayed out. So I was able to change the word to "sold" which is better, but it appears to show before the variant name, instead of after, which doesn't look great. Is there any possible update to remedy this?
Also, I am using a drop down variant menu, not pills.
I'm trying to upload photos here, but it isn't accepting my files. I'll try again.
Thank you!!!
THANK YOU SO MUCH! nothing helped but this , thank you so much!
Thank you! This actually worked. Bless.
hello
Thank you for sharing, i am using DOWN 6.0.2; the code doesn't work, anyway, but thank you everyone.
my mistake, it worked! it did! thank you guys.😊
any idea wich line number is this code line: {% if option.selected_value == value %}checked{% endif %}
?
Thanks
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024