Strikethrough sold out variant (Dawn theme) help

Store Design
1

Hi folks, hope everyone is well.

I’m assisting a friend with some code work on her site, however I’m rather stumped by something.

https://www.venusloves.com/products/signet-ring

In this product, the gold variant is sold out, and the silver variant is in stock.

I’m trying to write a line of code that adds a ‘strikethrough’ to the variant title so the customer does not have to click it to find out that it is out of stock.

The code presented which produces the variant title is as follows:

label for=“{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}”>> {{ value }}

{{ value }} is the variant title, so if I add a either side of it the title strikes through.

I tried to write a line of code that checks the variants stock and to subsequently strike through sold out variants, but for some reason I could only get it to strike both variants, not just the gold one.

Could someone assist please? She is using the all new Dawn theme for reference.

2

bump - I would really appreciate some help with this if someone could assist!

3

Hi @UK_Aspire_Vendo ,

Go to sections/main-product.liquid and add code: https://i.imgur.com/OBBQfm3.png

Code:

{%- assign variant_label_state = true -%}
{%- if product.options.size == 1 -%}
{%- unless product.variants[forloop.index0].available -%}
{%- assign variant_label_state = false -%}
{%- endunless -%}
{%- endif -%}

<input type=“radio” id=“{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}”
name=“{{ option.name }}”
{% unless variant_label_state %} disabled=“disabled”{% endunless %}
value=“{{ value | escape }}”
form=“product-form-{{ section.id }}”
{% if option.selected_value == value %}checked{% endif %}

Then you can css by disable or change it to class.

Hope it is clear to you.

If you find my answer helpful for you, please mark it as a solution. Thank you so much and good luck,

4

Whilst this worked beautifully on products with only 1 variant, she has some where they are sold in Colour and then Size:

UK_Aspire_Vendo_0-1631112019576.png
UK_Aspire_Vendo_0-1631112019576.png608×475 20 KB

The selected size is out of stock and is not greyed out like with singular variant items.

If you could help with this too then that would do it!

Thanks SO much for your help.

5

It only solution with one variant, if you have more than 1 variant, you need to customize a lot, including JS, so I can’t guide you in detail. And it will be difficult for someone else to help you only with the instructions.

You need to hire a professional for this and you can ask for help on the group: https://community.shopify.com/category/shopify-job-board

Please sympathize with me in this case.

6

I’ve added this code and it works great! The only issue is I’m using a back-in-stock plugin, and it relies on the variant in the URL. When I click the out-of-stock variants, it doesn’t reflect in the URL.

Is it possible to change the code so they still have the strikethrough, but can still be clicked so the variant in the URL changes?

Thanks!

7

For those that rely on the variant in the URL for any apps, here’s the solution:

main-product.liquid

{%- assign variant_label_state = true -%}
{%- if product.options.size == 1 -%}
{%- unless product.variants[forloop.index0].available -%}
{%- assign variant_label_state = false -%}
{%- endunless -%}
{%- endif -%}

<input type=“radio” id=“{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}”

{% unless variant_label_state %} class=“disabled_variant”{% endunless %}

base.css:

.disabled_variant+label {
color: rgba(27,25,30,.4)!important;
border-color: rgba(27,25,30,.1)!important;
text-decoration: line-through;
}

.disabled_variant:checked+label{
color: #fff!important;
}

8

Hello!

Are there any updates to this code? I tried the previous code but it ended up creating a strikethrough for all -both variants and size options. However, the available sizes are still clickable despite it being crossed out (see screenshot below). So basically the concept is working, just need the strikethrough and light coloring to only be on sold out sizes.

Sold Out Variant Dawn.jpg
Sold Out Variant Dawn.jpg1432×786 26 KB

9

Check this GitHub branch.

https://github.com/Shopify/dawn/pull/105/files

10

For anyone interested I just posted a blog post about how I tackled this.

https://barstool.engineering/shopify-dawn-soldout-variant-styling/

11

Hi Joseph, thanks for taking the time to do this.

I am however struggling with step one, as we have no ‘variantradios’ class in our code.

Please advise!

12

You can find that class definition in the Dawn theme here - https://github.com/Shopify/dawn/blob/main/assets/global.js#L717

13

There is a typo within the spelling of unavailable within your code

@josephbona

14

Kindly share the code. I was looking for this code for Dawn theme.

15

Great work Jose. I have found a bug with the code though. The add to cart button is grayed out (even on instock products) on the product page. You have to first switch between the variant to re-enable it.

16

I believe the following line is causing the issue

this.onVariantChange()

17

i tried your solution but none of the available variants were clickable. do you know the fix?

18

Many thanks! You saved the day!

Regards

19

Well done @josephbona , I replaced the js code for VariantRadios in global.js and added the css code you provide for section-main-product.css (even added !important to the code), and unfortunately didn’t achieve the same result, maybe I missed something :confused:

20

Hi @wearehike , is it possible if you could share the screenshot of your main-product.liquid with that part? Thanks