How to show strikethrough on unavailable variants in Prestige theme?

Shopify Discussion
1

Hello Guys,

I was looking for some customisation and wanted to show strike through over unavailable variant please checkout the image i mentioned

Product variants that are not available should be crossed out. Theme Prestige.jpg
Product variants that are not available should be crossed out. Theme Prestige.jpg447Ă—190 14 KB

Let me know if anyone can help the theme is Prestige theme.

Thank You

2

As you’re using a premium theme we won’t be able to see the source code.

Can you provide a link to your store?

Effectively you have the available property of the variant object in liquid - https://shopify.dev/docs/themes/liquid/reference/objects/variant

You should create a class for strikethrough and add this class for variants where variant.available is false in the liquid template.

The CSS for the class would be something as simple as:

.unavailable-variant {
	text-decoration: line-through;	
}
3

Hi @SB_90 thanks for replying i cant share store link as its confidential sorry about that just tell me where to add that class code it will be a great help.

Thank You

4

Hi

So this code:

.unavailable-variant {
	text-decoration: line-through;	
}

Will go at the bottom of your themes.scss file in the editor.

Then - you’ll need to find where the variant HTML appears in your Product template.

You’ll be looking for something like:

{% for variant in product.variants %}

Then as each item gets added to the page - it’ll be wrapped in an element - maybe a

tag or a tag - you’re looking for where this bit of text appears:

{{ variant.title }}

The element that wraps this is the one that will need the class of unavailable-variant added.

So - the change would look (in simple terms) something like:


- {{ variant.title }}

{% if variant.available %}
	
	- {{ variant.title }}

{% else %}
	
	- {{ variant.title }}

{% endif %}

It’s quite difficult to tell you exactly what to do without seeing your code but this should at least help you identify where to look!

5

Thank you for your response let me try and will update if it will works for me

6

No Problem.

If you can provide the code snippet for the product template where the variants are rendered I might be able to give you a more accurate bit of code.

Feel free to post again if you can’t get the result you want.

7

Hi there,

I hope you’re well.

I have tried to follow your instructions but I can’t seem to make it work.

Could you maybe help me out?

Store URL: https://www.onlytheblind.com

Thank you.

Kind regards,

Menno

8

I have found this part in product-form.liquid:

{%- for variant in product.variants -%}

{{ variant.title }} - {{ variant.price | money }} {%- endfor -%}

Am I in the right place?

Thank you.

9

@2BDigital Could you maybe help me out?

Thank you for your time.

10

Hello,

I would like to do the same with my website, can someone please help

11

How to do this on the Dawn theme? There is no theme.css, but only theme.liquid