Variant selection does not cross/grey out

[kinddogshop]

I’m using the Retina theme and run a dog themed shop where there are sizes and colors for a certain sweater.

It’s really hard for a visitor to identify visually what is in stock by clicking on the variants. Is there a way to either grey out or strike out availability when something is out of stock?

I would really appreciate any help on this.

Here’s a link to the page with the issue. If you click through the variants you’ll see

Bravehound Hand-knitted Dog Sweater

[Maximus3]

Have you checked your theme settings for this? That’s usually the first place to go when wanting a feature like this. It will usually be in the Product tab or something similar. You paid money for this theme? Check out its settings. It’s there.

[oscprofessional]

@kinddogshop ,

Yes this is possible, but Retina does not handle out-of-stock variants visually by default. You need a small Liquid + CSS tweak.

1. Enable “Hide sold-out variants” = OFF
   (So customers can still see them)
2. Add CSS to grey out / strike out sold-out options

.options-selection__option-values .options-selection__option-value:last-child {
  display: none;
}

[kinddogshop]

Yes it’s already set at “Disabled”

[kinddogshop]

@oscprofessional

“Hide sold-out variants”

Where do I put this code?

[zulfali]

Hi @kinddogshop

With Rubik Variant Image & Swatch, you can fully customize your swatches to match your store’s design.

You’re able to:

• Visually indicate out-of-stock variants

• Change the color of the out-of-stock line

• Or completely remove the strike-through if you prefer

Rubik works seamlessly with all major Shopify themes, so it fits naturally into your existing setup.

I’ve also added a short video so you can get a closer look at how the app works.

If you have any questions about setup or customization, our support team will be happy to help you.

[Moeed]

Hey @kinddogshop

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
label.options-selection__option-value-label:has(input.options-selection__option-value-input[data-variant-option-available="false"]) {
    opacity: 0.2 !important;
}
</style>

RESULT:

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

[tim_1]

No need to edit theme code.
Most CSS codes can go into “Custom CSS” of this section, or even Theme settings=> Custom CSS setting.

label:has([data-variant-option-available="false"]) {
  opacity: 0.25;
}

Result will be like this:

You can also add a cross-line.
However, this CSS is not compatible with “Custom CSS”, so for this you can add a “Custom code” / “Custom liquid” section and use this code:

<style>
label:has([data-variant-option-available="false"]) {
  position: relative;
}

label:has([data-variant-option-available="false"]):after {
  content: "";
  position:absolute;
  inset: 1px;
  background: linear-gradient(-45deg, transparent calc(50% - 1px) , black, transparent calc( 50% + 1px));
}
</style>

The result would be:

And you can combine both to get this result:

[kinddogshop]

@Moeed

<style>
label.options-selection__option-value-label:has(input.options-selection__option-value-input[data-variant-option-available="false"]) {
    opacity: 0.2 !important;
}
</style>

That works SO nicely!! THANK YOU!