For some reason, I cannot change the background margin colours on my site. I can’t seem to find the colour selected in any of the themes. Any recommendations? I want the background to be white. I do not want that peach colour that appears in margins - this is on the bottom of the home page:
Topic summary
A Shopify store owner is struggling to change peach-colored background margins to white, which appear in various sections of their homepage despite not finding the color setting in the theme editor.
Root Cause Identified:
The peach background is being applied by the LimeSpot app through CSS code that sets main { background-color: #f8e8dc; }.
Solutions Provided:
- Option 1: Modify the LimeSpot app settings directly
- Option 2: Add CSS override code to Theme Settings → Custom CSS to force white backgrounds
- Option 3: Insert custom
<style>tags in the theme.liquid file before the</head>tag
Current Status:
The initial fix partially worked, but peach backgrounds persist in some sections. A follow-up solution targeting the entire site background was provided using inline CSS in the theme.liquid file. The issue appears ongoing as the user continues to identify additional sections with the unwanted peach color.
Technical Note:
Multiple responders suggested using browser dev tools to inspect elements and locate the source of the styling issue.
That peach color in the margins can be frustrating! To change the background color to white, we’ll need to dig into the CSS code. It’s possible that the color is hardcoded in the theme’s stylesheet or set as a variable.
Can you tell me more about your theme and the page builder you’re using? Have you tried inspecting the element with the peach color using the browser’s dev tools? Sometimes, this can give us a hint about where the color is coming from.
I’ve worked with Shopify themes before, and I know that little tweaks can make a big difference. Let’s figure out what’s going on with that peach color!
LimeSpot does it for you:
So either change this setting in App settings, or add the following code to the “Theme Settings”=> “Custom CSS”
main {
background-color: rgb(var(--color-background));
}
Well, I’ve sorted out a lot of similar issues before. The peach color showing up in the margins is likely coming from custom code or hardcoded styles in the theme itself. It’s not something you’ll always see in the regular theme editor. In some cases, it can also be caused by leftover CSS from older edits, or if the theme was edited or built in a non-standard way. If it’s a third-party or outdated theme, it might even have been compromised or just poorly developed, which can make these things harder to track down.
Hi @JayKay89 ,
- Go to Online Store → Theme → Edit code.
- Open your theme.css / based.css file and paste the code in the bottom of the file.
section#shopify-section-template--18227720519869__countdown_WfykUK {
background: white !important;
}
Thanks!
Hi there! Thanks. Where can I add this to change the entire background colour?
Thank you! That worked. But a few sections still show that peach colour. How can I make the default background colour white?
I’d like all this background to be white:
Kindly mark the solution. @JayKay89
Go to Online Store → Theme → Edit Code.
Open your theme.liquid file and paste the code just before the tag.