Custom Liquid and HTML

When you need code that no built-in setting covers, the theme gives you two ways to drop it onto a page: the Custom Liquid section and the Custom Liquid block. Both take Liquid, HTML, or an app snippet and render it in place. The difference is where the code sits and what it can read.

Use the section for a standalone band of custom code, with its own width, spacing, and background. Use the block to place custom code inside another section, next to that section's content.

Custom Liquid section

A full-width section that renders whatever you type into one field. Add it from Add section under the Layout group.

1. In the theme editor, open the page where you want the code.
2. Click Add section.
3. Under Layout, choose Custom Liquid.
4. Open the section and paste your code into the Liquid field.

You cannot add this section to the header, the footer, or an overlay group. For those areas, use the Custom Liquid block inside a section that already lives there.

Settings

• Liquid: the field that holds your code. Liquid, HTML, and app snippets all render here.

Like any section, it can read the page's resource: on a product page your code can output the current product, and on a collection page the current collection.

This section also uses the standard Color, Layout, Size, Appearance, Border, Padding, Margin, and Visibility controls. See Common section settings.

Custom Liquid block

A block you add inside a section, alongside that section's other blocks. It appears in Add block under the Basic group.

1. In the editor, select the section you want the code in.
2. Click Add block.
3. Under Basic, choose Custom Liquid.
4. Drag it to the right spot in the section's blocks, then paste your code into the Liquid field.

Settings

• Liquid: the field that holds your code. Liquid, HTML, and app snippets all render here.

The block runs inside its host section and reads the page's resource the same way. On a product page it can reach the current product, and on a collection page the current collection, which lets you output values tied to what the shopper is viewing.

Which one to use

• Reach for the section when the code is its own band of the page and you want background, width, and spacing controls around it.
• Reach for the block when the code belongs next to existing content, or when it needs to live in the header, footer, or an overlay area, where the section cannot go.

Tips

• The Liquid field renders code, so a typo can break the page or the editor preview. Keep a copy of what you paste so you can revert.
• To add vertical space rather than code, you do not need a Custom Liquid section. Add the Spacing section (also under Layout), whose main control is Height. For spacing between blocks inside a section, see Common section settings.