Changing Colour of Hyperlink text in Impulse Theme (no option in theme editor)

Store Design

Topic summary

Goal: Change hyperlink color in the Impulse theme without a built-in theme setting.

What worked (site-wide):

  • Adding CSS at the bottom of the theme stylesheet (theme.scss.css or theme.css.liquid) with:
    • .text-link, a { color: #bd2030 !important; }
    • a.btn { color: #fff !important; }
  • This successfully changed link colors globally, confirmed by multiple users.

Attempt to scope to product pages:

  • Suggested CSS using the template body class:
    • .template-product .text-link, .template-product a { color: #bd2030 !important; }
    • .template-product a.btn { color: #fff !important; }
  • Reported outcome: still affected all links on the page, indicating selectors may be too broad or the theme’s structure/classes differ.

Theme file locations:

  • Some users don’t have theme.scss.css; changes worked when placed in theme.css.liquid.

Open issues:

  • Need a method to change link color only in specific areas (e.g., product descriptions or text blocks) without affecting main menu or product names.
  • A more targeted selector strategy (e.g., scoping to content containers) is needed; no final solution provided yet.

Status: Partially resolved (global change works); selective scoping remains unresolved.

Summarized with AI on February 2. AI used: gpt-5.
1

Hello

I am using the Impulse theme and unfortunately, there does not appear to be a setting in the theme settings to change the hyperlink colour. There’s options for just about everything else.

I have found the following code in the theme.ccs.liquid file but none of the changes I make work:

.text-link,a{
color:{{ settings.color_body_text | default: “#1c1d1d” }};
color:var(–colorTextBody);
text-decoration:none;
background:transparent
}

.text-link:hover,a:hover{
color:{{ settings.color_body_text | default: “#1c1d1d” }};
color:var(–colorTextBody);
}

.text-link{
display:inline;
border:0 none;
background:none;
padding:0;
margin:0;
}

At the moment, I am using HTML to change the link colours on my product pages but I’d like to apply a site-wide solution.

Site: https://www.atomiccherry.com.au/collections/womens-pants-trousers-jeans/products/hell-bunny-wither-tartan-50s-retro-trousers-mustard

The last ‘Officewear’ link has no colour formatting.

Thanks and regards,

Carolyn

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
.text-link, a {
color: #bd2030 !important;
}
a.btn {
color: #fff !important;
}
1 Like
3

Hello

That worked. Thank you so much.

Is there a way to only apply this code to the product page?

Cheers

Carolyn

1 Like
4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
.template-product .text-link, .template-product a {
color: #bd2030 !important;
}
.template-product a.btn {
color: #fff !important;
}
5

Thank you. Unfortunately, it’s still changing all links on the page (not just the product template).

6

My store (with the impulse theme) doesn’t seem to have theme.scss.css. Any idea how to modify this?

7

It worked for me in theme.css.liquid, however as Atomiccherry reported, this changes link colors globally, overriding your theme’s color choices.

8

Is there a way to do this without it overriding the main menu colours etc? I was hoping for a way to have hyperlinks in text blocks in a different colour, but not the changing hyperlinks in main menu or product names etc on the home page.