Shop Now Buttons

Technical Q&A
1

I’ve just moved to Dawn from Refresh because my sidekick told me it would be better for my store. I can’t make the buttons a solid colour. I’ve selected the colours in the settings as solid colours, but it’s only coming out as an outline with the wrong font colour. I know I’m missing something simple, but I can’t find it. Thank you

2

Hi there,

Don’t worry, you’re not alone! This is something that often comes up when switching between themes because each theme handles button styles a little differently. In Dawn, buttons are usually styled as “outline” by default unless you update both the Button style and the Accent color settings.

Here’s what you can try:

Go to Online Store > Themes > Customize.

In the left panel, select Theme Settings > Buttons.

Make sure the Button style is set to “Solid” instead of “Outline.”

Double-check the Accent 1 or Accent 2 colors under Theme Settings, since these control the background and font color for solid buttons in Dawn.

If it still doesn’t look right, you may need a small CSS tweak to override the default style — and that’s totally normal with Dawn.

3

Hi @teresab

In the Dawn theme, buttons often default to the “secondary” style (outline) instead of the “primary” style (solid fill). That’s why even though you’ve set solid colors in your theme settings, they may still appear as outlines with the wrong font color.

Here are a few steps to fix it:

  1. Check Button Style in Customizer

    • Go to Online Store > Themes > Customize.
    • Select the section where your button appears.
    • Many blocks (like “Button” or “Call to Action”) have a setting for button style (Primary, Secondary, or Tertiary).
    • Change it to Primary — this will apply your solid color settings.

  2. Check Theme Settings

    • In the theme editor, go to Theme Settings > Colors.
    • Ensure you’ve set a solid background color for “Primary button” and a readable text color for “Primary button label.”

  3. Add CSS (if needed)
    If some buttons don’t offer a style switch, you can force them with custom CSS:

    .button,
.button--primary {
  background-color: var(--color-button);
  color: var(--color-button-text);
  border: none;
}

    Add this in Online Store > Themes > Edit code > base.css (or theme.css depending on your version).

Once you switch to the Primary style (or override with CSS), your buttons should appear as solid colors with the correct font color.

Would you like me to write a ready-to-use CSS snippet that forces all buttons across your store to use the solid primary color style?

Kindly feel free to get back to me if you need any further assistance.
If helpful, please like and accept the solution. :white_check_mark: