Strikethrough over unavailable varient

Highlighted
Tourist
14 0 2

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

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

Thank You 

 

 

 

 

 

0 Likes
Highlighted
Excursionist
80 19 19

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;	
}
0 Likes
Highlighted
Tourist
14 0 2

Hi @2BDigital  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

0 Likes
Highlighted
Excursionist
80 19 19

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 <p> tag or a <span> 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:

<!-- This is what it may look like in your template -->
<li>{{ variant.title }}</li>

<!-- This is what you need it to look like to apply the class -->

<!-- First let's check whether or not this variant is available -->
{% if variant.available %}
	<!-- If it is - just return a normal element with the variant title in it -->
	<li>{{ variant.title }}</li>
{% else %}
	<!-- If it's not available - add the unavailable-variant class to strike through that text -->
	<li class="unavailable-variant">{{ variant.title }}</li>
{% 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!

0 Likes
Highlighted
Tourist
14 0 2

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

0 Likes
Highlighted
Excursionist
80 19 19

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.

0 Likes