Hiding out-of-stock variants in Shopify’s Canopy theme, with focus on swatches and dropdowns.
• For color swatches, a CSS approach was shared to automatically hide items marked as unavailable and to visually highlight the selected swatch (stronger box-shadow). A sticky product gallery was added for desktop, then corrected on mobile with a media query to disable stickiness to prevent swatches overlapping the main image.
• For dropdown variant selectors, the out-of-stock options still appear. The suggested paths are: switch those variants to swatches so the CSS works, or edit the theme’s Liquid (Shopify’s templating language) to control rendering logic.
• A separate request seeks selectively hiding some out-of-stock variants (discontinued) while keeping others visible (restocking) on Symmetry. No direct in-thread solution; this likely requires Liquid-level conditions rather than CSS-only.
• A developer advises the most reliable method is Liquid edits at the collection/product rendering level (e.g., filtering by availability) and warns CSS-only solutions can leave visual gaps. They offer assistance via their “Hide Sold Variants” app.
Status: Partial resolution for Canopy swatches; dropdowns and selective hiding remain open, pointing to Liquid customization.
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file base.css or theme.css
Step 3: Add code
#clickyboxes-option-color li:has(.unavailable) {
display: none !important;
}
Hoping my solution helps you solve your problem.
Best regards,
Amelia | PageFly