Section layout and spacing

Most Radian sections start with the same settings. They work the same way everywhere, so they are explained once here and left out of each section's settings reference.

How to set it up

Step 1: Set the width

1. Full width (1) lets the section run edge to edge.
2. Section layout (2) picks one of the four widths set in Theme settings > Layout: Page, Content, Narrow or Custom. Change the width there and every section using it follows.

Step 2: Pick a color scheme

1. Color scheme sets the background, text and button colors of the section. Schemes are edited in Theme settings > Colors.

Step 3: Set the spacing

1. Under Section spacing, set the top and bottom spacing for desktop and mobile separately.
2. Set a value to 0 to join two sections with the same background.

Step 4: Adjust for mobile

1. Many sections have Customize for mobile under Mobile. Turn it on to show mobile-only alignment, heading size and spacing.
2. Values you set keep working when the option is turned off again; they are only hidden.

How it works

• Sections with images often have Height options: Adapt to media follows the image, Percent of viewport fills part of the screen, and Fixed uses a pixel height.
• Background animation > On scroll adds Sticky, Parallax, Zoom in or Zoom out effects to section media. Effects turn off for shoppers who prefer reduced motion.
• Sticky overlap (in sections such as Slideshow, Grid and Featured collection) lets the next section slide over this one as the page scrolls.

Related

• Section headings and text
• Layout and page width
• Colors and color schemes