Container Block
Use Container to group related blocks and control how they sit together. It is the main composition block for headings with copy, media with CTAs, feature rows, reusable callouts, cards, background-media groups, and nested content.
Setup Order
- Group related contentAdd only the blocks that belong to the same message or action. A heading, paragraph, image, and button can share one container when they support the same task.
- Set the layoutChoose vertical or horizontal direction, then set mobile stacking, alignment, and gap before styling the surface.
- Choose the widthUse fill for most page-width content, fit-content for small callouts, and custom width only when the container needs a deliberate size.
- Add surface styling only when neededUse background, border, radius, and shadow when the group needs visual separation from the surrounding section.
- Check linked containersUse a whole-container link only when every nested block points to the same destination and the link label describes the destination clearly.
Nested Blocks
Container can hold common content blocks such as Text, Image, Video, Button, Icon, nested Container, app blocks, and supported theme blocks. Use nesting sparingly so the Theme editor remains easy to scan.
| Nested pattern | Use |
|---|---|
| Text plus button | Simple CTA group, promo, or feature callout. |
| Media plus copy | Editorial layouts, campaign panels, or product-story modules. |
| Nested containers | Columns, small feature groups, or repeated inner items inside a larger surface. |
| App block | Place an app-controlled surface inside a controlled Fit Check layout. |
Product Details Containers
In the Product details section, containers become overlay panels for the product page. The section controls where panels sit around the media gallery; each Container block controls the panel’s inside spacing, width, surface, and nested product blocks.
Use Product details containers for real examples of split information/purchase panels, centered purchase cards, and side purchase cards.
Container Family
Fit Check includes a few container-style editor blocks. They share the same composition idea, but each one is meant for a different surface.
| Block | Use |
|---|---|
| Container | General-purpose grouping for text, media, buttons, icons, app blocks, nested containers, and supported theme blocks. |
| Container with background | Use when the group needs desktop/mobile background image or video media behind nested content, plus optional overlay/background layers. |
| Custom card | Use in card-style sections when a reusable card needs its own nested content, spacing, border, radius, background, and shadow. |
Use the general Container first. Choose Container with background when the background media is part of the composition, and Custom card when the parent section is building a repeated card layout.
Key Settings
| Setting group | What it controls |
|---|---|
| Link | Optional whole-container link, new-tab behavior, and link label. |
| Layout | Direction, mobile stacking, content alignment, and gap between nested blocks. |
| Colors | Optional local background color, opacity, and blur. |
| Border | Border enablement, width, opacity, and radius. |
| Shadow | Shadow enablement, mobile visibility, offset, blur, spread, color, and opacity. |
| Size | Desktop and mobile width behavior, custom widths, and optional custom height. |
| Padding | Shared padding or independent top, bottom, left, and right padding. |
Container with background also adds desktop and mobile background media controls, image/video fit controls, and content positioning controls so nested blocks can sit over the background media intentionally.
Layout Guidance
Use vertical direction for content that should read from top to bottom. Use horizontal direction when the children are peers, such as an icon beside text, product media beside copy, or a row of compact feature points.
Enable vertical-on-mobile for horizontal layouts unless the child blocks are intentionally small enough to stay side by side on phones.
Surface Guidance
Start without background, border, or shadow. Add a surface only when the container needs to stand apart from the parent section. If a section already has a strong background or border treatment, keep the container simpler so the page does not feel layered unnecessarily.
QA Checklist
| State | What to confirm |
|---|---|
| Nested content | The group is understandable in the Theme editor and on the storefront. |
| Horizontal desktop | Children have enough room and do not compress long labels or media. |
| Mobile stacking | Horizontal groups stack cleanly when vertical-on-mobile is enabled. |
| Custom width | The container does not create awkward narrow columns or overflow on small screens. |
| Linked container | The link destination, new-tab behavior, and link label are intentional. |
| Shadow and blur | Surface styling remains readable on light, dark, and media-backed sections. |