Section

Layout, content and available controls for Section.

Scale Theme · v1.9.3 · 1 min read

Where to find it

Add this section from the theme editor on a supported template.

Editor controls

Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.

Display section ID: ID is used in the Sections group section to create anchor links. Toggle on to show a copy button on this section.
Display on: Choose the presentation or source that fits this component.Options: All devices · Desktop only · Mobile only
Direction: Choose the presentation or source that fits this component.Options: Vertical · Horizontal
Vertical on mobileConditional: Enable or disable this option and preview the result.
AlignmentConditional: Choose the presentation or source that fits this component.Options: Left · Center · Right · Space between
PositionConditional: Choose the presentation or source that fits this component.Options: Top · Center · Bottom
Align text baselineConditional: Enable or disable this option and preview the result.
AlignmentConditional: Choose the presentation or source that fits this component.Options: Left · Center · Right
PositionConditional: Choose the presentation or source that fits this component.Options: Top · Center · Bottom · Space between
Gap: Adjust within the range offered by the theme editor.
Width: Choose the presentation or source that fits this component.Options: Page · Full
Height: Choose the presentation or source that fits this component.Options: Auto · Small · Medium · Large · Full screen · Custom
Custom heightConditional: Adjust within the range offered by the theme editor.
Color source: Theme colors follow Theme settings > Colors. Other sources apply only to this section.Options: Use theme colors · Choose a color scheme · Set custom colors
Color schemeConditional: Choose an available Shopify color scheme.
BackgroundConditional: Choose a local color when the relevant custom source is enabled.
HeadingConditional: Choose a local color when the relevant custom source is enabled.
TextConditional: Choose a local color when the relevant custom source is enabled.
AccentConditional: Choose a local color when the relevant custom source is enabled.
Accent textConditional: Choose a local color when the relevant custom source is enabled.
BorderConditional: Choose a local color when the relevant custom source is enabled.
Background media: Choose the presentation or source that fits this component.Options: None · Image · Video
VideoConditional: Select hosted video media in your shop.
Video positionConditional: Choose the presentation or source that fits this component.Options: Cover · Contain
ImageConditional: Choose an image from your shop. Preview its crop on desktop and mobile.
Image positionConditional: Choose the presentation or source that fits this component.Options: Cover · Fit
Borders: Choose the presentation or source that fits this component.Options: None · Solid
Border thicknessConditional: Adjust within the range offered by the theme editor.
Border opacityConditional: Adjust within the range offered by the theme editor.
Corner radius: Adjust within the range offered by the theme editor.
Background overlay: Enable or disable this option and preview the result.
Overlay colorConditional: Choose a local color when the relevant custom source is enabled.
Overlay styleConditional: Choose the presentation or source that fits this component.Options: Solid · Gradient
Gradient directionConditional: Choose the presentation or source that fits this component.Options: Up · Down
Top: Adjust within the range offered by the theme editor.
Bottom: Adjust within the range offered by the theme editor.