Swatchified Collection Section

Generate the Liquid, JavaScript, and CSS for a swatchified collection section that I can paste into my theme as a custom section — one that displays products from [COLLECTION_NAME] in a grid where each product card shows color variant swatches below the image. When a customer hovers over or clicks a swatch, the product card image should swap to show that variant’s featured image. The swatches should be small circles filled with the actual color (using variant option values mapped to hex colors via a [COLOR_MAP_METAFIELD] metafield or a hardcoded color map). Show a maximum of [MAX_SWATCHES] swatches per card, with a +N indicator if more exist. Each card should also include: product title, price (updating to the selected variant price), and an Add to Cart button. The grid should show [COLUMNS] columns on desktop. Add schema settings for the collection picker, columns, and max swatches. Generate the Liquid section, JavaScript for image/price swapping, and CSS.

Where to paste this: In Shopify admin, go to Online Store > Themes > Edit code, create a new file at sections/swatchified-collection.liquid, and paste in the generated Liquid, JavaScript, and CSS. If you’re using a color-map metafield, set that up first under Settings > Custom data > Products. Then add the section to a page via the theme customizer (Online Store > Themes > Customize > Add Section).