Swatchified Collection Section

What This Sidekick Query Does

Create a swatchified collection section 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.

Expected Output

Tips to Improve Results