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.

Link color is one of those settings that some themes expose directly and others bury in code. Here’s where to look, and how to fix it either way.

Why you can trust us

We’ve built and customised hundreds of Shopify storefronts. We also built Fudge - an AI storefront editor with a 5.0 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.

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. Duplicate your theme. Go to Online Store > Themes > Actions > Duplicate.

Step 2. On your active theme, go to Actions > Edit code.

Step 3. Open Assets > base.css (or your theme’s main stylesheet - look for the largest .css file in the Assets folder).

Step 4. Add CSS rules at the bottom of the file:

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

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

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

Step 5. Click Save.

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.

Related: 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; }

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 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.

Related: 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 own first image by default. To customise per-page OG images, edit the SEO section of each page. This is unrelated to hyperlink color on your store.

Related: Add a Link to Text in Shopify.

Related: Update Brand Colors in Shopify.