Custom liquid

Featured links

1. Shopify documentation on metafields and dynamic sources
2. Shopify documentation on sections and blocks
3. Company XYZ documentation on visibility settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this block when you need to render custom Liquid output directly in a page layout. It is best for advanced use cases such as app snippets, metafields and dynamic sources, or small pieces of dynamic content that are not covered by built-in blocks.

This block is best suited to advanced users. Invalid or context-dependent code can output nothing, show unexpected content, or disrupt the surrounding layout.

Core settings

The main code field controls what this block renders. Use it for focused customizations where placement matters, such as inserting app output between content blocks or showing stored data in a specific spot.

Keep each block limited to one clear purpose. Smaller snippets are easier to test, easier to move, and less likely to break when the rest of the layout changes.

For a broader overview of how theme content is organized, see Shopify documentation on sections and blocks

Tip

When pasting app-provided code, keep it exactly as provided and test it on the page type where customers will see it.

Standard block settings

Visibility settings

Use visibility controls to choose whether the block appears on all devices, only on desktop, or only on mobile. This is especially useful when custom output needs different placement on smaller screens or when you want separate mobile and desktop versions of the same idea.

If you create device-specific versions, keep their content aligned so customers do not see conflicting information across screen sizes. See Visibility settings for the shared behavior of these controls.

Usage notes

1. Keep snippets focused. Use one block for one job, such as a single app snippet, one metafield output, or one custom message.
2. Test on the right template. Custom Liquid often depends on the data available on a specific page type, so always preview it where it will actually appear.
3. Plan for responsive layouts. Use visibility settings when the custom output should move, simplify, or disappear on a particular device size.
4. Check for empty states. If nothing appears, the code may rely on data that is missing for that product, collection, article, or page.
5. Avoid layout clutter. Short, targeted code blocks are easier to maintain and less likely to create spacing or alignment problems around nearby content.