How to change only the footer link color in the liquid file?

Store Design

Topic summary

Goal: change only the footer link color without affecting sitewide styles.

Key update: A CSS-based solution was provided to target the footer specifically, added via the theme’s stylesheet rather than editing footer.liquid.

Steps:

  • Navigate to Online Store → Theme → Edit code.
  • Open Assets → layout.theme.css.
  • Paste at the bottom:
    #shopify-section-footer a, #shopify-section-footer a:hover { color: #fff !important; }

Details:

  • The selector #shopify-section-footer targets the footer section ID, ensuring changes apply only to footer links.
  • a and a:hover set both default and hover states to white (#fff).
  • !important forces the rule to override broader sitewide styles.

Outcome: The user confirmed it worked and expressed thanks. The discussion appears resolved.

Note: The code snippet is central to understanding the solution.

Summarized with AI on February 21. AI used: gpt-5.
1

Code for footer URL link color ONLY? Do I add something to the footer.liquid file? I know I can do it sitewide (footer & header nav) via theme-custom.css.liquid.

2

Hi @lanakcustomflag ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

Thanks

4

Hi @lanakcustomflag ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/layout.theme.css->paste below code at the bottom of the file:
#shopify-section-footer a, #shopify-section-footer a:hover {
    color: #fff !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
5

Thank you very much for sharing that code & location with me.

1 Like