How to make my footer a different color scheme on one specific page?

Topic summary

A user needs to apply a different color scheme to the footer, but only on the contact page—not site-wide.

Current situation:

  • The footer currently uses the same styling across all pages
  • They want to customize it specifically for the contact page

Technical approach needed:

  • Likely requires page-specific CSS targeting
  • May involve using a unique page identifier or class to apply custom styles

Status: The question remains unanswered with no solutions or suggestions provided yet.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.

Hi Nxte,

You can do that easily using Custom CSS right inside your theme editor — no need to touch the main code.

Go to:
Shopify Admin → Online Store → Customize → Footer → Custom CSS,
then add something like this:


/* Change footer color only on the contact page */
.template-page-contact footer {
  background: red;
}

(You can replace “red” with your desired color code like #000000 or #f2f2f2.)

Hope this helps,
Sophia - The Tapita team

1 Like

You can do that by adding a unique class or ID to your contact page and then using custom CSS to change the footer color just for that page.
For example, in your theme editor or custom CSS file, you can add something like:

.template-page-contact .site-footer {
  background-color: yourcolor;
  color: yourtextcolor;
}

This will only affect the footer on your contact page.