How to automatically show 'sold out' for out of stock variants in Dawn theme?

Store Design
1

Hello,

I have moved to Dawn theme and unfortunately when something is out of stock it will not show on the variant selector which from a customer perspective can be rather annoying. Especially with my Moldavite I have many variants with a high turnover of units. See https://www.taliandloz.com/products/moldavite?variant=41051010334874

How can add an automated ‘sold out’ to each variant or that it is crossed when a variant is sold out? Any suggestions welcome!

If I have instructions and template for code I would figure out how to do it. But I can’t find any codes? I might be looking for the wrong things!

I know I can do it manually but that is not doable :slightly_smiling_face:

Thank you so much!

Laura

2

Hi @TaliandLoz ,

You can refer https://community.shopify.com/c/shopify-design/strikethrough-sold-out-variant-dawn-theme-help/m-p/1308144

Hope it helps!

3

Thank you for replying! Unfortunately I get the errors/not working properly as well. I will have another try/search.

4

Hi @TaliandLoz ,

Does your product only have 1 option, or does it include multiple options?

5

Hi!

It has multiple options and it varies per week/month even how many. If you look at the Moldavite, it sometimes has 20 options, sometimes 10.

Would this be different coding then?

Thank you.

6

Hi @TaliandLoz ,

It’s variants, I’m referring to option.

Like now you have 1 option ‘Size’, a product has more than 1 option? like Size and Color?

7

Hi @LitCommerce

Ah sorry I miss understood. Yes they all have 1 option.

8

Hi @TaliandLoz ,

Please go to global.js file, find ‘VariantSelects’ and add code here:

Screenshot.png
Screenshot.png1062×599 36.8 KB

Code:

const select = document.getElementById(`Option-${this.dataset.section}-0`);
this.getVariantData().find((variant, index) => {
      if (variant.available == false) select.options[index].classList.add('hidden');
});

Hope it helps!

1 Like
9

Hi @LitCommerce

Thank you for taking the time to write this!

I have added it to a copy of my theme, at first I didn’t see it but it looks like the sold out variant is taken off the list. Is that what it is meant to do?

Is there a possibly to get a line through the variant?

For example when red is sold out it looks like this

Blue

Red

Yellow

Thank you!

Laura

10

Hi @TaliandLoz ,

Yes, my tutorial helped you to hide the sold out variant.

Since you can’t add a line through in this case, if you want you can just add ‘disabled’ and change its color? do you want this?

1 Like
11

Hi @LitCommerce

Ah ok, adding a stripe isn’t possible?

Yes changing of colour would be a great option as well, perhaps very light grey? Or do you recommend something else?

Thank you so much!

12

Hi @TaliandLoz ,

Please change code:

const select = document.getElementById(`Option-${this.dataset.section}-0`);
this.getVariantData().find((variant, index) => {
      if (variant.available == false) select.options[index].style.background = '#dedede';
});

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

1 Like
13

Thank you! It is working, but only on desktop I see now :slightly_smiling_face:

Can this be on mobile as well?

So crossing the variant is not possible at all or is that more of a customization?

14

Hi @TaliandLoz ,

It is not possible at all, if you want you need to change a lot, it will convert the HTML from select to ul li.

  • With mobile: please send me the product link, I will check it for you