Strike through and greyout sold out variants on stilleto theme

Store Design
, , , , ,

Topic summary

A user wants to visually indicate sold-out product variants on their Stiletto theme store without requiring customers to click each option. Currently, the inventory counter only shows “out of stock” after selection.

Proposed Solution:

  • Modify theme code files (product-form.liquid or variant-picker.liquid) to add conditional logic that identifies sold-out variants
  • Apply a “sold-out” CSS class to variants with zero inventory
  • Add CSS styling for strikethrough text, grey color, reduced opacity, and disabled cursor
  • Optionally disable clicking on sold-out variants entirely

Implementation Steps:

  1. Edit theme code via Shopify Admin
  2. Add Liquid conditional logic checking variant.inventory_quantity <= 0
  3. Insert CSS rules targeting .variant-button.sold-out class
  4. Test changes in store preview

The discussion remains open for follow-up questions or refinements. A product page URL and screenshot were provided showing the current variant selector interface.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hello! I am trying to figure out how to put a strikethrough and grey out the sold out variants. Stilleto theme uses a inventory counter which is linked to the boxes. So when you press size 12 it just says out of stock but I want the customer to see what is out of stock without having to click on a variant

URL: https://www.anothergirl.co.uk/products/print-tie-back-mini-slip-dress?variant=44140577849578

Screenshot 2024-12-17 at 10.43.41.png
Screenshot 2024-12-17 at 10.43.41.png1324×1029 140 KB

2

Hi @gmedia

I get what you’re asking—you want your customers to immediately see which variants are sold out without clicking on each one. This is a good move for user experience, and here’s how you can make that happen.

1. Edit Your Theme Code

Since the Stiletto theme uses an inventory counter tied to the variant buttons, you’ll need to tweak your code. Here’s a quick walkthrough:

  • Go to your Shopify Admin > Online Store > Themes.
  • Find your Stiletto theme, click Actions > Edit code.
  • In the Snippets folder, look for a file named product-form.liquid, variant-picker.liquid, or something similar. If unsure, check your theme documentation.

2. Add Conditional Styling for Sold-Out Variants

Modify the code that generates the variant buttons to include a condition for inventory levels. You can use a class for sold-out variants and apply custom styling.

Add this inside the loop that renders the variants:

{% if variant.inventory_quantity <= 0 %}

{{ variant.title }}

{% else %}

{{ variant.title }}

{% endif %}

3. Apply CSS for Strikethrough and Greyed-Out Look

Now, add styles to make sold-out variants visually distinct. In your Assets > theme.css or theme.scss.liquid file, insert this:

.variant-button.sold-out {

text-decoration: line-through;

color: grey;

cursor: not-allowed;

opacity: 0.5;

}

4. Test Your Changes

Once you’ve updated the code, save it and preview your store. Check if the sold-out variants are now greyed out and have a strikethrough. You may need to adjust your CSS depending on your theme’s default styles.

5. Bonus: Automatically Disable Sold-Out Variants

To go a step further, you can set sold-out variants to be unclickable or add a tooltip that says “Sold Out.” This provides even more clarity for your customers.

If you try this and something doesn’t work or you’d like help refining it, let me know! I’d be happy to guide you further.

Best regards,
Daisy.