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.
Thank you so much, it’s working much better on the desktop end now. I’ve just had a look on the mobile site thought and there seems to be an issue where the swatches are going in front of the main image instead of behind, any idea how to fix this?
Thanks