How to Change Link Color in Shopify (2026)

Key takeaways

• Many themes have an “Accent” or “Link” color in Theme Editor > Theme settings > Colors.
• If your theme doesn’t have a dedicated link color setting, target the a selector in CSS.
• You can style link hover states separately using a:hover in CSS.
• Fudge can make link color changes from a plain English description if you’d rather not write CSS.

To change link color in Shopify, go to Online Store → Themes → Customize → Theme settings → Colors and edit the Link or Accent swatch. If your theme has none, or accent also colors your buttons, add a { color: #yourcolor; } in Theme settings → Custom CSS.

Why you can trust us

We’ve built and customised hundreds of Shopify storefronts. We also build Fudge, the AI operator for Shopify stores, with a 4.9 rating on the Shopify App Store.

Method 1 - Check Theme settings > Colors first

Many modern Shopify themes include a dedicated color setting for links.

Step 1. Go to Online Store > Themes > Customize.

Step 2. Click Theme settings in the left sidebar.

Step 3. Open the Colors section.

Step 4. Look for a swatch labeled Link, Accent, or Primary accent. If it exists, click it to change the color.

Step 5. Click Save.

What “accent” color usually controls

In themes that use an accent color rather than a specific link color, the accent color typically affects:

• Hyperlink text
• Button backgrounds (primary buttons)
• Icon highlights
• Active navigation items

Changing the accent color changes all of these at once. If you only want to change links - not buttons - you’ll need CSS.

To change your brand palette as a whole, see Update Brand Colors in Shopify.

Method 2 - Change link color with CSS

If your theme doesn’t have a dedicated link color in the Theme Editor, or if you want link color separate from button color, CSS is the way to go.

Step 1. Go to Online Store > Themes > Customize > Theme settings > Custom CSS.

Step 2. Paste the rules below and click Save:

/* Default link color */
a {
    color: #1a4b8c;
}

/* Link hover color */
a:hover {
    color: #0d2e5e;
}

/* Links inside a specific area only */
.rte a {
    color: #1a4b8c;
}

If your theme has no Custom CSS setting, edit the stylesheet on a copy instead. Duplicate your theme (the three-dot menu (…) next to your theme, then Duplicate). On the copy, open the three-dot menu (…), then Edit code, open Assets > base.css (or your theme’s main stylesheet - look for the largest .css file in the Assets folder), add the same rules at the bottom and click Save. Preview the copy, then publish it.

The .rte class

In many Shopify themes, content from the Pages editor and product descriptions is wrapped in a class called .rte (rich text editor). Using .rte a as your selector targets only links in those content areas, without affecting navigation links or button text.

For theme-wide colors and fonts, see Update Colors and Fonts in Shopify.

Styling link underlines

By default, links in most themes are either always underlined or never underlined. You can control this with CSS:

/* Remove underlines from all links */
a {
    text-decoration: none;
}

/* Add underlines only on hover */
a:hover {
    text-decoration: underline;
}

/* Underline only links in body content */
.rte a {
    text-decoration: underline;
}

To add new links in the first place, see Add a Link to Text in Shopify.

Changing navigation link color

Navigation links are styled separately from body links in most themes.

In the Theme Editor, check Theme settings > Colors for a Navigation or Header color option.

If that doesn’t exist, target the nav links in CSS. Right-click a nav link in your browser, choose Inspect, and note the CSS class names. Then add a rule like:

.header__menu-item a {
    color: #333333;
}

The exact class name varies by theme.

Using Fudge for link color changes

If writing CSS isn’t your preference, Fudge’s store editor handles this well. Describe what you want:

“Change all hyperlink colors to #1a4b8c. On hover, darken to #0d2e5e.”

“Make links in product descriptions underlined and blue.”

Fudge writes the CSS and applies it as a draft. You review before it goes live, and if the new color doesn’t work out, you can roll the change back in one click.

For text color beyond links, see Change Font Color in Shopify.

Quick reference

How do I change the image that shows when sharing a Shopify link on social media?

That’s a different setting from link color: it’s your Open Graph (OG) image. To change the image that appears when your store URL is shared on Facebook, Twitter, or iMessage, go to Online Store → Preferences → Social sharing image and upload your preferred image. Individual product and collection pages use their featured image by default. Shopify’s search engine listing section has no image field, so a custom OG image for a single page needs a metafield plus a theme edit. This is unrelated to hyperlink color on your store.

FAQ