i have broke something
Topic summary
Goal: Show clickable size variants under product images on collection/product grids (Dawn theme), linking to the product page. Color variants were kept but not displayed as pills.
Implementation: Added size “pills” via Liquid in card-product.liquid and CSS for .ancvariants. Initial CSS placed in featured-collection.liquid, later moved to base.css. Minor layout tweak in component-card.css (bottom changed to 35px).
Fixes/iterations: Addressed issues where styles applied only to the last row and some sizes (e.g., S) were missing. Revised Liquid to build a comma-delimited list of size options, then iterate variants to print unique sizes reliably.
Styling updates: Added hover effects, border radius, reduced font/box sizing, and an .outstock class to grey out and strike through unavailable sizes. Adjusted spacing by setting card__information padding-bottom to 0 and refining gaps.
Mobile: Resolved oversized boxes and overlapping by adding flex-wrap, smaller padding in a media query, left alignment, and margin-bottom.
Outcome: Original request functionally achieved with refined layout and mobile responsiveness. OP expressed thanks. Subsequent posts asked for similar implementation on another store and guidance on where to add code; helper confirmed it’s possible and invited follow-up (no final code shared for those yet).
