General sections info
General
Sections are in the core of adding content to your online store. In this article we will cover common settings for all sections. In each sections you can control the content, style and layout of the section.
Settings vary between the sections as different sections have different content.
Managing content
Content like heading, text elements and images are commonly managed as blocks in sections. In some cases the content is on the sections level. Some section might have some content on both locations.
On the right: Hero banner settings are found in the top level. Content items are listed in the blocks.
Style settings
Style related settings are listed commonly after the content settings. Most of the section give you the option to select between the main and accent color schemes.
Layout settings
Layout settings are commonly found on the section level and are divided under own subheadings: Desktop layout or Mobile layout. This way you can control each viewport size with ease. In some rare cases there are some settings for Tablet viewports as well.
On the right: Example of Hero Banner section level settings. Desktop and Mobile layout settings are divided so that it easy to focus on one viewport size.
Section width
Most of the sections have the ability to select the desired section width for desktop viewports.
- Full width; section covers the whole browser window form left to right
- Contained; section won't get wider than the content width value set in Theme settings / Desktop layout
Margins
Margins help you to control the space between each individual section. Each section has dedicated margin controls for top and bottom margins. Margins can be individually controlled for desktop and mobile layouts since the layout might change dramatically.