Shopify Variant Hiding Hiccup: Multi-Option Products Still Showing Unpublished Choices?

Hey there, fellow store owners! As a Shopify migration expert and someone who loves to dive deep into the community forums, I often come across really interesting discussions that highlight common challenges and clever solutions. Today, I want to talk about a recent thread that caught my eye regarding Shopify’s relatively new feature: the ability to unpublish individual product variants from your storefront.

On the surface, this feature is fantastic, right? It lets you quietly prepare new colorways, sizes, or styles before a big launch, or temporarily pull an option without deleting it entirely. Super useful for inventory management or just fine-tuning your product lineup. But, as one of our sharp-eyed community members, SherwinSB, pointed out, there’s a little hiccup when you’re dealing with products that have multiple options.

The Unexpected Strikethrough: When Hiding Variants Goes Awry

SherwinSB did a great job illustrating the issue. They noticed that for products with just one option (think a t-shirt that only comes in different colors: Red, Blue, Green), unpublishing a variant like 'Blue' works exactly as you’d expect. The 'Blue' option simply disappears from the product page, completely hidden from your customers. Take a look at the images SherwinSB shared to demonstrate this:

However, the behavior changes dramatically for products with multiple options, like 'Size' and 'Color'. Let’s say you have a product in Small, Medium, Large, and colors Red, Blue, Green. You want to prep a new 'Small/Blue' variant for a future launch, so you unpublish it. What happens? Instead of vanishing, the 'Blue' option for 'Small' still appears on your product page, but with a strikethrough. It’s essentially telling your customers, “Hey, this exists, but you can’t have it!” This isn't ideal when you're trying to keep things under wraps!

SherwinSB noted that the only way to get the variant to hide completely was to unpublish all variants under a specific option. So, if both 'Small/Red' and 'Small/Blue' were unpublished, then the entire 'Small' option would disappear. But that defeats the purpose if you just want to hide one specific combination!

This behavior, confirmed on the popular Dawn theme and others, is a real pain point for merchants. You don't want to prematurely reveal upcoming products or confuse customers with options they can't select. It impacts everything from marketing strategy to customer experience.

The Community's Quick Fix: A Touch of CSS

Thankfully, the Shopify community is always quick to jump in with solutions! Another member, liquidshop.co, chimed in with a helpful insight: this issue can be resolved with a small CSS trick. They explained that the strikethrough happens because of how Shopify handles variant combinations on the frontend; if a viable combination is *partially* available, it might still display the option but mark it as unavailable.

So, what does this mean for you? It means we can use custom CSS to override Shopify's default display behavior and ensure those unpublished variants are truly hidden.

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

While liquidshop.co offered to provide a specific CSS snippet for SherwinSB's store, the general approach is universal. Here’s how you can implement a similar fix on your own Shopify store:

1. Access Your Theme Code:
   • From your Shopify admin, go to Online Store > Themes.
   • Find the theme you want to edit (ideally, duplicate your live theme first to avoid breaking anything!).
   • Click Actions > Edit code.
2. Locate Your Stylesheet:
   • In the theme editor, look for a file like base.css, theme.css, style.css, or within the Assets folder, something like custom.css or sections-css.liquid. The exact name can vary by theme.
   • You can also create a new file under the Assets folder, for example, custom-fixes.css, and then link it in your theme.liquid file if you prefer to keep your custom code separate.
3. Identify the Element to Hide (Using Browser Developer Tools):
   • This is the crucial step. Go to your product page on the storefront where the strikethrough variant is visible.
   • Right-click on the strikethrough variant option (e.g., the 'Blue' button or label for the 'Small' size) and select Inspect (or Inspect Element).
   • In the developer console, you'll see the HTML structure. Look for the HTML element (e.g.,
   • ,
     , , ) that contains the variant name and has a class or attribute indicating it's unavailable or disabled (e.g., class="unavailable", class="disabled", aria-disabled="true").
   • You're looking for the most specific selector that targets *only* the element you want to hide.
4. Add Your Custom CSS:
   • Once you've identified the selector, add the following CSS to your chosen stylesheet file (e.g., base.css or a new custom-fixes.css). Remember to replace .your-specific-selector with what you found in the previous step.
   • A common pattern for variant selectors might look something like this, but you MUST verify this against your theme's actual HTML structure:

   • /* Hide unpublished variants on multi-option products */
     .product-form__input .variant-option.unavailable,
     .product-form__input .swatch-element.disabled,
     .product-form__input .selector-wrapper .option.unavailable {
       display: none !important;
     }
     

   • The !important flag is often needed to ensure your custom CSS overrides any existing theme styles.
5. Save and Test:
   • Save your changes and immediately check your product page on the storefront. The previously strikethrough variant should now be completely hidden.
   • Test different products and variant combinations to ensure everything works as expected.

It's a bit of a manual workaround, but it gives you back control over what your customers see. This kind of collaborative problem-solving is what makes the Shopify community so valuable. While we wait for Shopify to potentially refine this feature for multi-option products, a little CSS goes a long way!

Always remember to back up your theme before making any code changes. Happy customizing!