Skip to main content

Custom Liquid blocks

Add a Custom Liquid element to run Shopify Liquid code inside an Instant layout, on Starter and up.

The Custom Liquid element runs Shopify Liquid code inside an Instant layout — useful for a snippet from your theme, custom metafield output, or logic that standard elements don't cover. Custom Liquid is available on the Starter plan and above.

Insert a Custom Liquid block

  1. Open Insert in the left sidebar and switch to Elements.

  2. Go to Advanced → Embed and choose Custom Liquid.

  3. Drag it onto the canvas, or click to insert.

The element appears as a Code block layer in the Layouts & layers panel.

Write and preview Liquid code

Select the code block and open the Custom Liquid code section in the Design panel:

  1. Click Open editor to open the Liquid editor.

  2. Write or paste your Liquid.

  3. Leave Auto-Reload on to re-render as you type, or use the refresh control to render on demand.

Instant renders your Liquid through your connected Shopify store, so the preview reflects Shopify's own output. If your Liquid has a syntax error, the editor surfaces it so you can fix it before publishing.

Requirements

The editor needs a connected Shopify store — connect one first if your project isn't linked yet. See Connect your Shopify store.

If your store is password-protected, the section shows Store password required with the message Custom Liquid code requires your store password to be configured. Click Configure to add it under Settings → Shopify. See Password-protected stores.

Plan availability

Custom Liquid requires the Starter plan or higher. On Free, the Custom Liquid element in Insert shows a Starter badge and can't be added to the canvas — Instant prompts you to upgrade instead. See Upgrade your plan.

Tips

  • Prefer Instant's built-in Shopify bindings — dynamic text and images, repeaters, and metafields — when they cover your use case. Reach for Custom Liquid only for gaps those tools can't fill.

  • Keep snippets focused; large blocks are harder to maintain and debug in the builder.

  • Rename the Code block layer in Layouts & layers (for example, "Code block — shipping metafield") so its purpose is clear.

Related articles

Did this answer your question?