This guide covers the sections you use to convey copy and content rather than products: heading and paragraph layouts, multi-column features, FAQs, and similar.
| Section | Purpose |
|---|---|
| Image with text | A two-column layout: image on one side, copy and buttons on the other |
| Multicolumn | A row of columns, each with optional image, heading, description, and button. Grid or carousel mode |
| Rich text | A flexible composition of heading, text, button, and spacing blocks. Use for hero copy, mission statements, or callouts |
| Text | A short text block. This is a sub-block used inside other sections (such as Custom section), not a top-level section |
| FAQ | An accordion of question and answer pairs |
These content-focused sections do not show products. The Text item listed above is a block used inside flexible sections, not a standalone section. For product display, see sections-product-display.md.
Image with text section
Two columns: image on one side, content on the other. Use for brand stories, feature explanations, or anywhere you want to pair an image with substantial copy.
Image settings
| Setting | Range or options | Default | What it controls |
|---|---|---|---|
| Image | Image picker | Empty | The image displayed on one side of the layout. If empty, a placeholder image is shown in preview/editor states |
| Image ratio | Adapt, Square, Portrait, Landscape | Adapt | How the image is cropped. Adapt uses the natural ratio |
Content settings
| Setting | Type | Default | Notes |
|---|---|---|---|
| Color scheme | All schemes | Scheme 1 | Color scheme applied to the section |
| Subheading | Text | Localized default | A small label above the heading (eyebrow) |
| Heading | Text | Localized default | The main heading |
| Heading size | Small, Medium, Large | Medium | Visual size of the heading |
| Text | Rich text | Localized default | The main paragraph copy. Supports basic formatting and links |
Buttons
The section supports up to two buttons.
| Setting | Type | Notes |
|---|---|---|
| Button 1 label | Text | Leave empty to hide the first button |
| Button 1 link | URL picker | Where the button links to |
| Button 2 label | Text | Leave empty to hide the second button |
| Button 2 link | URL picker | Where the button links to |
Layout
| Setting | Range or options | Default | What it controls |
|---|---|---|---|
| Layout | Image left, Image right | Image left | Which side the image is on. Image left is the conventional layout for left-to-right reading |
| Vertical alignment | Top, Center, Bottom | Center | How the content aligns vertically when the text column is shorter than the image |
| Show accent line | On | Display a small decorative line above the heading | |
| Content gap | 20 to 80 px in steps of 4 | 40 | Space between the image and content columns |
Spacing
| Setting | Range | Default | What it controls |
|---|---|---|---|
| Padding top | 0 to 100 px in steps of 4 | 24 | Space above the section |
| Padding bottom | 0 to 100 px in steps of 4 | 24 | Space below the section |
Feature blocks
Image with text accepts feature blocks below the main content. Each feature block is a short text point.
| Block type | Limit | Purpose |
|---|---|---|
| Feature | Up to 5 | A short feature point. Use for selling points like "Made in the USA", "Free shipping over $50", or "30-day returns" |
| Custom Liquid | Multiple | A code field for custom HTML or app-provided code snippets where appropriate |
The maximum total blocks (across all types) is 6. The default preset includes 3 feature blocks.
Where it can be used
Image with text is disabled on the password template and inside header, footer, and aside groups. It is available on all other templates.
Multicolumn section
A row of columns, each containing an image, heading, description, and optional button. Use for feature lists, team sections, brand value propositions, or step-by-step explanations.
Content settings
| Setting | Type | Default | Notes |
|---|---|---|---|
| Color scheme | All schemes | Scheme 1 | Color scheme applied to the section |
| Heading | Text | Localized default | Section heading above the columns |
| Subheading | Text | Localized default | Short paragraph below the heading |
Layout settings
| Setting | Range or options | Default | What it controls |
|---|---|---|---|
| Display mode | Grid, Carousel | Grid | Grid arranges columns in a static layout. Carousel makes them swipeable, useful when you have more columns than fit on screen |
| Columns on desktop | 2 to 6 | 3 | Columns visible on screens 990px and wider |
| Columns on tablet | 1 to 4 | 3 | Columns visible on screens 750px to 989px |
| Columns on mobile | 1 or 2 | 1 | Columns visible on screens narrower than 750px |
Column style settings
| Setting | Range or options | Default | What it controls |
|---|---|---|---|
| Image ratio | Adapt, Square, Portrait, Landscape, Wide | Adapt | Aspect ratio of column images |
| Image width | 80 to 400 px in steps of 10 | 200 | The maximum image size within each column. Useful for icon-style columns where you want compact images |
Carousel settings (only when display mode is Carousel)
| Setting | Range or options | Default | What it controls |
|---|---|---|---|
| Autoplay | Off | Auto-rotate columns. Off by default | |
| Autoplay speed | 3 to 10 seconds | 5 | Time between auto-advances |
| Show arrows | On | Display previous and next arrows | |
| Show dots | On | Display pagination dots |
Spacing
| Setting | Range | Default | What it controls |
|---|---|---|---|
| Column gap | 8 to 48 px in steps of 4 | 32 | Space between columns |
| Padding top | 0 to 100 px in steps of 4 | 24 | Space above the section |
| Padding bottom | 0 to 100 px in steps of 4 | 24 | Space below the section |
Column blocks
Each column is a block with these settings:
| Block setting | Type | Notes |
|---|---|---|
| Image | Image picker | Optional. Column image |
| Heading | Text | Column heading |
| Description | Rich text | Column body copy |
| Button label | Text | Optional button text |
| Button link | URL picker | Optional button link |
The section also accepts a Custom Liquid block for app-provided code snippets where appropriate. Custom Liquid blocks render as their own column item in the grid or carousel.
The default preset includes 3 column blocks. Add or remove as needed.
Where it can be used
Multicolumn is disabled on the password template and inside header, footer, and aside groups.
Rich text section
A flexible composition section. Build a sequence of heading, text, button, and spacing blocks to create custom content layouts. Use for hero copy, mission statements, page introductions, or any content that needs more structure than a single paragraph.
Layout settings
| Setting | Range or options | Default | What it controls |
|---|---|---|---|
| Color scheme | All schemes | Scheme 1 | Color scheme applied to the section |
| Maximum width | Narrow, Medium, Full | Narrow | How wide the content area is. Narrow is best for prose; Full uses the page edge to edge |
| Alignment | Left, Center, Right | Center | Default alignment for all blocks (each block can override) |
Spacing
| Setting | Range | Default | What it controls |
|---|---|---|---|
| Padding top | 0 to 100 px in steps of 4 | 24 | Space above the section |
| Padding bottom | 0 to 100 px in steps of 4 | 24 | Space below the section |
Blocks
Rich text accepts six block types. Total blocks limited to 10.
| Block type | Limit | Purpose |
|---|---|---|
| Heading | Up to 3 | A heading block. Choose semantic level (H1 to H6, or paragraph) and alignment (inherit from section, or override) |
| Text | Up to 3 | A rich text paragraph block. Supports formatting and links |
| Button | Up to 2 | A button block. Choose style (primary, secondary, link), label, link, and whether to open in a new tab |
| Spacing | Multiple | A vertical spacer block. Choose small, medium, or large to add visual breathing room between blocks |
| Custom Liquid | Multiple | A code field for custom HTML or app-provided code snippets where appropriate |
| App block | Unlimited | An app insertion point |
Heading block details
| Setting | Range or options | Default | Notes |
|---|---|---|---|
| Text | Text | Localized default | The heading text |
| Heading size | H1, H2, H3, H4, H5, H6, p | H2 | Semantic heading level. The visual size matches the level. Use p for paragraph styling |
| Heading alignment | Inherit, Left, Center, Right | Inherit | Inherit uses the section's alignment. Override per heading if needed |
Button block details
| Setting | Range or options | Default | Notes |
|---|---|---|---|
| Label | Text | Localized default | Button text |
| Link | URL picker | Empty | Where the button links |
| Style | Primary, Secondary, Link | Primary | Primary is filled, Secondary is outlined, Link is text-only with underline |
| Open in new tab | Off | When on, the button opens in a new tab. Useful for external links |
Default preset
The default preset includes:
- Heading block (H2, inherit alignment)
- Text block
- Primary button block
- Secondary button block
Adjust to fit your content needs.
Text block
The Text block is a sub-block, not a section. It is used inside other sections (such as Custom section) to add a small text element with style and alignment options.
| Setting | Range or options | Default | Notes |
|---|---|---|---|
| Text | Text | Localized default | The text content |
| Text style | Title, Subtitle, Normal | Title | Visual style preset. Title is largest, Normal is body-copy size |
| Alignment | Text alignment picker | Left | Text alignment |
Use Text inside Custom section when you want a small text element with style options. For longer prose, use the Rich text section's text block instead.
FAQ section
An accordion of question and answer pairs. Customers click a question to expand the answer. Use for product FAQs, shipping policies, return policies, or any structured Q-and-A content.
Settings
| Setting | Range or options | Default | What it controls |
|---|---|---|---|
| Color scheme | All schemes | Scheme 1 | Color scheme applied to the section |
| Heading | Text | Localized default | Section heading above the FAQ list |
| Subheading | Text | Empty | Optional short paragraph below the heading |
| Heading level | H2, H3, H4 | H2 | Semantic heading level for the section heading. Use H2 if the FAQ is a major section, H3 if nested under another H2, and so on |
| Padding top | 0 to 100 px in steps of 4 | 24 | Space above the section |
| Padding bottom | 0 to 100 px in steps of 4 | 24 | Space below the section |
FAQ item blocks
Each Q-and-A pair is a block.
| Block setting | Type | Notes |
|---|---|---|
| Question | Text | The question, displayed as the accordion summary. Always visible |
| Answer | Rich text | The answer, hidden until the customer clicks the question. Supports formatting and links |
The maximum number of FAQ items is 15. The default preset includes 3 FAQ items as starter content.
How customers interact with the FAQ
- The first question is collapsed by default (no auto-open).
- Customers click any question to expand its answer.
- Opening one question closes any other open question.
- The accordion uses buttons with
aria-expandedandaria-controlsfor accessibility. - Keyboard users can navigate to questions with Tab and toggle them with Enter or Space.
- Arrow Up, Arrow Down, Home, and End move focus between questions.
Where it can be used
FAQ can be added to all template types. Use a FAQ section on:
- The home page (top customer concerns)
- Product pages (product-specific questions)
- The contact page (frequently asked questions before reaching out)
- Dedicated FAQ pages
- Shipping or return policy pages
Multi-language and multi-currency
- All headings, subheadings, button labels, paragraphs, FAQ questions, and FAQ answers can be translated through Shopify's translation system after you add translations for those section settings.
- For Image with text and Multicolumn images, alt text comes from the image file, with section or block text used as fallback where available. Translate image-related content in Shopify where available.
- Buttons that link to currency-specific URLs (rare, but possible) follow Shopify Markets routing.
See markets-localization.md for the full localization workflow.
What to do next
| If you want to | Read |
|---|---|
| Configure product display sections | sections-product-display.md |
| Configure promotional sections | sections-promotional.md |
| Configure structural sections (header, footer) | sections-structural.md |
| Configure flexible sections (Custom Liquid, Custom section, Group) | sections-flexible.md |
End of sections-content.md.