How to Remove Underline from Hyperlinks

Store Design

Topic summary

Removing hyperlink underlines in a Shopify theme. The requester wants underlines only on click, or otherwise removed entirely.

Proposed fix: Add custom CSS in Online Store > Themes > (three dots) Edit code > theme.liquid, placing it before the tag. This CSS sets text-decoration: none !important for links inside paragraphs and rich text blocks.

Scope and exclusions: The selector targets links within p and .rte (including p, ul, ol, table) while excluding heading-styled elements (.h1–.h6) and button classes (.button, .button-primary, .button-secondary), so buttons keep their styling.

Outcome: The provided CSS removes underlines completely; it does not add an underline only on click. No confirmation from the original poster yet. Screenshots are included for reference but are not essential to apply the change.

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

Hi everyone, is there any way to remove the underline from hyperlinks?
I’m looking for an underline that appears only when clicking the link. If that’s not possible, removing the underline completely is also fine.

Screenshot 2026-01-02 124325
Screenshot 2026-01-02 1243251833×577 130 KB

Thanks in advance.

1 Like
2

hey @naveen.raj
follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the ----->
before the body ----->
if this code work please do not forget to like and mark it solution

p:not(.h1,.h2,.h3,.h4,.h5,.h6) a:where(:not(.button,.button-primary,.button-secondary)), .rte :is(p,ul,ol,table):not(.h1,.h2,.h3,.h4,.h5,.h6) a:where(:not(.button,.button-primary,.button-secondary)) {
    text-decoration: none !important;
}

image
image1260×466 106 KB

1 Like
3

@naveen.raj

I hope you’re doing well!

  1. Go to ‘edit code’ in the theme you want
  2. Find the theme.liquid file
  3. at the very bottom, paste this:
<style>
p:not(.h1,.h2,.h3,.h4,.h5,.h6)
a:where(:not(.button-primary,.button-secondary,.button)),
.rte :is(p,ol,ul,table):not(.h1,.h2,.h3,.h4,.h5,.h6)
a:where(:not(.button-primary,.button-secondary,.button)) {
text-decoration: none!important;
}
</style>
1 Like
4

paste this in

a {
text-decoration: none;
}

a:hover,
a:focus {
text-decoration: underline;
}

this removes the underline normally, and only shows it when someone hovers or taps the link. On mobile, the underline usually appears briefly when the link is tapped, which is exactly the behavior most people expect.

1 Like
5

Thank you so much for your help :heart:

6

Thank you so much for your help. :heart:

7

Thank you so much for your help.

8

Hey @naveen.raj, Thank you for your reply