Content Blocks

Content blocks are reusable building blocks for page composition. Use this hub to decide which primitive owns the job, then open the focused block page for settings and publish checks.

Container

Group nested blocks and understand Container, Container with background, and Custom card composition patterns.

Text

Add rich text with typography, width, alignment, wrapping, color, shadow, and padding controls.

Image

Add responsive desktop and mobile imagery with loading, ratio, link, border, radius, and spacing controls.

Video

Add uploaded, external, TikTok, or Instagram video with playback, cover, mobile source, and sizing controls.

Button

Add CTA links using global button tiers or a scoped custom style.

Custom Liquid

Add store-specific Liquid, embeds, or small integrations that built-in blocks cannot cover.

Included Blocks

Block	Use
Container	Groups nested blocks, controls direction, alignment, gap, background, border, shadow, link behavior, and padding. Also covers Container with background and Custom card patterns.
Text	Adds rich text with width, alignment, typography, wrapping, shadow, color, and padding controls.
Image	Adds desktop and mobile image assets with loading, ratio, size, link, border, radius, and padding controls.
Video	Adds uploaded, external, TikTok, or Instagram video sources with autoplay, sound, controls, loop, cover, mobile-specific video, sizing, and borders.
Button	Adds a call-to-action link with primary, secondary, alternative, or custom styling.
Custom Liquid	Adds custom Liquid for store-specific markup, embeds, or integrations.

Setup Order

Choose the parent surfaceStart inside the section or template area where the content belongs instead of building a separate layout from scratch.
Add structure firstUse Container blocks for grouping and alignment before styling individual text, media, or buttons.
Use real mediaAdd real product, editorial, or brand media. Leave optional media blank only when the final page should intentionally have no media.
Check linksFor linked images, buttons, or containers, add clear link text or accessibility labels.
Use Custom Liquid carefullyOnly add Liquid you trust and can maintain. Review store-specific embeds before publishing and keep a note of what each embed does.

Container Guidance

Use Container for layout, not as decoration for every element. A good container groups related content: a heading plus text, a media block plus CTA, or a row of small feature items.

Setting	Use
Direction	Stack content vertically or lay it out horizontally.
Vertical on mobile	Keep horizontal desktop content readable on small screens.
Alignment	Align or distribute nested blocks.
Gap	Control space between children.
Surface colors, border, radius, shadow	Use only when the group needs a real visual surface.
Link	Make the whole group clickable only when every nested element points to the same destination.

Media Guidance

Block	What to check
Image	Use meaningful alt context, review mobile crop, and set eager loading only for above-the-fold critical images.
Video	Use a cover image when autoplay is off, avoid unexpected sound, and test mobile-specific video sources when configured.

Button Guidance

Use the global primary, secondary, or alternative style first. Choose custom button styling only for a specific campaign or surface that needs an intentional departure from global buttons.

Custom Liquid Guidance

Custom Liquid is powerful and should stay store-specific. Use it for embeds or small integrations that cannot be handled by app blocks or built-in blocks. Review the output on mobile and confirm it does not create layout shifts, hidden focus traps, or broken markup.

QA Checklist

State	What to confirm
Blank media	Optional blank image/video settings do not leave visible placeholders.
Linked content	Links have clear accessible labels and open behavior is intentional.
Long text	Text wraps without overlapping neighboring blocks.
Nested containers	Layout remains understandable in the editor and storefront.
Custom Liquid	Markup renders without Liquid errors and does not break surrounding layout.