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
aselector in CSS.- You can style link hover states separately using
a:hoverin 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
| Goal | Method |
|---|---|
| Change all link colors | Theme settings > Colors > Accent/Link, or CSS a {} |
| Change link hover color | CSS a:hover {} |
| Change links in page content only | CSS .rte a {} |
| Change navigation link color | Theme settings > Colors > Header, or CSS on nav selector |
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.
FAQ
Accent color is a broader theme color that controls multiple elements: links, primary button backgrounds, icon highlights, focus states. Link color (when exposed separately) controls only <a> tags. If your theme exposes both, link color overrides accent for links. If only accent is exposed, all those elements share one color.
In body content (product descriptions, blog posts, page text): yes. Underlines are the universal "this is a link" signal and aid accessibility. In navigation: no — context (hover state, position) signals the click affordance. Some modern brands underline-on-hover only for body links — works but slightly hurts skim readability.
No directly. Google doesn't rank based on link color. But low-contrast link colors hurt accessibility (WCAG), which is a soft ranking signal. Ensure links have at least 3:1 contrast against background and are visually distinguishable from surrounding body text — not just by color alone.
In Shopify themes that share an "accent" color across links and buttons, you need CSS to separate them: target a:not(.btn):not(.button) for links only. Easier path: describe what you want to Fudge ("change all body link colors to navy without affecting button colors") and it writes the right scoped CSS without you hunting for selectors. Some themes also offer separate button color controls — check Theme settings → Colors first.
Yes via section color schemes (modern themes) or CSS scoping. Each color scheme can define its own link color. Or scope CSS like .section-blog a { color: ... } to override link color in specific sections only. Useful for blog posts vs. product pages where context differs.
Related: Add a Link to Text in Shopify.
Related: Update Brand Colors in Shopify.