Shopify Symmetry Theme: Cross Out Sold-Out Variants with Custom CSS

Hey store owners!

One of the common questions that pops up in the Shopify community, especially from those using popular themes like Symmetry, is how to handle sold-out product variants. It’s not just about hiding them or making them a bit faded; sometimes, you really want to make it crystal clear to your customers that an option is gone, often by crossing it out. It’s a small visual detail, but it makes a big difference in user experience!

Recently, a store owner named mavricks brought this exact challenge to the community, asking how to get that distinct crossed-out “X” effect on sold-out variants in their Symmetry theme. They’d tried a few codes without success, which is totally understandable – theme customization can be tricky because even a tiny difference in class names or theme versions can throw things off. Let's dive into what the community uncovered and how you can achieve this look for your own store.

The Goal: From Faded to Crossed Out

The default behavior in many themes, including Symmetry, is often to simply fade out or grey out unavailable variants. While this signals unavailability, it sometimes lacks the definitive visual punch of a strikethrough. mavricks, and many others, were looking for something more explicit, like this transformation:

Before: Sold-Out Sizes Only Faded

After: Sold-Out Sizes Crossed Out

First, Check Your Theme's Built-in Options!

Before diving into custom code, it's always a good idea to check what your theme already offers. As Maximus3 and v.marychenka pointed out in the thread, newer versions of the Symmetry theme (specifically 7.3.0 and above) actually have some great built-in settings:

Greying Out: Many versions will automatically grey out unavailable variants.
"Prune" Option: You might find a setting to completely hide unavailable variants. This is often called "Prune" in the theme settings.
Automatic Cross-out: For certain swatch styles (like circle or square icons), Symmetry 8.3.1 demo, for example, already draws a diagonal line over sold-out swatches of the first option.

You can usually find these settings under Online Store > Themes > Customize > Product Pages or Theme settings > Swatches.

For hiding variants completely, look for the "Prune" option:

When Custom CSS is Your Best Friend

If your Symmetry theme version doesn't offer the exact visual you're after, or you want a specific style of cross-out, custom CSS is the way to go. This is where the community discussion really shined a light on the nuances.

The Key Insight: Selector Specificity

One of the most valuable contributions came from jowel-66, who explained why earlier codes might not have worked. In Symmetry, the is-unavailable class is applied to the hidden radio input, not directly to the visible button or label itself. The visible button (which is what you want to style) comes right after that hidden input. So, to target it correctly, you need a specific CSS selector: .opt-btn.is-unavailable + .opt-label.

This is a fantastic example of how theme developers structure their HTML and CSS, and why understanding that structure is crucial for customization.

Prerequisites for the Custom Code

Before you paste any code, ensure these settings are in place (as highlighted by jowel-66):

Dynamic Availability: Go to Customize > Product Template > Main Product Section. Ensure Dynamic availability is set to "Show". If it's "Off", Symmetry turns off all sold-out styling, and your CSS won't appear.
Picker Style: This code specifically works with the "Buttons" picker style, not "Dropdown".

Step-by-Step: Adding the Cross-Out Effect with Custom CSS

Ready to get that crisp "X"? Here’s how to implement the community-tested CSS:

Duplicate Your Theme First!
This is critical. Always duplicate your live theme before making any code changes. This way, if something goes wrong, you can quickly revert to your backup. Go to Online Store > Themes, find your current theme, click Actions > Duplicate.
Access Your Theme Editor:
Go to Online Store. Click Edit theme on your current (or duplicated) theme.

Navigate to Custom CSS:
Click the Theme settings icon on the far left (it looks like a gear or cog). Then, click Custom CSS.

Paste the CSS Code:
Add this code snippet at the very end of the Custom CSS box. This version, refined by jowel-66 and tested on Symmetry 8.3.1, is quite robust:

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));
}

Adjust Line Thickness (Optional):
In the code above, you'll see calc(50% - 1px) and calc(50% + 1px). Change the 1px value to make the cross-out lines thicker or thinner to match your store's aesthetic.
Save Your Changes:
Click Save in the top right corner.

An Alternative (Simpler) CSS Snippet

Maximus3 also provided a slightly different, simpler CSS snippet that might work for some Symmetry versions, especially if you want an added opacity effect. This one targets the .opt-label directly and also uses a linear-gradient for the strikethrough:

.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;
}

You'd paste this in the same Custom CSS section. The opacity: 0.5; line will make the entire variant option appear semi-transparent, in addition to the strikethrough.

Wrapping Up

It’s really cool to see how the community comes together to solve these specific design challenges. What might seem like a small visual tweak can significantly improve how customers interact with your products. Remember to always test your changes thoroughly on a duplicated theme, and don't hesitate to refer to your theme's official documentation for version-specific features. If you're ever stuck, the Shopify community is a fantastic resource, full of folks ready to lend a hand, just like they did for mavricks!

Shopify Symmetry Theme: Visually Crossing Out Unavailable Product Options