Custom liquid
Render a small merchant-authored Liquid or HTML fragment inside a controlled section.
Custom liquid is an escape hatch for content that Strata's standard sections do not provide. Use it only when the requirement is understood and maintained by someone comfortable with Shopify Liquid and storefront markup.
[!NOTE] The setting order and options below match the current section schema. The section renders the authored output directly, so its responsive, accessibility, privacy, and performance behavior must be reviewed from the actual snippet; this page does not claim a universal result.
Add Custom liquid
In Shopify's theme editor, add Custom liquid to a compatible template or open an existing section. It is disabled in the custom.overlay group.
Content
| Setting | What it controls | Default |
|---|---|---|
| Custom liquid | Liquid and markup authored for this section. | No default. |
An empty field produces no authored content inside the section. Keep the snippet focused on the merchant outcome and prefer a dedicated Strata section when it already provides the required control.
Layout
| Setting | What it controls | Options or default |
|---|---|---|
| Content width | Sets the width of the authored content container. | Narrow, Page width, or Full width. Default: Page width. |
Full width changes the content container treatment; it does not make arbitrary child markup responsive. The snippet remains responsible for its own internal layout.
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. |
Responsive and accessibility review
Strata does not automatically turn arbitrary Liquid/HTML into a responsive, accessible component. Before publishing, review:
- a real desktop and mobile viewport with the longest expected text;
- headings, landmarks, labels, keyboard focus, link purpose, and color contrast;
- images, embedded media, and any interactive controls;
- loading, consent, privacy, and performance implications of external resources.
Do not place passwords, private tokens, customer data, hard-coded preview URLs, or third-party credentials in the field. Treat pasted scripts and external embeds as code that needs its own review.
Common issues
| Symptom | Safe check |
|---|---|
| The content is too narrow or wide | Choose the matching Content width, then inspect the snippet's own layout rules. |
| Mobile content overflows | Test the snippet's children and media; the section cannot correct arbitrary fixed widths. |
| A control cannot be reached | Inspect the authored markup's labels, focus order, and keyboard behavior. |
| An embed is blank | Check its provider, consent requirements, allowed URL, and whether the current preview permits it. |
| The section appears empty | Confirm Custom liquid is not blank and that the snippet's conditions have data to render. |
Related guides
Evidence boundary
No screenshot is attached. A screenshot would describe only one authored snippet and could be misleading. Add future media only when the snippet is approved, contains no private data, and has been checked on the current storefront build.