Dawn Theme: Display Native Variant Swatches on Collection Page, Home Page and Search Page/Results

Store Design
, , ,

Topic summary

Goal: Show native Shopify variant swatches (the visual selectors for product options like color/size) on collection, home, and search results pages via simple theme code changes; no apps.

Context: Dawn theme natively displays swatches only on the product page. Screenshots (Skims as reference) were provided to illustrate the desired placement; images are central for the visual expectation.

Proposed approach: Add custom code in card-product.liquid to render swatches, by declaring/including product-variant-picker.liquid within the product card and customizing it so variants appear beneath each product.

Clarification needed: Exact code snippet and where to paste it in the latest Dawn version (file locations and modifications) were requested by the original poster.

Status: No implementation details or code provided yet. The thread is open with an unresolved key question: the specific code and insertion points required to enable native variant swatches on non-product pages in Dawn.

Summarized with AI on December 13. AI used: gpt-5.
1

Hi everyone

We would like to display the Shopify Native Variant Swatches for each of our products on the Collection Page, Home Page and Search Results Page at the bottom (see pictures). It is a little disappointing Shopify doesn’t offer this as a standard theme input for this and only display variant swatches on the Product Page.

PLEASE NO APPS. We are after a simple code edit to to display the Shopify Native Variant Swatches

I have used Skims as an example to show what we are looking for. Please note: We would like to display the Native Shopify Variant Swatches.

Screenshot 2024-11-27 at 11.48.04 pm.png
Screenshot 2024-11-27 at 11.48.04 pm.png3246×1718 312 KB

Screenshot 2024-11-27 at 11.48.21 pm.png
Screenshot 2024-11-27 at 11.48.21 pm.png3244×1846 445 KB

2

Hi @ToniMelbourne ,

This will require adding custom code to the card-product.liquid file.

If you have experience with code, you can learn and add product-variant-picker.liquid file declaration to card-product.liquid file and customize some code, it will display well.

I hope it helps!

3

Hi Namphan

Would you be able to provide the code and where we would have to paste this code in the card-product.liquid?

It is for the latest Dawn Theme