Page Building

Sections, blocks, and groups

Sections, blocks, and groups The theme is built on Shopify sections and blocks. Once you see how they fit together, the editor makes sense and most layout questions answer themselves. This article covers the pieces. For the settings that repeat across all of them (color, spacing, layout, visibility), see Common section settings. Sections, blocks, and presets A section is a horizontal band of a page: a banner, a product grid, a row of columns. You add, reorder, hide, and remove sections per page. A block is a piece of content inside a section: a heading, an image, a button. In the theme almost all content is built from blocks, so a section is mostly a container you fill. You add and reorder blocks under the section they belong to in the editor sidebar. Many of the theme's sections are presets of one flexible section called Section. When you add Image banner, Multicolumn, or Collage, you are adding the same Section with a different starting layout and starting blocks. They share one set of controls, so what you learn on one carries to the rest. The Section, a blank canvas The Section is the heart of the theme. On its own it is an empty container with a full set of layout controls. Add it from Add section under Layout, then fill it with blocks. Its presets give you a finished starting point. Each one appears as its own entry in Add section: - Image banner, Video banner, Parallax image banner: a heading and text over a background photo, video, or slow-scrolling image. - Split banners: two linked image cards side by side. - Multicolumn: a row of text columns. - Collage, Lookbook: an arrangement of linked media cards. - Video with text: a video next to a caption. - Brand ethos, Quote, Highlights: prebuilt storytelling layouts. - Newsletter: an email signup with a heading. - Countdown: a countdown timer over a background. - Separator: a single divider line. Because every preset is the same Section underneath, its controls are the ones in Common section settings: Layout, Size, Appearance, Border, and the standard color, padding, margin, and visibility. Content slots in specialized sections Some sections wrap a special feature (a slideshow, a scroll effect, a list) with standard content slots. In those sections you will see named regions in the block list. The Display list section, for example, has an Above content slot and a Below content slot around its list. You add headings, text, or buttons into a slot, and they share the section's background and spacing. Other sections hold their content blocks inside the feature itself: in Hero slideshow, each slide is a slot you fill with headings, text, and buttons. Groups Groups are containers you place inside a section to arrange a set of blocks together. The theme has four. Group The everyday container. It has the same Layout controls as a section (Direction, Gap, alignment), applied only to the blocks inside it. A common use: you have a heading, text, and two buttons stacked vertically, and you want the two buttons side by side. Add a Group, set its Direction to Horizontal, and put the two Button blocks inside it. A Group can also carry a Link, which makes the whole group clickable. It comes in three presets: Group, Icon with text, and Icon with details. Reach for a plain Group unless you need a background or a border, since it keeps the page lighter. Styled group A Group plus Appearance and Border settings: a background color, image, or video, an overlay, a border, a corner radius, and a shadow. Use it to make a card or a highlighted box inside a section. Proportional group and Proportional part For side-by-side layouts where you control the width split, like an asymmetric two-column banner. A Proportional group holds Proportional part blocks, and you put your content inside each part. Each part has a Proportion from 1 to 5. The theme compares the values across the group, so two parts set to 1 and 1 share the space evenly, while 2 and 1 split it two to one. On phones the parts stack, and each part's Height takes over. Horizontal content A columns block. It lays its child columns out in a row that wraps to fewer columns as the screen narrows. Set Minimum column width to control when the wrap happens. the theme's Multicolumn preset is built from it. Tips - Reach for a plain Group first. Switch to a Styled group only when you need its background or border. - A preset is only a starting point. Once you add Image banner or Multicolumn, you can change every setting and swap, add, or remove the blocks inside it. - To move a block out of a group, drag it in the block list. To group existing blocks, add the group first, then drag the blocks into it.

Common section settings

Common section settings Most sections and container blocks share the same controls, grouped under the same headings in the editor. This article documents them once. Other articles link here instead of repeating them, and cover only what is unique to a given section. Not every section shows every group. A simple section shows Color, Padding, Margin, and Visibility. The flexible Section and the group blocks add Layout, Size, Appearance, and Border. You see the groups that apply. Color On simple top-level sections these controls sit in their own Color group. On the flexible Section and container blocks they sit under Appearance instead. - Color scheme: the set of colors (background, text, accent, buttons) applied to the section. Schemes are defined in Theme settings under Colors. Change a scheme there and every section using it updates together. - Inherit color scheme: only on container blocks (under Appearance), keeps the parent section's scheme. Turn it off to set a Color scheme for that block alone. - Use dark header theme over this section: switches the header to its dark styling while it sits over this section. Turn it on when the section background is dark enough that the default header is hard to read. Layout How the blocks inside the section are arranged. - Direction: Vertical stacks the blocks. Horizontal places them in a row. - Wrap elements when space is limited: with a horizontal direction, lets blocks drop to the next line instead of overflowing. - Gap: the space between blocks, in pixels. - Horizontal alignment and Vertical alignment: where the blocks sit inside the section. The options follow the direction, and include Left, Center, Right, Top, Bottom, and the distributions Space between, Space around, and Space evenly. - Use different layout on mobile: turn this on to set a separate Direction, Gap, and alignment for phones. The controls split into a Desktop layout group and a Mobile layout group. Size - Width: Full spans the screen edge to edge, Page matches the standard content width, and Custom lets you set your own. Custom adds a Desktop width and Mobile width in pixels. (Inside a container block the first option is Fit, which shrinks to the content.) - Minimum height: Fit sizes to the content. Pixels sets a fixed height with Desktop height and Mobile height. Percent sets the height as a share of the screen, useful for a full-height banner. Appearance - Background: None is transparent. Image adds an Image, an optional Mobile image, and Sticky background (the image holds still while the page scrolls). Video adds a Video picker. - Overlay: tints the area over the background so text stays readable. None, Solid (pick a Color), or Gradient (pick a Gradient). Border - Style: None, Solid, Dashed, Dotted, Inset, or Outset. Any style but None adds a Border thickness and a Color. - Corner radius: rounds the corners, in pixels. - Shadow: a drop shadow. None, Subtle, Medium, or Strong. Padding Space inside the section, around its content. Set Top, Bottom, Left, and Right in pixels. Turn on Use different paddings on mobile to set separate phone values, which splits the controls into Desktop padding and Mobile padding. Margin Space outside the section, between it and the sections above and below. Set Top and Bottom in pixels. Turn on Use different margins on mobile for separate phone values. Visibility - Visibility: where the section shows. All shows it everywhere, Desktop hides it on phones, Mobile hides it on desktop. Tips - To recolor a section, assign it a Color scheme rather than picking colors one by one. Edit the scheme in Theme settings and every section using it updates. - Padding controls space inside a section's background. Margin controls the gap between two sections. Use margin to separate sections, padding to breathe inside one. - Set a value on mobile only when the desktop value looks wrong on a phone. Leaving the mobile toggle off keeps one value for every screen, which is easier to maintain.

Content blocks reference

Content blocks reference Content blocks are the small pieces you drop into a section to build a layout: a paragraph, an image, a button, a countdown. For how blocks fit inside sections and groups, see Sections, blocks, and groups. This article documents one block per heading and covers only the settings unique to each. The shared controls (padding, margin, color, visibility) are described once in Common section settings. Add a content block 1. In the theme editor, select the section you want to add to. 2. Open the section's blocks and click Add block. 3. Pick the block. Rich text, Text, Accent text, Button, Eyebrow, Badge, and Tabs sit under the Basic group. Image, Video, and Editorial images sit under the Media group. Icon and Illustration are under Decorative, Quote, Jumbo text, Text reveal, and Marquee under Storytelling, Countdown timer under Promotional, Email signup under Forms, and Separator under Layout. 4. Configure it in the settings panel. Each section allows its own set of blocks, so a block you see in one section may not appear in another. Rich text A multi-paragraph text block for body copy. The Text field accepts paragraphs, headings, lists, and links. - Typography: pick a Preset (the named text styles from Display down to Caption) and a Font (Body or Heading). Choose Custom under Preset to expose Size, Line height, Thickness, Letter spacing, Text transform, and Line wrap. - Layout: Width is Fit (shrinks to the text) or Fill (takes the available width). Max width caps the line length: None, Narrow, Medium, Normal, or Custom (sets a Custom width in pixels). Inherit alignment keeps the parent's alignment; turn it off to set Alignment for this block. - Appearance: Apply custom color sets a Custom color for the text. Emphasis dims the text to Muted or Faded. This block also uses the standard Padding controls. See Common section settings. Text A single plain-text block. Same typography surface as Rich text, but the Text field is plain: line breaks become new lines, with no headings, lists, or links. Use it for a short line where formatting is more than you need. Its settings match Rich text above: Typography, Layout (Width, Max width, Inherit alignment, Alignment), and Appearance (Apply custom color, Emphasis). This block also uses the standard Padding controls. See Common section settings. Accent text A display text block for a styled statement. The Text field takes formatted text, and any italic or bold words inside it get their own accent treatment, the same system the Quote block uses. - Typography: pick a Preset and Font, or choose Custom under Preset to expose Size, Line height, Thickness, Letter spacing, Text transform, and Line wrap. - Layout: Width, Max width, Inherit alignment, and Alignment, as on Rich text above. - Italic accent and Bold accent: style the italic or bold words in the text. Style for each is None, Color, Underline, Gradient sweep, or Shimmer. Keep italic and Keep bold keep the original slant or weight alongside the accent. - Color: Inherit color scheme keeps the section scheme; turn it off for a Color scheme. Apply custom color sets a Custom color. This block also uses the standard Padding controls. See Common section settings. Eyebrow A short label that sits above a heading, in small uppercase type. The Text field holds the label. - Use accent color: paints the label in the scheme's accent. When on, Accent color picks Default (the standard accent) or Overlay (the accent tuned for text over images). - Decorative line: adds a hairline beside the text. None, Left (one line), or Both. - Layout: Inherit alignment keeps the parent's alignment; turn it off for Alignment. Emphasis dims the text to Muted or Faded. - Appearance: Apply custom color sets a Custom color. This block also uses the standard Margin controls. See Common section settings. Badge A small label chip, for a short callout like "New" beside a heading. - Text: the label on the chip. - Size: Small or Medium. This block also uses the standard Margin controls. See Common section settings. Quote A styled blockquote with an optional quotation mark. The Text field holds the quote. - Typography: pick a Preset and Font, or choose Custom to expose Size, Line height, Thickness, Letter spacing, Text transform, and Line wrap. - Layout: Alignment and Mobile alignment (Same as desktop keeps the desktop value). Max width is Full, Narrow, Medium, Normal, or Custom. - Decorative mark: Show quotation mark adds a large quote glyph. - Italic accent and Bold accent: style any italic or bold words inside the quote. Style for each is None, Color, Underline, Gradient sweep, or Shimmer. Keep italic and Keep bold keep the original slant or weight alongside the accent. - Color: Inherit color scheme keeps the section scheme; turn it off for a Color scheme. Apply custom color sets a Custom color for the text. This block also uses the standard Padding controls. See Common section settings. Jumbo text A single oversized display line, for a statement that works as a graphic element. Line breaks in the Text field become new lines. - Font: Heading or Body. - Alignment: Left, Center, or Right. - Color: Text follows the scheme text color, Accent paints the line in the scheme's accent. Apply custom color overrides both with a Custom color. This block also uses the standard Margin controls. See Common section settings. Text reveal A statement that fills with color in reading order as it scrolls through the screen, so the sentence lights up while the shopper reads it. - Text: the statement. Keep it to a sentence or two; the effect reads best on short text. - Typography: Size is Heading 1, Heading 2, Heading 3, Display small, or Large. Style is Regular or Italic. - Layout: Alignment and Line width, which caps how long a line can run. - Color: Apply custom color sets a Custom color for the lit text; otherwise it uses the scheme text color. This block also uses the standard Margin controls. See Common section settings. Image A single image with its own size and frame. Image is the desktop picture; Mobile image swaps in on phones (it falls back to the desktop image when not set). - Link: makes the image clickable. When set, Open in new tab and Link label (read to screen readers) appear. - Aspect ratio: Original keeps the file's own ratio, or pick Square (1:1), Landscape (16:9), Portrait (4:5), or Custom. Custom replaces the ratio with a fixed Custom height in the size groups. - Desktop size and Mobile size: Width is Full, Percent, or Pixels, each revealing its own Custom width field. - Border: Style (None, Solid, Dashed, Dotted, Inset, Outset) with Border thickness and Color, plus Corner radius to round the frame. - Animation: None, Sway left, or Sway right gives the image a slow tilt. This block also uses the standard Padding controls. See Common section settings. Video Plays an uploaded or hosted video. - Media: Source is Uploaded (pick a Video from your files) or External URL (paste a YouTube or Vimeo URL, and set Video alt text for accessibility). Poster image is the still shown before play; it falls back to the video's preview frame. - Playback: Autoplay (forces the video to play muted), Loop, Show controls, and Mute. - Appearance: Aspect ratio is Landscape (16:9), Classic (4:3), Square (1:1), or Portrait (9:16). This block also uses the standard Margin controls. See Common section settings. Editorial images A composed pair of photos: a large Main image with a smaller Detail image overlapping it, plus a caption and a button. Use it to give a section an editorial, magazine-like anchor. The Editorial images block: a main image with a smaller detail image overlapping it - Images: Main image, Detail image, and a Caption shown alongside them. - The block carries its own Button (the preset labels it "Discover"). Select it in the block list to change its label, link, and style like any Button block. - Animation: Enable sway animation gives the images a slow tilt. - Color: Inherit color scheme keeps the section scheme; turn it off for a Color scheme. This block also uses the standard Padding controls. See Common section settings. Button A link or action button. See Buttons for the full styling reference. In short: Label is the visible text, Link is the destination, Style and Size match the theme button styles, and Show arrow adds a trailing arrow. Desktop size and Mobile size set the button width. The block uses the standard Margin controls. Email signup A newsletter signup form: an email field and a submit button. A new subscriber is added to your customer list with the newsletter tag, so you can target them in email marketing. - Style: Default or Editorial layout. - Email placeholder: the gray prompt inside the field (default "Your email address"). - Button label: the submit button text (default "Subscribe"). - Success message: the confirmation shown after a successful signup (default "Thank you. You're subscribed."). - Small text below form: optional fine print under the field, such as a consent line. - Alignment and Max width: position and cap the form's width. This block also uses the standard Margin controls, including separate mobile margins. See Common section settings. Icon A small symbol, picked from a bundled set or uploaded. - Width: the icon size in pixels. - Type: Default picks a bundled Icon from the grouped list (Shipping & delivery, Payments, Materials & care, and so on). Custom uploads your own Custom icon and exposes Make icon round. - Apply custom color: for a default icon, overrides the inherited color with a Custom color. A default icon otherwise takes the section's text color. This block also uses the standard Margin controls. See Common section settings. Illustration A hand-drawn line illustration from the theme's set, rendered in the scheme's text color. - Illustration: pick the drawing from the grouped list (Wardrobe, Footwear, Kitchen, Travel, and many more). - Size: a percentage of the standard illustration height, so a row of illustrations lines up at the same value. Use a different size on mobile adds a Mobile size. - Decorative: marks the illustration as decoration so screen readers skip it. Leave it off when the drawing carries meaning. - Color: Text (auto) follows the scheme text color, or Custom sets a fixed Custom color. This block also uses the standard Margin controls, including separate mobile margins. See Common section settings. Countdown timer A live timer counting down to a date. - Date (format YYYY-MM-DD) and Time (24-hour HH:MM, in your store timezone) set the target. - Show days: includes a days unit alongside hours, minutes, and seconds. - Show separator: shows a colon between the units. - Alignment: Left, Center, or Right. - Size: scales the digits as a percentage. - Hide when expired: removes the timer once it reaches zero. Turn it off to keep it visible and show an Expired message instead. In the editor the timer stays visible so you can keep styling it. This block also uses the standard Padding, Margin, and Visibility controls, including separate mobile values. See Common section settings. Marquee A row of text and images that scrolls sideways on a loop. You fill it with child blocks. - Add Text and Image blocks inside the marquee. A Text child holds a phrase with its own Color (Auto, Accent, or Custom). An Image child holds a single picture, sized by the marquee's Image height. - Behavior: Separator is the glyph placed between items (Bullet (•), Slash (/), Angle bracket (›), Middle dot (·), Star (✦), Diamond (◆), a long dash, or None). Scroll speed, Pause on hover, and Direction (Forwards or Reverse) control the motion. Text size and Image height scale the items. - Color: Inherit color scheme keeps the section scheme; turn it off for a Color scheme. This block also uses the standard Margin controls. See Common section settings. Separator A divider line. - Orientation: Horizontal or Vertical. - Appearance: Style is Solid, Dashed, Dotted, or Fade (a line that fades at both ends). Thickness and Opacity set its weight and strength. - Size: for a horizontal line, Limit width caps the length and reveals Width. For a vertical line, Height sets the length. - Color: Apply custom color sets a Custom color; otherwise the line takes the scheme color. This block also uses the standard Margin controls. See Common section settings. Tabs A pill-style tab group: a bar of labelled tabs above a panel that swaps as the shopper switches tabs. You fill it with Tab child blocks, and each Tab holds its own content blocks. - Bar label: an accessible label for the tab bar, read to screen readers. - Card surface: wraps the panel in a raised card surface instead of sitting flush with the section. - Each Tab child carries a Tab name, the text shown on its pill in the bar. Open a Tab and add content blocks for what shows when it is selected. This block also uses the standard Color and Padding controls. See Common section settings. Tips - Width and Max width do different jobs on the text blocks. Width decides whether the block fills its column, while Max width caps how long a line of text can run for readability. - Inherit alignment and Inherit color scheme are on by default so a block matches its section. Turn them off only when one block needs to differ. - Turn on Decorative for an Illustration that is purely ornamental, so it does not clutter the page for screen reader users. Leave it off when the drawing stands in for a label. - For a looping logo strip, set the Marquee Separator to None and add Image children instead of text.