How to add color swatch on collection page for each product

Store Design

Topic summary

A user working with Shopify’s Dawn theme successfully added color swatches to product pages using a YouTube tutorial. They now want to extend this functionality to display color swatches below the price on collection pages as well.

Another participant confirmed that implementing color swatches on collection pages requires custom coding beyond the standard theme capabilities. They offered assistance with the custom coding work needed to achieve this feature.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

hi all,

I am using Dawn scheme. And I was able to add color swatch for my products in product page by following the instruction in the Youtube :https://www.youtube.com/watch?v=dYuaIn6ohkc (Pic1)

I also want to display color swatch below the price on collection page. (Pic2) Is it doable in Dawn scheme?

Pic1

jessica_0430_0-1716311961641.png
jessica_0430_0-1716311961641.png399×196 29.7 KB

Pic2

jessica_0430_1-1716311961522.png
jessica_0430_1-1716311961522.png285×399 31.1 KB

2

Hi @jessica_0430 ,

We do need to custom code for the color swatch.

Let me know if you need help with custom coding.

Thank you