Removing Underline Text Decoration from Links Throughout Website

Shopify Discussion

Topic summary

Goal: Reverse link styling in a Shopify Impact theme so links are not underlined by default and show an underline on hover. The original CSS (text-decoration: none on a and pseudo-states) did not take effect.

Key approaches discussed:

  • Injecting custom CSS in theme.liquid above the tag, with a screenshot of the outcome. Details of the exact CSS were not provided in the post.
  • Adding .reversed-link { background: none !important; } to theme.css, which does not directly address underline behavior.
  • Creating a dedicated custom-styles snippet with CSS to remove underlines normally and add them on hover, then including it via {% render ‘custom-styles’ %} in theme.liquid. A video demonstrated the steps; header links already behaved correctly, and the fix targeted body links.

Outcome: The snippet-and-include method worked quickly and solved the issue; the thread is resolved.

Notes and terms:

  • theme.liquid: the main layout file where site-wide assets/styles are included.
  • Snippet: a reusable Liquid file for injecting custom styles or code.
  • text-decoration: the CSS property controlling link underlines.

Media: Screenshots and a video were central to illustrating the implementation and result.

Summarized with AI on December 20. AI used: gpt-5.
1

Hello!

I am using the Impact Theme, and with this theme, all links are underlined and the underline disappears on hover. I would like to reverse this effect, to have the link text appear normal and without an underline, and for the underline to appear on hover. I’ve tried adding the following CSS to the bottom of the theme.CSS Theme Editor, but nothing changes:

a { text-decoration: none !important; }

a:hover, a:visited, a:link, a:active
{ text-decoration: none; !important; }

Here is the link to my site: https://bambooliving.com/

If anyone is able to offer a solution, I’d love to hear it. Thank you in advance!

2 Likes
2

Hi @HannaSak ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1725504388399.png
BSSCommerceHDL_0-1725504388399.png1897×514 143 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

Hi @HannaSak ,

To remove the underline for all a tags please do the following:

  1. Go to Online Store > Themes.
    Click on Actions next to your theme and select Edit code.

2.Search file theme.css and add this below code at the bottom:

.reversed-link {
background: none !important;
}

3.Save the changes and check the button.

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

4

Hi @HannaSak ,

Thanks for sharing your store URL, I have checked your store, and I noticed the links on your header navigations are looking as expected and the animation/ hover effect only shows when we hover over the text but on the other parts (body) of the website it’s not working as expected.

To remove the animation/ hover effect on the link text when appearing normally and show the animation only when the link text is hovered, kindly follow the steps outlined below:

  1. Open the code editor, as shown in the screenshot below.

swym_0-1725516777910.png
swym_0-1725516777910.png999×417 191 KB

  1. Create a snippet called ‘custom-styles’ and add the below code:
  1. Include the ‘custom-styles.liquid’ file in your “theme.liquid” file.
    Add the following include code to your theme.liquid file.
{% render 'custom-styles' %}

It would look something like below:

swym_1-1725516854328.png
swym_1-1725516854328.png998×570 166 KB

  1. Done? Now save the file, and try previewing to confirm if the changes work for you. In the reference above, it looks like something as shown in the video.

I hope this helps!

Regards,
Abhishek from Swym

1 Like
5

This worked like a charm and it only took me 5 minutes to make this change! Thank you so much for the detailed instructions and even including a video! Extremely helpful.

1 Like