Color swatch size - Dawn theme

Store Design
,

Topic summary

Goal: Make product color swatches larger in the Shopify Dawn theme for better visibility on mobile and desktop.

What changed: Custom CSS was provided to increase swatch size. It initially didn’t apply when added via Theme settings > Custom CSS. Moving the CSS into the theme code made it work.

Working solution:

  • Go to Online store > Edit code > open theme.liquid.
  • Insert CSS between {% style %} and {% endstyle %} just above .
  • CSS targets:
    • variant-selects label.swatch-input__label { width/height (e.g., 40px) }
    • variant-selects label.swatch-input__label span.swatch { width/height slightly smaller (e.g., 38px) }
  • Adjust the numeric values (e.g., increase to 100px) to further enlarge the swatches.

Notes: A misplacement of the code briefly caused an unintended section to appear at the top; correcting the placement resolved it. Only one product (a jacket) currently uses color swatches, which helped verify changes. Instructions included screenshots/links that were central to implementation.

Status: Resolved. Swatch size successfully increased; further size tweaks can be done by editing the pixel values in the added CSS.

Summarized with AI on December 14. AI used: gpt-5.
16

@DaisyVo Thank you it worked.