Create custom blocks

What is a block?

A block is a configurable, reusable content unit that merchants can add, remove, and reorder inside sections from the theme editor. Blocks have a {% schema %} that defines their settings — things like text fields, image pickers, color selectors, and toggles — which appear in the editor's sidebar whenever a block is selected.

Slab includes 60+ built-in blocks covering most common use cases. Custom blocks let you extend this library with components tailored to your store.

Block vs custom liquid

If the content only needs to appear in one place and does not need merchant-facing controls, custom liquid is simpler. Use a custom block when you need the content to be editable, have configuration options, or be reusable across multiple sections.

How blocks are structured

A block file lives in the blocks/ folder and follows this pattern:

• {% doc %} — LiquidDoc header describing the block's purpose
• HTML markup using block.settings.* for dynamic values
• {{ block.shopify_attributes }} on the root element (required for the theme editor to work)
• Optional {% stylesheet %} for scoped styles
• {% schema %} — JSON defining the block's name, settings, and presets

Generating a custom block with AI

The Slab repo includes the shopify-liquid-themes agent skill, which knows the full block structure, all Shopify schema setting types, and Slab's naming conventions. Open your coding agent (e.g. Cursor) in the Slab repo and prompt:

The agent will generate a complete block file with correct schema JSON, {% doc %} header, translation keys, and Tailwind utility classes.

Example — a notice block with an icon and a message:

Once the file is generated, place it in the blocks/ folder. The block will appear in the theme editor's block picker for any section that accepts @theme blocks.