FROM CACHE - en_header

Gray out unavailable variants - Dawn theme

Solved
King-Kang
Trailblazer
148 8 65

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?

 

KingKang_0-1654677197912.png

 

Can you help me with this survey?

Thank you in advance.

Accepted Solution (1)

Accepted Solutions
King-Kang
Trailblazer
148 8 65

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

 

View solution in original post

Replies 18 (18)
oscprofessional
Shopify Partner
13279 2022 2586

@King-Kang ,

Provide the store URL..

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
King-Kang
Trailblazer
148 8 65

Hello @oscprofessional ,

 

Thank you for replying, you can test it on the native Dawn theme (version 5.0.0)

 

Thank you

MarinaPetrovic
Navigator
493 111 155

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).
Screenshot 2022-06-09 at 13.56.58.png

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
King-Kang
Trailblazer
148 8 65

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.

KingKang_1-1654782227843.png

 

Another print to show which variant is out of stock.

 

KingKang_2-1654782271465.png

 

Thank you

MarinaPetrovic
Navigator
493 111 155

Hi @King-Kang , my mistake. 
You should go to edit code > Sections > main-product.liquid.

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
joedogfish
Explorer
61 0 12

@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

King-Kang
Trailblazer
148 8 65

Hello @MarinaPetrovic ,


I replaced it now in main-product.liquid, but unfortunately it doesn't work yet.

Thank you for your time.

King-Kang
Trailblazer
148 8 65

@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 🙂

MarinaPetrovic
Navigator
493 111 155

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));
}



M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
King-Kang
Trailblazer
148 8 65

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 😞

MarinaPetrovic
Navigator
493 111 155

Please share url.

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
King-Kang
Trailblazer
148 8 65

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

 

joedogfish
Explorer
61 0 12

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.

King-Kang
Trailblazer
148 8 65

Hello @joedogfish 

Did you try in an empty Dawn theme?

I mean, a new one from scratch, without customizations.

joedogfish
Explorer
61 0 12

Ive tried it on my current site (has a few customisation) which is probably whats affecting it

King-Kang
Trailblazer
148 8 65

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

Sunrosey
New Member
1 0 0

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!!!

vooneey
Tourist
6 0 0

THANK YOU SO MUCH! nothing helped but this , thank you so much!