Section: Custom section

Everything you'll need to know on how to setup your Custom section.

Written by Cartiafy Team Updated April 2026

The Custom section is a flexible container that accepts any theme block (the @theme meta-block) plus optional custom Liquid code and a background image. Use it as a sandbox to combine blocks from anywhere in the theme, embed Liquid snippets, or build a one-off layout that doesn't fit other sections. Perfect for advanced merchants and developers.

Adding the section

To activate this section you first have to add the section to your page. This can be done in a few small steps.

1) Click on Add section in your left sidebar.

2) Search for Custom section, then click on it.

3) Done — your Custom section is added. Use Add block to insert any theme block.

General settings

Background

Optional image displayed behind the entire section. Renders full-width and is auto-centered. Use it to add a textured or photographic backdrop behind your blocks.

Custom Liquid

Optional Liquid code that renders before the blocks. Use it to inject HTML, Shopify objects ({{ shop.name }}, {{ cart.item_count }}), or custom logic. Heads up: custom Liquid is rendered as-is — invalid Liquid will break the section. Test changes in a draft theme first.

Adding blocks

Custom section accepts the special @theme block type — meaning any block defined anywhere in the theme can be added here. Click Add block to see the full library of blocks. Mix and match freely to build a one-off layout.

Frequently asked questions

When should I use Custom section vs other sections?

Use Custom section when you need a layout that doesn't fit any of the prebuilt sections — for example, mixing a hero block with a multicolumn block and a custom Liquid snippet on the same row. For standard layouts (hero alone, products grid, FAQ), use the dedicated section instead — it has more focused settings.

What can I write in Custom Liquid?

Any valid Liquid: variables, conditionals, loops, snippets via {% render %}, and Shopify objects (shop, cart, customer, product, etc.). HTML and inline CSS work too. Avoid heavy logic that could slow page rendering, and never paste untrusted code.

Why do my blocks render full-width?

Custom section uses a full-width container by design — perfect for hero-like layouts. The blocks inside use the theme's content grid (--content-grid) which constrains them to the configured page width. Adjust per block.

Will the background image be responsive?

Yes — the image is rendered at 2000 px wide and centered. It scales to cover the section on all screen sizes. For best results use a wide-format image (e.g. 2000 × 1000 px) with the focal point centered.

Can I use this section on the product or collection template?

Yes — Custom section can be added on any template. The flexibility makes it especially useful on landing pages and custom-built templates where you need to combine blocks in unique ways.