Dawn theme collection page color swatch customization

Store Design
, , , , , , , , , ,

Topic summary

A user is experiencing two issues with custom color swatches on collection page product cards in the Dawn theme:

Mobile Display Problem:

  • Color swatches wrap onto two lines on mobile devices, creating an unappealing layout
  • User wants to convert swatches into a carousel format with hover-activated navigation arrows

Image Quality Issue:

  • When clicking on a color swatch, the displayed product image appears low quality/blurry
  • User seeks a solution to improve image clarity

A respondent suggested removing the background GIF image from the swatches and using only background colors instead, which may address the quality concern.

Status: The discussion remains open with only a partial solution proposed for the image quality issue; the carousel/mobile layout request has not yet been addressed.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

I’m using the latest version of the Dawn theme. I added custom code for a color swatch on the collection page product card with the help of support. It works well on desktop, but the swatches in mobile appear in two lines, which doesn’t look nice. I want to convert the color swatches into a carousel with small arrows on hover. Additionally, when clicking on a color, the image quality becomes low. How can I improve the image clarity?

Screenshot 2024-12-12 184200.png
Screenshot 2024-12-12 184200.png425×277 55.8 KB

Website : https://mannavan.myshopify.com/

password: offnorth

Thanks in advance

2

Hello @Sivadarshan

image
image1920×897 170 KB

Remove the background image (GIF) and set the swatch to use only a background color