A user working with Shopify’s Balance theme is trying to create rounded-edge boxes with side margins that appear to “float” on the page, similar to a reference design they provided.
Current Issue:
Desired Outcome:
The user included a screenshot example showing the target design aesthetic. The question remains unanswered regarding whether the Balance theme supports this layout modification or if custom CSS adjustments are needed.
This is a very random question, but is there an easy way to create these rounded edge boxes in Shopify? Specifically in the Balance theme?
Every time I try to give my components backgrounds and round the edges, they go all the way to the side-edges of the screen and don’t have space to create the look of floating boxes. How can I adjust the margins so they sit properly? Or does this theme not allow that?
Example website of what I want (see the edges on the sides and top):
That reference theme looks pretty custom, probably agency-made.
Most themes can be modified to resemble the look, but yes, some themes can be better for this kind of modification.
Frankly, it’s an unusual request and I do not have any statistics.
Would be nice to see your work in progress for better suggestions (do not forget to share proper preview password!)
Hi @mayaalapai
Open Your Website: Navigate to the page on your Shopify store that you want to customize.
Inspect the Element: Right-click on the section you want to add the rounded corners and margins to, and select “Inspect” or “Inspect Element.” This will open a panel showing the HTML and CSS of your site.
Find the Section Container: As you hover over the lines of HTML in the inspector, the corresponding elements on your page will be highlighted. Look for the main container of the section. It will likely be a
Once you have identified the class or ID of the section containers you wish to modify, you can add the following CSS code. Shopify allows you to add custom CSS in a few different ways, but the easiest is through the theme customizer.
From your Shopify admin, go to Online Store > Themes.
Find your Balance theme and click on Customize.
In the theme editor, click on Theme settings (usually a paintbrush or gear icon).
Look for a Custom CSS section and enter your code.
Replace ‘.your-section-class’ with the actual class of your sections
.your-section-class {
margin: 20px;
border-radius: 15px;
background-color: #FFFFFF
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
If this code works, please mark my comment as the solution.
Thank You!
@websensepro Hello! Thank you for your reply. I tried the above code and located the section class but I am getting error messages around the color and padding lines.
Would you happen to know how to fix this?
The error is because this line is missing a closing semicolon
Should be
background-color: #FFFFFF;
Hello @mayaalapai,
Sorry, it was my mistake, I made an error in the code.
Code before:
.your-section-class {
margin: 20px;
border-radius: 15px;
background-color: #FFFFFF
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
New code:
.your-section-class {
margin: 20px;
border-radius: 15px;
background-color: #FFFFFF;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
My mistake, I forgot to add a semicolon after the background color.
If the code is working now, let me know, and if it’s not, I’m here to help.
Thank you!