Does Shopify allow spacing on the side margins of websites?

Store Design
1

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):

Screenshot 2025-10-30 at 11.54.10 AM
Screenshot 2025-10-30 at 11.54.10 AM1920×863 127 KB

1 Like
2

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!)

3

Hi @mayaalapai

  1. Open Your Website: Navigate to the page on your Shopify store that you want to customize.

  2. 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.

  3. 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

    with a class name related to a Shopify section, such as shopify-section. Inside that, you’ll likely find another div that acts as the main wrapper for the content. Common class names for such wrappers include page-width, container, or something specific to the Balance theme.

Add the Custom CSS:

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.

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find your Balance theme and click on Customize.

  3. In the theme editor, click on Theme settings (usually a paintbrush or gear icon).

  4. 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!

4

@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.

Screenshot 2025-11-05 at 5.09.36 PM
Screenshot 2025-11-05 at 5.09.36 PM614×824 61.1 KB

Would you happen to know how to fix this?

5

The error is because this line is missing a closing semicolon

Should be

 background-color: #FFFFFF;
6

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!