How to change colour of hyperlinks in Dawn Theme

Store Design

Topic summary

A user seeks to change all hyperlink colors from purple to grey (#a48484) across their Dawn theme website.

Solutions provided:

  • CSS method: Add custom CSS to the end of base.css file:

    a { color: #a48484; }

    This successfully resolved the issue for the original poster.

  • Theme settings method: Navigate to Online Store > Themes > Customize > Theme settings > Colors > Secondary colors to adjust link colors through the built-in interface. Note: This color also affects outline buttons.

Follow-up request:

The original poster asked how to add hover state functionality (changing links to #e1d0c7 on hover). Solution provided:

a:hover { color: #e1d0c7; }

Unresolved issue:

One user reported the CSS solution didn’t work for them, with no follow-up troubleshooting yet provided.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Hi,

Can anyone tell me how i change the colour of ALL hyperlinks that are throughout my website? They are all purple and i want to change these to grey #4a4848

thanks

URL: https://www.sandraleedesigns.com/pages/branding

2

@sandraleedesign - please add this css to the very end of your base.css file and check

a {
    color: #4a4848;
}

suyash1_0-1653205407328.png
suyash1_0-1653205407328.png1366×768 153 KB

3

Hi Sandra,

Please look for the option to edit the text links’ color when customizing your theme.

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme you want to edit, and then click Customize.

  3. Go to Theme settings > Colors > Secondary colors and change the color of the outline button. This color is also used for text links.

AvadaCommerce_0-1653211631995.png
AvadaCommerce_0-1653211631995.png337×403 11.6 KB

In this example, I use the DAWN theme so the location of this option might be different from that of your theme.

Hope it helps.

1 Like
4

YES!! This worked! Your so amazing. thank you so much… Is there a way to add onto that code to change to #e1d0c7 when you hover over the link?

5

@sandraleedesign - please add this code

a:hover { color: #e1d0c7; }
6

This doesn’t work for me, any ideas?