Custom section
Compose a section from the current Strata theme blocks.
Custom section is a flexible container for compatible Theme blocks. Use it when the available blocks can form the content you need but no dedicated Strata section has the right structure.
[!NOTE] The current source exposes the
@themeblock slot and the public Group and Text theme blocks. The picker can change as the theme grows, so verify the block list in the current Theme Editor before treating this page as a complete release inventory.
Add Custom section
In Shopify's theme editor, add Custom section to a compatible template or open an existing section. It is unavailable in the header and custom.overlay groups.
Content
| Setting | What it controls | Default |
|---|---|---|
| Background | Optional image behind the block content. | No default. |
The background is decorative in the current implementation and is rendered behind the content. It has no separate mobile source or ratio control in this section. Check the focal subject and text contrast in both viewport sizes.
Spacing
| Setting | What it controls | Options or default |
|---|---|---|
| Section spacing | Chooses the section's spacing scale. | None, Small, Medium, or Large. Default: Medium. |
| Top spacing | Adds or removes the section's top spacing. | Enabled by default. |
| Bottom spacing | Adds or removes the section's bottom spacing. | Enabled by default. |
Theme blocks
The section accepts @theme blocks. The current public block picker contains Group and Text. Blocks are rendered in Theme Editor order. Group can contain nested theme blocks, so use it to create a row or column and then add compatible children.
Group
| Setting | What it controls | Options or default |
|---|---|---|
| Layout direction | Arranges the group's children horizontally or vertically. | Horizontal or Vertical. Default: Vertical. |
| Alignment | Aligns children when the direction is vertical. | Left, Center, or Right. Default: Left. Visible only for Vertical. |
| Padding | Adds group padding. | 0–200 px, step 2 px. Default: 0 px. |
The available Group presets are Column (vertical, left-aligned) and Row (horizontal). A horizontal group does not expose the vertical Alignment control.
Text
| Setting | What it controls | Options or default |
|---|---|---|
| Text | The text content displayed by the block. | Text. |
| Text style | Sets the block's title, subtitle, or normal-text treatment. | Title, Subtitle, or Normal text. Default: Title. |
| Alignment | Aligns the text within the block. | Left, Center, or Right. Default: Left. |
Use Normal text for supporting copy instead of using a title style for every block. Keep the order of headings and body copy logical for assistive technology.
Desktop and mobile behavior
The section keeps the block order and group direction, while available space can change wrapping and the visual result. The background uses one source and is fitted behind the section; no mobile-specific image setting exists here. Test the deepest Group nesting, longest Text value, and background focal subject on desktop and mobile before publishing.
Accessibility and media
- Use the dedicated section or content blocks for structured headings, links, and forms when they are available.
- Do not use Text style only to create a visual heading without preserving a logical reading order.
- Keep sufficient contrast between the background image and every text block.
- Make sure nested groups do not create an unexpected keyboard or reading order.
- Treat the background as decorative; essential information must remain in the text blocks.
Common issues
| Symptom | Safe check |
|---|---|
| A block is not available | Open the current Theme Editor picker; @theme availability is release-dependent and is not a promise that every section block appears here. |
| Alignment is missing in Group | Choose Vertical under Layout direction; Alignment is conditional. |
| Text wraps unexpectedly | Shorten the content, adjust Group Padding, or test the other direction at the target viewport. |
| Background reduces readability | Replace or crop the image and recheck text contrast; the section has no overlay color control. |
| Content appears in the wrong order | Reorder the direct blocks or inspect the nested order inside each Group. |
Related guides
Evidence boundary
No screenshot is attached. Capture the accepted Theme Editor block picker and a matching storefront fixture before documenting any additional @theme blocks, nested limits, responsive measurements, or background interaction details.