Changing Background Colour - Shopify Forms

Solved

Changing Background Colour - Shopify Forms

OBS2024
Tourist
5 0 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

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
8772 2098 2573

This is an accepted solution.

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;
}

 

  • And Save.
  • Result;
  • Made4uoRibe_0-1729769133333.png

     

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 9 (9)

Made4uo-Ribe
Shopify Partner
8772 2098 2573

Hi @OBS2024 

Please, share your store URL. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
OBS2024
Tourist
5 0 1
Made4uo-Ribe
Shopify Partner
8772 2098 2573

This is an accepted solution.

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;
}

 

  • And Save.
  • Result;
  • Made4uoRibe_0-1729769133333.png

     

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
OBS2024
Tourist
5 0 1

Worked perfect! Thanks a lot!

OBS2024
Tourist
5 0 1

Hi! Any updates?

Kyle_liu
Shopify Partner
228 32 40

Hi @OBS2024 

 

Please provide your store password.

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me on ([email protected])
OBS2024
Tourist
5 0 1

Hi!

Its 12345.

Thanks.

Kyle_liu
Shopify Partner
228 32 40

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

 

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me on ([email protected])
Kyle_liu
Shopify Partner
228 32 40

Or edit theme code and add this code

 

.section {
  background: #fff;
}

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me on ([email protected])