Declutter Your Shopify Store: Removing Strike-Throughs from Sold-Out Variants

The Case of the Vanishing Strike-Through: Taming Sold-Out Variants in Shopify

Ever feel like your Shopify store's product pages are a bit… cluttered? One common culprit is the strike-through on sold-out product variants. It's useful to show customers what's unavailable, but sometimes it just doesn't fit the aesthetic. I recently saw a great discussion in the Shopify Community about this very issue, started by a user called ChonkyDog, and thought I'd share some insights.

The Question: Clean Look, Clear Messaging

ChonkyDog's core question was simple: "Is it possible to remove the strike through and make it look exactly like inventory that is in stock, but still keep it to where I can’t sell items that are out of stock?" They'd already started digging into the product-variant-picker.liquid file, which is a great first step, but were hitting a wall. It’s a common problem! Knowing *where* to look is half the battle.

The Community Weighs In: CSS to the Rescue!

Thankfully, the Shopify Community is full of helpful folks! Several people jumped in with suggestions, but the most comprehensive answer came from devcoders. They pointed out that the strike-through isn't hardcoded in Liquid (as ChonkyDog suspected) but is actually controlled by CSS classes like .sold-out, .disabled, and [aria-disabled="true"]. These classes typically apply styles like text-decoration: line-through; and opacity: 0.5;.

The beauty of this approach is that you can override these styles with your own CSS. Devcoders provided a fantastic, safe solution using CSS:

Step 1: Add CSS Override

Go to Online Store → Themes → … → Edit code → Assets → base.css

Add this at the bottom:

/* Remove strike-through from sold out variants */
.variant-input input:disabled + label,
.variant-input input[aria-disabled="true"] + label {
  text-decoration: none !important;
  opacity: 1 !important;
}

This snippet does two key things:

• Removes the strike-through.
• Makes the sold-out variants look normal (full opacity).

Crucially, it keeps them unselectable, so you don't accidentally oversell.

Button-Style Variants

Devcoders also included a snippet for stores using button-style variant pickers, which is super helpful because these often have slightly different CSS structures:

/* Button-style variant picker */
.product-form__input input[type="radio"]:disabled + label {
  text-decoration: none !important;
  opacity: 1 !important;
}

Other Approaches: Apps and Considerations

While CSS is often the cleanest and fastest solution, it's not the *only* way. Another community member, zulfali, suggested using the Rubik Variant Images & Swatch app. This app provides a more visual interface for controlling how sold-out variants appear, allowing you to either hide them completely or simply remove the strike-through.

The right approach depends on your comfort level with code and the specific features you need. If you're making more complex changes to your variants (like adding color swatches or image updates), an app might be a better long-term solution. For a simple strike-through removal, CSS is often the way to go.

One thing Shadab_dev mentioned in the thread is also worth considering: where do you want to *put* those sold-out items, and how do you want to display them? Removing the strike-through is only part of the solution. Think about the overall user experience. Do you want to visually differentiate sold-out items in another way (e.g., a subtle "Out of Stock" badge)? Or do you want to hide them completely to avoid disappointment?

Ultimately, the best approach depends on your store's design and your customers' needs. But hopefully, this breakdown of the community discussion gives you a solid starting point for decluttering your product pages and creating a smoother shopping experience!