Can I mark sold out sizes with an X on my website?

Store Design
, ,

Topic summary

A user wants to display an “X” mark over sold-out size options (S, M, L, XL, XXL) on their Shopify product pages, similar to examples shown in screenshots.

Proposed Solution:
Another participant suggests adding custom Liquid code to the product template:

  • Loop through product variants to check availability
  • Add a “cross-mark” class to unavailable variants
  • Style the class with CSS to display an “X” using the ::before pseudo-element with absolute positioning

Implementation Challenges:

  • The original poster struggles with where exactly to place the code in their theme files
  • They have 200+ products and need a solution that applies site-wide, not per-product
  • Discussion focuses on locating the correct file (main-product.liquid) and finding the input type=“radio” element where variant options load

Current Status:
The conversation remains unresolved—the user cannot locate the specific code element (input type=“radio”) needed to implement the suggested solution.

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

that doesnt mean to put on every product that codes ? i have 200+ products, we cannot find a solution to put it in the theme codes ?