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.
6

Hi @Xakhil

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

variant-selects label.swatch-input__label {
    width: 40px !important;
    height: 40px !important;
}
variant-selects label.swatch-input__label span.swatch {
    width: 38px !important;
    height: 38px !important;
}

image (17).png
image (17).png1429×727 178 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

1 Like