While a quality Shopify theme is the foundation of a great Shopify store, numerous details can make all the difference in building a store that matches your store’s needs, goals and brand — and the Flex Shopify theme comes with a variety of settings that make it easy to tweak areas that were once tricky to control.
Shopify theme section spacing
Many sections and other theme settings give you limited control over the spacing — to make any changes, you would typically have to edit or add in custom CSS.
With the Flex theme, however, reducing or increasing your spacing is simply a matter of moving a slider left or right — and being able to see the results live.
In many ways, it’s ironic how important spacing is in web design — after all, it’s basically empty space.
Of course, spacing goes a long way in making your store easy on the eyes, easy to scan and easy to understand.
Graphic designers often refer to this concept as “white space” — even if that empty space isn’t actually white (it could be a color or gradient, for example) — but it often plays a key role in your theme:
- Defining where an element or section of the page starts and ends
- Similarly, subtly sending a visual cue to shoppers that a new type of content is coming
- Making your pages easy for customers to scan and find the information they’re looking for
- Giving the eye a visual “break” from images, text and other design elements
With the new spacing controls, it’s easy to get carried away.
One of the most important things to remember is to keep your spacing consistent. Experiment with finding the “sweet spot” that gives you the look you’re after — and then use that same value throughout the theme.
If you do find yourself needing different spacing options, use the initial value as a jumping off point and trying using double or triple that value — or half or a third of it.
It’s amazing how using haphazard or “eyeballed” spacing values can quickly create a disjointed look.
In many cases you also have the option to set different sides’ spacing separately — and starting with all values equal to each other is always a good rule of thumb. However, you should also preview your settings and see how the spacing looks in relation to blocks within your section as well as the spacing of neighboring elements.
Spacing also plays a big role in the “tone” your store gives off. Higher spacing values tend to be more elegant and artistic, but also usually mean users will have to scroll more to see all the content.
There’s also nothing wrong with tighter spacing as long as it’s not too tight. Tighter spacing is sometimes a better route if you need to fit a lot of content in a smaller amount of space.
At the end of the day, tight spacing done well can still give you a clean and elegant look.
Finally, be sure to test how your spacing looks on mobile devices, especially if you use generous spacing on larger screens.
On mobile devices, the effect of high spacing can be exaggerated and result in what appears to be odd gaps between content.
Shopify theme section widths
The Flex premium Shopify theme also offers built-in settings to adjust the width of sections.
Options vary based on section type, but can include either wide or standard options as well as a “half” setting.
The “wide” option generally makes the section full width, though in some cases it will be just shy of full width for aesthetic reasons.
Many sections also include the option to enable or disable the gutter — which refers to the spacing between columns on larger screens.
Wide sections tend to be best for showcasing large photos or imagery or short blurbs of text in an eye catching way.
It’s important to carefully consider when and how often to use the wide option — just like anything else, having all of your sections this way might make it less “special.”
It can often also look odd to use two wide sections next to each other, especially if they both have full width imagery — so a good strategy is to intersperse wider sections with standard ones.
Another good thing to keep in mind is that, since wide sections tend to pack more visual weight, you may want to reserve them for key parts of the page — such as calls to action, product showcases or an email newsletter form.
That said, some stores naturally lend themselves to wider content — and a creative option is to instead use standard width sections to draw attention to other content on the page.
The “standard” setting, meanwhile, generally means that the section sits within left and right “margins.” The exact width of the content varies based on the screen size, but on large screens it’s typically 1,200 pixels.
This will leave “white space” on either side of the content (the exact amount will vary depending on how big of a device is being used), which will be centered on the screen for easy reading and scanning.
In general, it’s a good idea to keep text-heavy content in standard width sections — or at least narrower columns within wider sections.
As most humans read text across a page there’s a tendency for the eye to “slip” down to the next line the farther the reader gets from the start of the line, so keeping larger blocks of text narrower generally helps with readability.
Other sections include the ability to select “half” — which typically works best when another section with half is placed directly after it. This will cause the two sections to be on the same row on large screens.
Using both spacing and width settings in your Flex Shopify theme is a powerful tool that puts more control in the hands of merchants — without having to know CSS.
