Variant sold out display in Capital Theme

Technical Q&A

Topic summary

A user is attempting to display sold-out status for size variants in Shopify’s Capital theme but cannot successfully target unavailable variants with CSS despite trying multiple solutions from forums and search results.

Current Issue:

  • Unable to apply styling (likely graying out or visual indicators) to sold-out size variants
  • Existing code snippets and forum solutions haven’t resolved the problem

Suggested Solution:

  • Custom development may be required
  • Proposed approach: detect variant clicks, check corresponding stock levels, and display “sold out” when inventory equals zero

Status: The discussion remains open with no definitive solution implemented yet. The challenge involves integrating real-time inventory data with front-end variant display logic.

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

I have tried numerous things from google search and forum codes, etc, updated code and reviewed forums but can’t target a size variant when sold out to then add css to show it’s out of stock.

Here’s an example page: https://basement.nz/collections/shop-new-balance/products/new-balance-550-white-grey

Thanks in advance.

2

It may be that you need to custom develop this function.

Click on the variant, get the corresponding stock, then go to display the stock and if the stock is 0, show sold out