How to remove strike through on "out of stock" product colours only

Shopify Discussion
1

Hi,

Does anyone know how to remvoe the strike through of the colours on out of stock products?

the issue is that when you have a colour and size selected it puts a line through other colours that dont have that size available but that makes it look like we dont have that colour at all.

thank you in advance

2

Hi,

thanks for that, but unfortuantly it doesnt seemed to have worked.

im useing story theme if that makes a differance?

3

Hi @Swimovations

I am from Mageplaza - Shopify solution expert.

To remove the strikethrough styling on out-of-stock color variants in Shopify (especially when a specific size is selected), you’ll need to edit the JavaScript and/or CSS that controls variant availability display.

This issue is common with themes like Dawn or Refresh, where unavailable variant combinations (e.g., a color with a sold-out size) get styled with a soldout or disabled class and often a strikethrough (text-decoration: line-through in CSS).

Step-by-Step Fix

  1. Inspect the element
    Use Inspect Element in your browser (Right-click > Inspect) to identify:
  • The class applied to the swatch (e.g., .variant-input–color or .variant__button)
  • The class added when out of stock (e.g., .soldout, .disabled, .unavailable)

You’ll likely see something like:

And CSS like:

.variant-button.soldout {
  text-decoration: line-through;
  opacity: 0.5;
}
  1. Edit the theme CSS
  • From your Shopify admin, go to Online Store > Themes.
  • Click Actions > Edit code.
  • Find your CSS file (usually under assets/, e.g., base.css, theme.css, or component-product.css).
  • Add this rule at the bottom:
/* Remove strikethrough from out-of-stock color swatches */
.variant-button.color.soldout {
  text-decoration: none;
}

Or, if the theme uses .disabled or .unavailable:

.variant-button.color.disabled,
.variant-button.color.unavailable {
  text-decoration: none;
}

You may also want to restore the default text color:

.variant-button.color.soldout {
  color: inherit;
  opacity: 1; /* Optional: remove greyed-out effect */
}
  1. Optional: Adjust JavaScript behavior (for advanced control)
    If the strikethrough or disablement is being applied by JavaScript based on unavailable variant combinations, you can override that behavior.

Look in:

  • product-form.js
  • variant-picker.js
  • or the at the bottom of product.liquid or main-product.liquid.

Find the logic that disables unavailable options and modify it to not apply .soldout to color options, or to apply a custom class instead.

Please let me know if it works as expected!

Best regards!