Beyond Fading: How to Cross Out Sold-Out Variants in Shopify's Symmetry Theme (Community Insights)

Hey fellow store owners! It's your Shopify expert and community analyst here, diving into a super practical question that popped up recently in the forums. We've all been there: you have a fantastic product with multiple sizes or colors, and some variants inevitably sell out. Shopify's default behavior often just 'greys out' these unavailable options, which is okay, but sometimes, you want something a bit more visually assertive. You want to clearly show customers, 'Hey, this specific option is GONE!'

That's exactly what our community member, mavricks, was asking about. They wanted to display a clear 'X' over sold-out product variants in their Symmetry theme, and like many of us, had tried a few code snippets that just weren't sticking. This is a common challenge, as themes evolve, and CSS selectors can change. But don't worry, the community rallied, and we've got some solid pathways to get this done!

Why Cross Out Sold-Out Variants?

Before we jump into the 'how,' let's quickly touch on the 'why.' While fading out unavailable options is standard, crossing them out offers a few advantages:

• Clarity: An 'X' is universally understood as 'unavailable' or 'not possible.'
• Reduced Frustration: Customers immediately see it's out of stock without having to click, reducing clicks to dead ends.
• Visual Impact: It can be a stronger visual cue, especially if your product images are vibrant.

First Stop: Symmetry Theme's Built-In Settings

The very first thing you should always check when trying to customize your theme's appearance is its own built-in settings. As Maximus3 and v.marychenka pointed out in the thread, newer versions of the Symmetry theme (specifically from 7.3.0 onwards) have improved options for handling sold-out variants. You might not even need custom code!

The "Grey Out" and "Prune" Options

Symmetry themes now offer a default greying out option. Maximus3 shared some great screenshots illustrating this. To check if your theme has these options, follow these steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Click Customize on your current Symmetry theme.
3. Navigate to the Product Pages section.
4. Look for settings related to "Dynamic availability" or "Unavailable variants."

You might find an option to simply "grey out" unavailable variants, which is usually the default. Even better, some versions offer a "Prune" option. If you select "Prune," the sold-out variants will be completely hidden, removing them from the selection altogether. This is a fantastic, no-code solution if your goal is to reduce clutter and only show available options.

When You Need Custom CSS: Adding That "X"

If the built-in options don't give you that specific 'X' visual, or if you're on an older Symmetry theme version, custom CSS is your friend. Several community members offered solutions, and it's fascinating to see the slight differences and why they matter.

Important Prerequisites Before You Dive In

Before you paste any code, keep these crucial tips from the community in mind:

• Dynamic Availability Must Be "Show": Jowel-66 highlighted that in your Customize > Product Template > Main Product section, "Dynamic availability" must be set to "Show." If it's "Off," Symmetry actually disables all sold-out styling, and no custom CSS will work!
• Know Your Theme Version: As jowel-66 and v.marychenka mentioned, older Symmetry versions (pre-7.3.0) might use different code. You can find your version under Online Store > Themes, right below your theme's name.
• Backup Your Theme! This is non-negotiable. Always duplicate your theme before adding custom code. Go to Online Store > Themes, click "Actions" next to your theme, and select "Duplicate." This way, if anything goes awry, you can revert instantly. Shopify Support also won't troubleshoot custom forum code, so this is on you!
• Picker Style: The CSS provided often works best with the "Buttons" picker style, not "Dropdown."

The Ploqo Method (Original Contributor)

Ploqo kicked off the thread with a clear solution that worked for them. This code creates two diagonal lines to form an 'X' over the variant button.

Steps:

1. Go to Online Store > Themes.
2. Click Customize on your current theme.



3. Click the Theme settings icon (the gear icon) on the far left sidebar.



4. Click Custom CSS.



5. Paste this code at the end of the box:

.opt-btn.is-unavailable + .opt-label--btn {
  background-image:
    linear-gradient(to top right, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to top left, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)) !important;
}

6. Click Save.

The Maximus3 Alternative (A Simpler Cross)

Maximus3 offered a slightly different CSS snippet that creates a single diagonal line, often looking like a strikethrough. This might be a cleaner look for some stores.

Steps:

1. Follow steps 1-4 from Ploqo's method to get to the Custom CSS box.
2. Paste this code:

.opt-btn.is-unavailable + .opt-label {
  background: linear-gradient(
      135deg,
      transparent 47%,
      currentColor 48%,
      currentColor 52%,
      transparent 53%
    )
    no-repeat !important;
  background-size: 100% 100%;
  opacity: 0.5;
}

Jowel-66's Robust Solution (For Symmetry 8.3.1+)

Jowel-66 provided a very detailed explanation about why some codes might not work, specifically noting that in Symmetry, the `is-unavailable` class is on the *hidden radio input*, not directly on the visible button. The visible button (the `opt-label`) is *right after* it, so the CSS selector needs to use the adjacent sibling combinator (`+`). This is a common theme development nuance that can trip people up!

Their code targets the `::after` pseudo-element of the label, which is a more robust way to draw the lines without interfering with existing `background` properties. This code was tested on Symmetry 8.3.1.

Steps:

1. Follow steps 1-4 from Ploqo's method to get to the Custom CSS box.
2. Paste this code:

variant-picker:not(.variant-picker--pre-last-selection.variant-picker--product-available):not([data-availability=off]) .opt-btn.is-unavailable + .opt-label::after,
variant-picker:not([data-availability=off]) .option-selector[data-index="1"] .opt-btn.is-unavailable + .opt-label::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background:
linear-gradient(to top right, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
linear-gradient(to top left, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
}

You can change `1px` to make the 'X' lines thicker or thinner, giving you a bit more control over the visual. This version is quite specific and accounts for various states of the variant picker, making it very reliable for newer Symmetry themes.

So, there you have it! A few different approaches to tackle that 'sold-out' variant display in your Symmetry theme. The key takeaway from this community discussion is always to start with your theme's built-in options. If those don't quite hit the mark, then custom CSS, applied carefully (and after duplicating your theme!), can give you the exact look and feel you're after.

It's these kinds of real-world problems and community-driven solutions that make running a Shopify store so dynamic and rewarding. Keep experimenting, keep optimizing, and remember that even small visual tweaks can make a big difference in your customers' shopping experience. If you're still on the fence about where to launch your next big idea, a platform like Shopify makes customization like this possible, giving you the tools to create a truly unique shopping experience.