Changing Background Colour - Shopify Forms

Shopify Apps

Topic summary

Issue: Shopify Forms background rendered transparent, inheriting a red header color. Goal was to make the form background white.

Context and access: Store URL and password were provided to reviewers to inspect the theme.

Proposed solutions:

  • Modify the form’s style to include “background-color: #fff” (and adjust text colors accordingly).
  • Edit theme CSS via Online Store → Themes → Actions → Edit code, then in Assets (base.css/style.css/theme.css) add rules targeting the form section to set background: #fff and adjust padding.
  • Alternative: add a generic CSS rule for “.section { background: #fff; }”.

Technical note: CSS (Cascading Style Sheets) controls the visual presentation; adding a background-color rule overrides inherited/transparent backgrounds.

Evidence and aids: An initial screenshot illustrated the red background issue; a follow-up screenshot showed the white background result. Code snippets were central to the fix.

Outcome: The CSS changes successfully set the form background to white. The requester confirmed it worked. Status: resolved; no remaining open questions.

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

Hi,

I’d like to change my Shopify Forms background color to white, but I can only change the colour of the text, button labels, etc. There’s no option to change the background colour, and the background appears to be transparent so it is using the background colour from the colour scheme in the header (which is red). I’ll attach an image to highlight the issue.

Any help would be greatly appreciated!

Screenshot_20-10-2024_155038_dbiqf0-xu.myshopify.com.jpeg
Screenshot_20-10-2024_155038_dbiqf0-xu.myshopify.com.jpeg1162×504 26.2 KB

1 Like
2

Hi @OBS2024

Please, share your store URL. Thanks!

3

My Store (dbiqf0-xu.myshopify.com)

4

Hi! Any updates?

5

Hi @OBS2024

Please provide your store password.

6

Hi!

Its 12345.

Thanks.

7

Hi @OBS2024

What was your form generated from？

You can modify the form style and add ‘background-color: #fff’; you need to modify the color of the text。

Kyle_liu_1-1729732788025.png
Kyle_liu_1-1729732788025.png1430×962 93.1 KB

8

Thanks for the info, 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:
.page-width.scroll-trigger.animate--slide-in {}

section#shopify-section-template--23621036343619__1729593148f367f619 {
    background: #fff;
}

div#shopify-block-forms_inline_aXrtRP {
    padding-bottom: 30px;
}

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

1 Like
9

Or edit theme code and add this code

.section {
  background: #fff;
}
10

Worked perfect! Thanks a lot!