Strike through and greyout sold out variants on stilleto theme

[gmedia]

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

 

[DaisyVo]

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 %}

  <button class="variant-button sold-out" disabled>{{ variant.title }}</button>

{% else %}

  <button class="variant-button">{{ variant.title }}</button>

{% 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.