How to change color of Variant buttons in Dawn theme

Store Design

Topic summary

Goal: Change Dawn theme variant (size) button color without affecting global secondary color.

  • Resolution: Edit assets/section-main-product.css and hard‑code the variant button style to the desired color on the product page.

  • A more robust approach is to add a Theme Settings control for this color, but it requires coding; hiring a developer was suggested (≈30 minutes).

  • Follow‑up fix: To remove the visible black border, set the border color to match the background (e.g., border-color: #eeeeee;).

  • Visuals: Shared screenshots indicate the exact UI element and the CSS line to modify; these are central to locating the change.

  • Open items: Later participants asked how to change the sale badge color independently and adjust variant color button backgrounds (e.g., grey/pink vs default blue).

  • An additional request sought an updated solution; no replies yet to these newer questions.

Status: The original issue was solved via CSS edits; subsequent questions remain unanswered/ongoing.

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

I am using the Dawn theme and I changed the accent 1 color to our custom color. That changed most button colors to what we like but we want to also change the size buttons color to this custom color. If I try to change the secondary color to our custom color the whole store button and link color changes we just want to change the variant button color. Is that possible?

Thanks

2

If you mean changing this place on product page

Quyen_Beo_1-1648658681797.png
Quyen_Beo_1-1648658681797.png525×494 9.24 KB

you need to go to assets/section-main-product.css and ‘hard code’ the style of this line to the color you want

Quyen_Beo_0-1648658653791.png
Quyen_Beo_0-1648658653791.png1259×863 77.9 KB

Better solution is adding a setting to Theme Setting so we can manage the color from backend. But if you are not familiar with code, you should hide a developer to do it. It just take about 30 mins

1 Like
3

Thanks, it worked. Also, I wanted to ask How can I remove the black border from it

4

No need to remove it, just need to make it become same color with the background.

You can add this line of code right below the background color line

border-color: #eeeeee;
5

sale button.JPG
sale button.JPG556×800 47.2 KB

  1. Hi how can i change the sale badge colour to red instead of blue without changing all buttons?

  2. How can I change the variant colour button background and change chrome button to grey and pink to pink instead of the baseline blue colour which is the theme?

6

Hi there. Can you please provide updated solution for this issue?