White backgrounds in Dawn 15.2

Store Design
, ,

Topic summary

A user wants to replace white backgrounds throughout their Dawn 15.2 theme with a custom gradient from their color scheme (Scheme 6). They’ve already tried adjusting margins/padding and editing theme.liquid for specific pages, but seek a comprehensive solution.

A proposed solution involves two steps:

1. Modify theme.liquid: Add a class or inline style to the <body> tag to apply the gradient site-wide.

2. Define gradient in CSS: Add CSS rules (in base.css or theme.css) using linear-gradient() with background-attachment: fixed to create a persistent, full-screen gradient effect.

This approach should eliminate visible white gaps between sections by making backgrounds transparent, allowing the gradient to show through. The user included a screenshot of their desired gradient colors. The discussion remains open pending confirmation of whether the solution works.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

I’ve done a search already and found some directions on fixing the white spacing between sections by playing with margins and padding. I’ve also found some solutions for setting the background color of Collections and other pages by editing theme.liquid.

However, does anyone know how I can apply the background gradient of my color scheme to those white background pages? Or everywhere there’s a white background for the matter (which I would assume would get rid of the need to play with margins and padding as well.

If it’s helpful, here’s an attachment of my “Scheme 6” background coloring.

Screenshot 2025-02-12 at 6.53.53 PM.png
Screenshot 2025-02-12 at 6.53.53 PM.png1946×706 160 KB

TIA

1 Like
2

Hi @chickeneye

I am from Mageplaza - Shopify solution expert.

Yep, totally get what you’re trying to do — sounds like you want a consistent background gradient across your Shopify store that replaces those default white sections. You’re right that this could help reduce the appearance of spacing between sections too, since the eye won’t be catching stark white gaps anymore.

Here’s how to apply a background gradient site-wide in Shopify:

Step 1: Edit theme.liquid
You’re already halfway there if you’ve touched this file before.

  1. From your Shopify admin, go to Online Store > Themes
  2. Click Actions > Edit code
  3. Open layout/theme.liquid
  4. Look for the opening tag — it’s usually around this line:
  5. Modify it to include an inline style or a class. Here’s an example with an inline style:

Or even better, give the body a class and define the gradient in your CSS:

Step 2: Add CSS for the Gradient
Now define the CSS. Go to Assets > base.css, theme.css, or whatever your main CSS file is called.

At the bottom, add:

.custom-gradient-bg {
  background: linear-gradient(to bottom right, #yourColor1, #yourColor2);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

This makes the gradient full-screen and fixed, so it stays put as people scroll.

Once your background isn’t pure white, those gaps caused by margin/padding between sections become much less noticeable. That said, if you still see some jarring transitions:

  • Try reducing vertical padding/margins between sections in section or .shopify-section classes.
  • Or just make sure sections have transparent backgrounds so your gradient shows through.

Please let me know if it works as expected!

Best regards!