How does one color the margins for desktop mode? The way mobile looks would be perfect (even though you won’t see the margins on a phone). I’d like the desktop view to be flanked by a light gray color that extends where the page content ends. I hope I explained that well enough. This is my first rodeo in terms of Shopify.
You explained it perfectly. To color the margins on desktop, you just need to change the theme’s background color — not the page section itself.
Go to:
Online Store → Themes → Customize → Theme Settings → Colors → Background
Set the background to your light gray, then keep your main content sections white. This will create the flanked gray margins on desktop while mobile stays clean.
If you want, I can check your theme and guide you step-by-step so it matches the exact look you want.
Unfortunately, the only options in Colors is Schemes. Maybe that’s a Horizon quirk.
You can reach out to me, I will help you further
Hi @Will408
You need to go for some code editing. Don’t worry, it’s not too hard. I am going to explain step by step to make it easy for you.
Go to Online Store → Themes → Edit code
-
Open theme.liquid
-
Find the
<body>tag -
Add this class:
<body class="custom-bg">
- Now add this in
base.css:
.custom-bg {
background: #f2f2f2 !important;
}
.page-width {
background: #ffffff;
}
If it doesn’t work, please tell me your theme name (Dawn, Refresh, Craft, Sense, Impulse, etc.), and I’ll give you theme-specific code so it looks exactly like Shopify’s native styling.
It didn't work. I found the <body> tag but I wasn't sure where to place it. There was already class information. I'm using the Horizon theme, BTW.
I still don’t understand exactly where to place it
@Will408 please add this css to the very end of your base.css file and check
shopify admin->online store->themes->edit theme code->assets->base.css
That did nothing except tweak out my Hero section
@Will408 can you please share your page link?
Again, I’m a novice and don’t understand. My page isn’t published.
And? If you don’t want a section to be full width, change the width settings for that section. Has absolutely nothing to do with background color.
Please for the love of all that you hold dear, stop this nonsense. Just stop. You’re making it wayyyy harder than it needs to be.
you can share the preview link, you can DM if you do not want to make it public
Don’t know what that is
@Will408 ok, you can go to your website admin, you have online store>themes> click on … and check if you have a preview option, you can click on it and share its link to here or directly message me from message box or email on my profile
I’m a novice, bro. I appreciate the help but some of us are starting from scratch. And the only width options for the Header in Horizon is Page and Full. Neither fixes the issue.