Skip to content

Custom liquid

Place custom Liquid, app snippets, or dynamic content anywhere in your layout.

Use this section to place custom Liquid output directly in a page layout, including app snippets, metafield content, or other dynamic storefront details. It is best for advanced customizations where you need precise control over what appears and where it appears.

The custom Liquid field is the heart of this section. Use it to paste app-provided snippets or add your own Liquid output for product details, collection content, metafields, or other dynamic elements.

Keep your setup focused and test in small steps. A short working snippet is much easier to troubleshoot than a large block of mixed code and content. For a broader overview of how sections work in themes, see Shopify documentation on sections and blocks

This section renders exactly what you add. If the Liquid is incomplete, unsupported in the current template, or pasted incorrectly, the section may appear blank or behave unexpectedly.

If you are adding app code, paste it as provided unless you are confident about changing it. If you are writing your own output, make sure the content matches the page where the section is used, since available data can differ by template.

Visibility settings control whether this section appears on desktop, mobile, or both. This is especially useful when you want different custom Liquid content or formatting for different screen sizes.

Use device-based visibility intentionally. If the section contains important content, hiding it on one device can remove that information completely from that customer experience.

  1. Start with a simple snippet. Confirm the section renders in the right place before adding more complex logic or markup.
  2. Match the template context. Use content that makes sense for the page type, since some dynamic output only works when the right data is available.
  3. Keep app snippets intact. Paste app-provided code as-is unless you fully understand how edits will affect the result.
  4. Use visibility with purpose. Hide the section on desktop or mobile only when you are intentionally building different layouts for different devices.
  5. Check both viewports. Review the section on desktop and mobile, since alignment, spacing, visibility, or media behavior can differ between screen sizes.
  6. Expect fallback styling. Blank, transparent, or default-style values usually preserve the surrounding styling, while explicit colors, gradients, or media overrides make the section feel more independent.