How to Remove Underline on Links from Footer Text (not in menu)

Store Design
, , ,

Topic summary

Goal: Remove the underline styling from links in the footerā€™s text blocks (e.g., Location), without affecting menu links, while keeping links functional. Store URL was provided.

Proposed solutions:

  • Broad footer rule: Add CSS at the end of theme.css and/or base.css:
    .footer__block a { text-decoration: unset !important; background: unset !important; }
    Steps given: Online Store ā†’ Themes ā†’ Edit code ā†’ locate theme.css/base.css ā†’ paste and save.

  • More targeted rule for text blocks (RTE content): Add CSS in the same CSS file:
    .footer__block.footer__blockā€“text .rte a { background: none !important; }
    Rationale: Some themes render ā€œunderlinesā€ via background styles; removing the background clears the underline. A screenshot showing the result was provided.

Context notes:

  • A helper requested the store URL/password if protected; the URL was shared.
  • Images were included to illustrate the outcome of the targeted CSS.

Status: No confirmation from the original poster on which solution worked. Discussion remains open.

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

Hi there - how can I remove the underline in links in text fields in the footer (not menus)? I would like to remove the underlines in the Location section of my footer, while still linking to store pages and telephone numbers. Any help will be appreciated!

https://www.springersjewelers.com/

Screen Shot 2024-12-17 at 4.30.50 PM.png
Screen Shot 2024-12-17 at 4.30.50 PM.png3415Ɨ1088 219 KB

1 Like
2

Hi @hannahspringers

Can you pleas share you store URL and password if its a password protected so I can help you out

3

Here you go -

https://www.springersjewelers.com/

4

Just follow the steps Below:

  1. Go to online store ā†’ theme
  2. select three dots and select code edit
  3. Search for the file theme.css and base.css
  4. past that code at the end
.footer__block a {
    text-decoration: unset !important;
    background: unset !important;
}ā€‹

I hope this solution worked for you!
if Yes Just like this Reply and Mark it as a Solution and to keep me motivated BUY ME A Coffee

5

Hi @hannahspringers

Try this one.

  1. From your Shopify admin dashboard, click on ā€œOnline Storeā€ and then ā€œThemesā€.
  2. Find the theme that you want to edit and click on ā€œActionsā€ and then ā€œEdit codeā€.
  3. In the ā€œAssetsā€ folder, click on ā€œbase.css, style.css or theme.cssā€ file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.footer__block.footer__block--text .rte a {
    background: none !important;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

6

Welcome! Would you mind hitting ā€˜likeā€™ as well? Thanks!