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.
Image: 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 valueset 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.
Apps section
Some apps add their content as app blocks. Add them to a page with the Apps section: click Add section, choose Apps and add the app block inside it. The Apps section gives app content the same page width and margins as the theme's own sections, with Full width and margin settings for desktop and mobile.
Headings and line breaks
In title or heading blocks, you can use [br] shortcode to create a line break within the text. This allows more control over how multi-line headings are displayed, especially in areas with limited space.
