Section

Section is a frame you build yourself. You choose its colors, width, height and the space around it, then fill it with blocks: words, pictures, buttons, videos, groups of blocks and more. It sets out the blocks one under another or side by side.

Fourteen ready-made layouts in the picker are this same section with blocks already in place: everything under Images (such as Images: Side by side) and four under Text (such as Text: Statement). They all have the settings on this page. Start from one of those when it is close to what you want, and from Section when nothing is.

Add it

It can go on any page and in the footer, as many times as you like. It cannot go in the header. In "Add section", find Section under Custom.

As first added it has a Heading ("Made for every day"), a line of Text and a Button ("Shop now", leading to all your products), one under another, with medium space above and below.

There is only one Section in the picker. Plain Jane has a second frame with the same name that Shopify uses on its own to hold a block you generate with AI. You never add that one by hand, and it has only Color scheme, Width (Page width or Full width) and Spacing (Tight, Normal, Loose).

Settings

Select the section itself to see these.

Setting	What it changes	Options
Color scheme	The colors of everything inside. A Group inside can choose its own colors for just its part. See shared settings.	Any of your schemes. Default: Scheme 1.
Width	How wide the content runs. Page width keeps it to your store's page width. Full width runs it across the screen, inside the page margin. Edge to edge runs it to the sides of the screen with no margin at all, for photos that meet the screen's edges. Text then touches the sides too.	Page width, Full width, Edge to edge. Default: Full width.
Minimum height	Makes the section at least this tall. Small is about a third of the screen, Medium half, Large about two thirds. Full screen fills the screen below your header. It grows taller if the blocks need more room.	Auto, Small, Medium, Large, Full screen. Default: Auto.

Padding

Setting	What it changes	Options
Space above	Empty space above the blocks. See shared settings.	None, Small, Medium, Large, Custom. Default: Custom.
Custom space above	The exact space. Only appears when Space above is Custom.	0 to 200 px. Default: 40 px.
Space below	Empty space under the blocks.	None, Small, Medium, Large, Custom. Default: Custom.
Custom space below	The exact space. Only appears when Space below is Custom.	0 to 200 px. Default: 40 px.

Each ready-made layout starts with its own space and height. Its page says which.

Layout

Setting	What it changes	Options
Direction	Vertical sets the blocks one under another. Horizontal sets them side by side in a row.	Vertical, Horizontal. Default: Vertical.
Stack on mobile	On phones, the row turns into a column, one block under another. Only appears when Direction is Horizontal.	On or off. Default: on.
Horizontal alignment	Vertical: where the blocks sit across the section. Stretch makes each one as wide as the section. Horizontal: where the row sits, or Space between to push the first block to the left edge, the last to the right and share the rest evenly.	Vertical: Left, Center, Right, Stretch (default). Horizontal: Left (default), Center, Right, Space between.
Vertical alignment	Vertical: where the blocks sit from top to bottom, or Space between to spread them out. Horizontal: how blocks of different heights line up, or Stretch to make them all as tall as the tallest.	Vertical: Top (default), Center, Bottom, Space between. Horizontal: Top (default), Center, Bottom, Stretch.
Gap	The space between one block and the next.	None, Small, Medium, Large, Extra large. Default: Medium.

There are two Horizontal alignment and two Vertical alignment settings, one pair for each direction. You only ever see the pair for the Direction you chose, and each keeps its own choice when you switch.

In a column, Vertical alignment only moves the blocks when the section is taller than they are, so set Minimum height first. Text blocks whose Alignment is "Same as section" follow Horizontal alignment.

Blocks

You can add, remove, move and hide every block. Group holds other blocks, so you can put a column inside a row, or a row inside a column, as deep as you need. Apps that offer blocks can add them here too.

Text

Words of any kind: a heading, a paragraph, a caption, a small label. The ready-made layouts use it for every line of words, so it shows as "Text" or "Heading" in the list of blocks.

Group	Setting	What it changes	Options
(top)	Text	The words. Bold, italic and links work.
Layout	Width	Fit to text keeps the block as wide as its words. Full width stretches it across its spot and lets you set Alignment.	Fit to text (default), Full width
	Line length	How far a line runs before it wraps.	Short, Medium (default), Full
	Alignment	Which side the words line up to. Only appears when Width is Full width.	Same as section (default), Left, Center, Right
Appearance	Style	Which of your theme's text styles it uses.	Body (default), Uppercase, Heading 1 to Heading 6, Custom
	Font, Size, All caps	Your own font, size and capitals. Only appear when Style is Custom.	Font: Body, Subheading, Heading, Accent. Size: Same as body text, Small note, 16 to 72 px.
	Stay readable over photos	Turns the words light or dark against the photo behind them. Replaces Color while on.	On or off. Default: off.
	Text tone	Only appears with Stay readable over photos on. Choose Light or Dark if a mid-tone photo makes the words hard to read.	Adapts to the photo (default), Light, Dark
	Color, Custom color	The color of the words. Custom color appears when Color is Custom.	Text (default), Heading, Link, Custom
	Background, Background color, Corners	A colored panel behind the words, and how round its corners are.	Off by default. Corners: None, Slight, Round.
Spacing	Top, Bottom	Extra space above and under this block.	None (default), Small, Medium, Large
Animation	Animation, Speed	How the words appear. Speed appears once you choose one.	None (default), Scramble, Typewriter, Fade in, Slide up. Speed: Slow, Medium, Fast.

Image

One picture.

Setting	What it changes	Options
Image	The picture. Until you choose one, a gray stand-in shows its place.
Link	Makes the picture clickable. Give the picture alt text in Shopify so screen readers can say where it goes.	Any link.
Width	Fit to image shows it at its own size, up to half the screen on desktop. Full width stretches it across its spot.	Fit to image (default), Full width
Shape	Original shows the whole photo. Portrait, Square and Landscape crop it to that shape, so photos side by side line up evenly. Set a focal point on the photo in Shopify to choose what stays in view.	Original (default), Portrait, Square, Landscape
Height	How tall the picture is on desktop. Only appears when Width is Fit to image. On phones the picture fills the width of its spot, except at Extra small.	Auto (default), Extra small, Small, Medium, Large
Corners	How round the picture's corners are. See shared settings.	None (default), Slight, Round

Button

A link styled as a button.

Group	Setting	What it changes	Options
(top)	Label, Link, Open in new tab	The words on it, where it leads, and whether that opens in a new tab.	Label default: "Shop now".
Appearance	Style	How it looks. Link is underlined words, with Show underline to turn the line off. Glass is see-through, for a button over a photo or video.	Primary (default), Secondary, Link, Glass
Glass colors	Use my own glass colors, then Tint, Text color, Hover tint, Hover text	Your own colors for a Glass button instead of the color scheme's. Only appear when Style is Glass.	Off by default.
Size	Width on desktop, Width on phones, each with a custom width	How wide the button is. Custom shows a slider from 10 to 100% of its spot.	Fit to text (default), Full width, Custom

Group

A box that holds other blocks and lays them out on its own, the same way the section does. Use it for a column of words beside a photo, a photo with its caption, or a panel with its own background.

Group	Setting	What it changes	Options
Layout	Direction	Its blocks one under another, or side by side.	Vertical (default), Horizontal
	Stack on phones	On phones, a row turns into a column. Only appears with Horizontal.	On by default.
	Alignment	Where its blocks sit across it. In a row, Spread across the row pushes them to both ends.	Left (default), Center, Right; in a row also Spread across the row
	Position	Where its blocks sit from top to bottom. In a column it only appears once Minimum height is not None, and offers Spread top to bottom. In a row it offers Stretch.	Top, Center (default), Bottom, and the extra option
	Line up the text	Lines up the words of blocks in different text sizes. Only appears in a row with Position at Bottom.	Off by default.
	Space between blocks	The gap inside it.	None, Small, Medium (default), Large, Extra large
Size	Width on desktop, Width on phones, each with a custom width	How much of its spot it takes. Custom shows a slider from 0 to 100%.	Fit to content, Full width (default), Custom
	Minimum height	Makes it at least this tall, so Position can move its blocks up or down.	None (default), Small, Medium, Large, Full screen
Appearance	Same colors as the section, Color scheme	Turn the first off to give this part its own color scheme.	On by default.
	Background, then Image and Image fit, or Video and Video fit	A picture or video behind its blocks.	None (default), Image, Video
	Border, Border width, Border opacity, Corners	A line around it and how round its corners are.	Border: None (default), Solid
	Show overlay, Overlay color, Overlay style, Gradient direction	A tint over its background so the words on it are easier to read.	Off by default. Style: Solid, Gradient.
Link	Link, Open in new tab	Makes the whole group clickable. Buttons and links inside it still work on their own.
Padding	Top, Bottom, Left, Right	Space inside its edges.	None (default) to Extra large

A Group can also hold a Divider, a line between its blocks.

Giant text

Words that stretch to fill the full width, as large as they go.

Setting	What it changes	Options
Text	The words.	Default: "Be bold."
Font	Which of your theme's fonts.	Body, Subheading, Heading (default), Accent
Alignment	Which side the words line up to.	Left (default), Center, Right
Line height, Letter spacing	Space between lines and between letters.	Tight (default), Normal, Loose
Case	Default keeps your capitals; Uppercase makes every letter a capital.	Default (default), Uppercase
Animation, Repeat animation	How the words arrive, and whether they do it again each time they come into view.	None (default), Blur, Reveal
Read as a heading	Search engines and screen readers read the words as a heading. It looks the same. Use Main heading once per page.	No (default), Main heading (H1), Heading 2, Heading 3
Stay readable over photos, Text tone	As on the Text block.	Off by default.

The other blocks

Block	What it is for
Heading with button	A heading with a button beside it, for the top of a section. Settings: Position, Space between.
Decorative heading	A heading in a hand-made lettering style: Ransom note, Bubble, Liquid metal, Fashion magazine, Pixel script or Marker tag.
Video	A video you upload or a YouTube or Vimeo link, with Play automatically, Loop video, a Cover image, Height, Video shape and Corners.
Countdown	Counts down to a date and time, then shows Message when it ends. See Drops.
Email signup	An email field and button. Signups become customers in Shopify tagged "newsletter".
Marquee	A strip of words or pictures that scrolls across the screen.
Logo	Your logo, or your store name when there is no logo.
Social links	Icons linking to your accounts. Empty ones stay hidden.
Payment icons	An icon for each payment method your store accepts.
Spacer	Empty space of a set Height, 0 to 200 px.
Enter store button	Opens the password form. It only shows on the password page.
Custom Liquid	Code you paste in yourself.

On phones

A section set to Horizontal becomes a column on phones while Stack on mobile is on, so blocks side by side on desktop stack one under another. A picture set to Fit to image fills the width of its spot. Space above and Space below shrink a little, unless they are Custom.

Tips

• Start from the ready-made layout closest to what you want and change its blocks. It is quicker than building from an empty Section.
• To put words beside a photo, set Direction to Horizontal. To put several blocks in one column of that row, wrap them in a Group.
• To give photos side by side the same height, set each Image to the same Shape.
• Use Edge to edge only when every block is a photo. Words in it run to the very edge of the screen.

Good to know

• On your store, the section's content fades in and rises a little the first time it scrolls into view. Turn this off for the whole store in theme settings with Content fades in as it appears. It never happens in the editor, or for visitors who ask their device to reduce motion.
• In the "Add section" preview, Minimum height is left out, so a tall section shows only as tall as its blocks.

Related

• Shared settings
• Images: Side by side
• Image with text: Offset
• Text: Statement