Shopify themes, liquid, logos, and UX
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 <s> </s> 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.
*bump* - I would really appreciate some help with this if someone could assist!
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,
Whilst this worked beautifully on products with only 1 variant, she has some where they are sold in Colour and then Size:
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.
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/c/Shopify-Ecommerce-Jobs/bd-p/shopify-job-board
Please sympathize with me in this case.
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!
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;
}
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.
Kindly share the code. I was looking for this code for Dawn theme.
Hi @wearehike, is it possible if you could share the screenshot of your main-product.liquid with that part? Thanks
i tried your solution but none of the available variants were clickable. do you know the fix?
Many thanks! You saved the day!
Regards
For anyone interested I just posted a blog post about how I tackled this.
https://barstool.engineering/shopify-dawn-soldout-variant-styling/
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!
You can find that class definition in the Dawn theme here - https://github.com/Shopify/dawn/blob/main/assets/global.js#L717
There is a typo within the spelling of unavailable within your code
@josephbonaGreat 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.
I believe the following line is causing the issue
this.onVariantChange()
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 😕
You're an absolute lifesaver, thank you.
INSANE that Dawn doesn't include this out of the box when it's recommended as the starting point for any theme.
Do you mind sharing what code you input? Why this not a default feature 🤷🏽♂️
I basically used the code that Joseph Bona shared here.
You need to take that code and replace the "class VariantRadios extends VariantSelects" section in global.js, and add the CSS.
But I made these adjustments:
Joseph's code triggers this.onVariantChange() when VariantRadios is constructed, but I had issues with the buy button being disabled on page load until a different variant was selected.
To fix that:
Basically it waits until the page has loaded then selects the first input of each option type, which makes onVariantChange() fire properly which marks unavailable options and refreshes the buy button for the selected option.
It's worth noting that for this to work properly the hierarchy of the options in your product listings is really important, i.e. if you have your Size option above Colour in your product listing, Shopify sees Size as the master variant, so this code is going to reference the size selected and check what colours are available in that size, which isn't ideal. But if you have Colour above Size in your product listing, this code is going to check all the sizes that are available when you select a colour.
I'm struggling with getting this to work and wondering if you would be willing to look at my page? www.drinkmateparty.com I have not published the code that I'm editing with your directions but I can if you would like to see my work.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024