The Flex theme includes a variety of settings that make it easy to tweak areas that were once tricky to control. Two of these settings allow you to adjust the spacing and the width of your sections.
Using both spacing and width settings is a powerful tool that puts more control in the hands of merchants — without having to know CSS.
Spacing Settings
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.
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 try using double or triple that value — or half or a third of it.
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.
Width Settings
Flex also offers built-in settings to adjust the width of sections. For most sections and blocks, select either Wide or Standard. For some sections, you can also select a Half option.
Wide
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.
Standard
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 1200 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.
Half
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.