Customizing spacing between elements in Shopify themes

One of the most common design challenges Shopify theme users face is the spacing between elements.

While all Out of the Sandbox themes come pre-designed with best practices for layout and placement, every store owner has unique requirements or preferences with regards to spacing.

Changing the spacing of page elements in your theme beyond the default settings can be a bit challenging, however and does require some custom CSS.

This blog post is designed to help give you a general overview of how you can adjust spacing between elements. But before you begin, try to assess the need for tweaking in the first place and keep some best practices in mind.

Think like a designer

The arrangement of elements such as images and text, in relation to each other and to their overall context, is the art of layout and composition. Print designers spend a lot of time getting this just right, fine-tuning the spacing of everything with dogged precision.

Web designers adhere to many of the same principles, but also understand that — unlike a static printed design — a website is a living piece that needs to adapt to its ‘surroundings’, as it will be viewed at various sizes, orientations and contexts.

So the web designer accepts that they need to relinquish absolute control over spacing but can optimize it for most situations, by keeping the following goals in mind:

• Legibility: the spacing between and around text should facilitate skimming and reading for the viewer; text that is too cramped or too widely spaced can hamper readability
• Clarity: grouping similar content and separating disparate content can help communicate messaging and make it easier for the shopper to find their way around
• Breathability: Crowded storefronts are off-putting and hard to navigate, so you’ll want to leave adequate ‘breathing room’ around your elements. You can also draw attention to something important by leaving additional space around it to isolate it, but beware of leaving too many wide open spaces that make your shop start to look empty.

Some quick notes

Before we get started, it’s important to note that most of these instructions will only work on versions of our themes that support sections, so you will need to use Parallax 3.0+, Retina 4.0+, Mobilia 5.0+, Responsive 6.0+ or Turbo 2.0+ to use these instructions.

If you aren’t using one of these versions but would like to apply custom spacing, your best bet is to upgrade to the latest version of your theme. If you are unable to upgrade but still would like to adjust spacing, you can hire a third party developer to help you out.

This tutorial refers to the free Google Chrome browser and its built in developer tools. While most other browsers include similar features, if you chose to use another browser, the steps may vary slightly and you should consult the browser’s documentation for details on accessing these features.

Finally, please note that making updates to your spacing is considered a customization, which means that most theme developers won’t be able to fully support you if you run into issues. It’s fairly easy to make some pretty significant errors, so keep that in mind and be sure to fully test your code.

Before doing anything, be sure to make a full or quick backup of your code. If you find your code causes issues immediately, in most cases you can simply delete it to get things back to the way it was.

Using developer tools to inspect an element

To get started with adjusting spacing, open the page you’d like to modify and right click on or near the area that you’d like to adjust, and select “Inspect” from the dropdown.

Chrome will open a split-screen style view. In order to ensure you’re seeing the full width version of your site, click the three stacked dots in the upper right of the new panel that opens. Select the icon shown to move the panes to the bottom of the page.

The new view includes a preview of the page at the top, along with the source code and styles below, as illustrated:

It takes some finessing, and you may need to click the arrow icons next to lines in the source code to show nested code that isn’t visible by default and selecting it.

In some cases, it can be easier to use the code view. As you hover over specific lines of code, you’ll notice the elements in your browser window become highlighted with blue, green and orange overlays.

Once you have the desired element highlighted in blue (there may be orange and green highlights around it), you’ll know you’ve identified the correct element.

In the upper left of the element, in a dark gray box, you’ll see what, in CSS, is called the element selector name. In this example, it’s h2.title — as shown here. This refers to a Heading 2 with a class name of “title.”

Padding vs. margin

In Web design parlance, there are two factors that affect spacing between blocks of content — padding and margins:

• In the developer view, the blue shaded area you see is known as the block, which is an invisible “container” that “holds” HTML content.
• Padding refers to the spacing inside of a block element. In Google Chrome’s developer view, padding is represented by orange.
• Margins, meanwhile, refer to spacing outside of a block element. This is represented by green.

Making adjustments

Once you’ve identified the block element you’d like to adjust and made note of the values in the green and orange shading, you know now what CSS needs to be adjusted. But before changing these values in your theme code, you can change it right there in the inspector to test things out, so that you can find a value that produces the result you want. Note that this won’t change anything permanently and will be lost when you refresh the page, but it’s a great way to nail down the new values before changing it in the theme files.

To adjust margin size, you’ll want to add a line of custom CSS like this to the end of styles.scss.liquid. This example uses the “h2.title” element name we’ve been using in this example:

h2.title { margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; }

You’ll want to replace h2.title with the name of the element you’re working with and the “0px” values with the amount of spacing, in pixels, you want to use. Note that you can use “0px” to use no margin.

Padding, meanwhile, can be adjusted using similar code:

h2.title { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; }

In some cases, if you find that your code isn’t taking effect, you may need to add an “!important” declaration to some of your code, such as this example:

h2.title { padding-top: 0px !important; padding-left: 0px !important; }

You can also string together both margin and padding settings in the same code snippet, like this:

h2.title { margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; }

Note that, in many cases, you’ll need to adjust the padding and margins on more than one element to get the look you want.

Targeting specific pages

When adding custom CSS like those snippets shown above, these settings will apply to all elements that have the same selector name anywhere on your site, which may not be desireable.

However, if you only want to affect elements on specific types of pages, you can add an additional selector name to your code, like this:

body.index h2.title { padding-top: 0px !important; padding-left: 0px !important; }

This code will only change “h2.title” elements on the homepage. You can use “body.collection” for collection pages, “body.page” for pages, “body.product” for products and “body.article” for blog articles.

Targeting specific sections

When applying the code above, it will affect all elements with the same name on the page type indicated. If you need to get even more specific and only change a specific element within a specific section, you can add an additional selector.

To do this on the homepage, look for a bit of code that looks like this just above the element you’re trying to change:

id="shopify-section-1489275816053"

The exact number used will vary, but it will always start with shopify-section-.

Then, add this selector to the front of your CSS:

#shopify-section-1489275816053 h2.title { padding-top: 0px !important; padding-left: 0px !important; }

This will now only apply the padding and margin settings you define only to the Heading 2 tag with the class name of “title” found inside of that specific section.

Mobile spacing

It’s also possible to use different padding and margins on different screen sizes to optimize your layout.

To do this, you’ll need to write some custom CSS inside what is known as a media query.

Take this example code:

@media only screen and (max-width: 767px) {
 h2.title { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; }
}

The 767px value shown will apply for screens that are less than 767 pixels wide (but not exactly 767 pixels wide) and is generally a good setting for most mobile phones. You can adjust this value up or down as needed to target other screen sizes by adding another block of code with that value.

Note that you’ll want to place this code at the very bottom of your custom CSS code so that it will “override” the default styles you’ve created. If you use more than one media query block of code, you should keep code for smaller screen sizes closer to the bottom.

Test your customizations

It’s important, when making spacing changes, to carefully test your site in on a variety of screen sizes, as once you start experimenting, there can be unexpected results.

One handy way to to test in different screen sizes is to use Google Chrome’s built in screen presets and zoom features:

Note that the “zoom” functionality is helpful when you want to preview how a page will look on a screen that’s larger than yours or when the developer tool panes get in your way. Changing the zoom does not change the relative size of the device Chrome is simulating, though.

Using this as a foundation

Now that you’re familiar with how to adjust the margin and padding on the “h2.title” element both everywhere on your site, on a specific page or in a specific section, you can apply the same techniques and principles to adjust the spacing of other page elements on your site:

• Repeat the “inspect” steps to find the class name and, if necessary, the section ID
• Add the appropriate CSS code to the bottom of styles.scss.liquid. Remember to change h2.title to the class name and, if applicable, the section ID you identified in step 1. 
• Make any additional changes to the mobile responsive code.

One final tip: if you see a tag with a class name like this, <h2 class="title">, your CSS code should contain a period or dot ., like this: h2.title. If you see something with an id value, like this: <div id="shopify-section-1489275816053">, your CSS needs to use a hashtag or pound sign #, like this: #shopify-section-1489275816053.