How do I change the title area of contact form's background?

Shopify Discussion

Topic summary

Goal: Make the contact page’s title/description area background match the rest of the site (either white or using the site’s color scheme).

Key solutions proposed:

  • Add CSS to remove or override the background in base.css.
    • Option A (remove background behind title): add to the end of base.css:
    body { background: transparent !important; }
    • Option B (force white / align with site scheme): add to the end of base.css:
    #MainContent { background: white !important; }
    .color-scheme-1 { background: white !important; }

How to apply:

  • Admin → Online Store → Theme → Edit code → assets/base.css → paste code at bottom → Save → reload page.

Notes:

  • Images were shared to illustrate the affected title area and the expected result; they are helpful to visualize the change.
  • CSS uses !important to override existing styles from the theme.

Status/outcome:

  • A helper indicated the CSS solution resolved the issue and asked for feedback, though direct confirmation from the original poster isn’t shown. The discussion appears effectively resolved with the CSS edits.
Summarized with AI on December 27. AI used: gpt-5.
3

Dear @alagrow

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1717828293699.png
BSSCommerceB2B_0-1717828293699.png400×195 26.3 KB

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

#MainContent {
    background: white !important;
}
.color-scheme-1 {
    background: white !important;
}

In this step, you change the color for 2 purposes:

(1) make that background white

(2) apply the scheme that you have throughout the rest of the site’s pages.

Step 3: Save your code and reload this page.

#Page contact:

BSSCommerceB2B_1-1717828557984.png
BSSCommerceB2B_1-1717828557984.png1461×855 44.4 KB

#Page product:

BSSCommerceB2B_2-1717828663387.png
BSSCommerceB2B_2-1717828663387.png1794×1076 280 KB

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

1 Like