Shopify Variants: The Multi-Option Mystery – Hiding Unpublished Variants Explained

Hey there, fellow store owners! As someone who spends a lot of time diving deep into the Shopify ecosystem and listening to what\'s buzzing in the community, I recently stumbled upon a really interesting discussion that I just had to share. It\'s about a feature many of us have been looking forward to, but with a bit of a twist when it comes to multi-option products.

Shopify recently rolled out the ability to publish or unpublish individual variants directly from your admin. This is a game-changer, right? Think about it: you can prep new colorways or sizes without them going live, or temporarily pull an option without deleting it entirely. Super useful for managing inventory and launches. But, as one sharp community member, SherwinSB, pointed out, this new feature isn\'t behaving quite as expected across the board.

The Curious Case of the Strikethrough Variant

SherwinSB did some excellent testing and found something peculiar. When you have a product with a single option (like just "Color: Red, Blue, Green"), and you unpublish the \'Blue\' variant, it works exactly as you\'d hope. Poof! It\'s hidden from the product page, completely invisible to your customers.

However, the story changes for products with multiple options (think Size + Color). If you\'re trying to quietly prep a new 'Blue' colorway for your 'Small' size, you\'d expect to unpublish the 'Small/Blue' variant and have it vanish. Instead, it still pops up on the product page, but with a strikethrough! It\'s like your store is whispering, "Psst, this exists, but you can\'t have it yet!" Not exactly the stealthy prep work we were hoping for, right?

SherwinSB found that to hide the 'Blue' option completely under 'Small', they had to unpublish all variants under 'Small' (e.g., 'Small/Red' and 'Small/Blue'). This makes the entire 'Small' option disappear, which isn\'t useful if you only want to hide a specific color in that size.

This behavior is consistent across themes, as SherwinSB confirmed it on Dawn and other themes. So, what\'s going on?

Why the Strikethrough? The 'Viable Combination' Factor

Another helpful community member, liquidshop.co, chimed in with a great insight. The issue arises "because of the combination of variants when a viable combination is available, it still displays the variant but with a strikethrough." Basically, if you have 'Small/Red' published and 'Small/Blue' unpublished, the 'Small' size is still a viable option. When a customer selects 'Small', the theme then tries to show all available colors for 'Small'. Since 'Blue' exists but is unpublished, it gets styled with a strikethrough instead of being completely removed from the selection options.

This makes sense from a technical standpoint: the underlying option value is still there, just marked as unavailable. But for store owners, it\'s a bit of a missed opportunity for a clean, controlled storefront experience.

The Solution: A Little CSS Magic

So, how do we get those unpublished variants to disappear entirely, even on multi-option products? liquidshop.co suggested a "small CSS trick." While they offered to provide a specific snippet after seeing a store URL (which is always best for precise theme customization), we can outline a general approach that should work for most modern Shopify themes like Dawn.

The goal is to target the HTML elements that represent these unavailable variant options and simply tell them to hide. Here\'s how you can typically do it:

Step-by-Step: Hiding Unpublished Variants with Custom CSS

1. Access Your Theme Code:
   • From your Shopify admin, go to Online Store > Themes.
   • Find your current theme and click Actions > Edit code.
2. Locate Your Main Stylesheet:
   • In the \'Assets\' folder, look for files like base.css, theme.css, styles.css, or component-product-form.css. It varies by theme, but you\'re looking for the main CSS file that controls the styling of your product pages.
3. Add Your Custom CSS:
   • Scroll to the very bottom of the chosen CSS file (or create a new snippet file if you\'re comfortable with that, then import it).
   • Add a CSS rule that targets variant options marked as unavailable. The exact selector will depend on your theme\'s HTML structure. Shopify themes often use classes like .unavailable or .disabled, or attributes on the variant option elements when they can\'t be selected.
   • A common pattern to look for might involve an input or label element for the variant option that has a disabled attribute or an unavailable class.
   • Here\'s a conceptual example. Remember: you might need to inspect your product page\'s HTML to find the exact class/attribute your theme uses for unavailable options.

\/* Custom CSS to hide unpublished variants *\/

\/* Target variant option elements that are marked as unavailable or disabled *\/

\/* This example assumes your theme adds a \'disabled\' attribute to the input

or a \'unavailable\' class to the label\/button for unpublished options. *\/



.product-form__input--radio[disabled] + label, \/* For radio buttons *\/

.product-form__input--button[disabled], \/* For button-like selectors *\/

.product-form__input--dropdown option[disabled], \/* For dropdown options *\/

.variant-option-label.unavailable, \/* If your theme uses an 'unavailable' class on the label *\/

.variant-option-button.unavailable { \/* If your theme uses an 'unavailable' class on a button *\/

  display: none !important;

}

4. Save Your Changes: Click "Save" and then check your product page to see if the unpublished variants are now completely hidden. Clear your browser cache if you don\'t see changes immediately.

Important Considerations for Your CSS Fix

• Theme Specificity: The CSS selectors (e.g., .product-form__input--radio[disabled]) are highly dependent on your theme\'s HTML structure. If the snippet above doesn\'t work, you\'ll need to use your browser\'s developer tools (right-click -> Inspect) to identify the correct classes or attributes applied to the unavailable variant options on your specific theme.
• Future Theme Updates: Be aware that theme updates could potentially override or break custom CSS. It\'s a good practice to test after any major theme update.

It\'s fantastic to see the community collaborating to find solutions like this. While Shopify\'s new variant publishing feature is incredibly useful, these small discrepancies in how it handles multi-option products can be a real headache. A little custom CSS, informed by community wisdom, can go a long way in ensuring your storefront always looks exactly as you intend. Keep an eye on those forums; you never know what clever workaround you\'ll find next!