Static Blocks

Overview

Anchor link to section titled "Overview"

You can render a theme block in a section or another theme block in the following ways:

Dynamically rendered in Liquid using {% content_for 'blocks' %}.
Statically rendered in Liquid, setting the type explicitly using {% content_for “block”, type: “<type>”, id: “<id>” %}. Merchants will not be able to delete or re-order statically rendered blocks.

Static Blocks	Dynamically Rendered Blocks
Can be hidden and customized	Can be hidden and customized
Cannot be reordered (drag and drop)	Can be reordered (drag and drop)
Cannot be removed or duplicated	Can be removed or duplicated
Can be rendered conditionally or in a for-loop	Cannot be rendered conditionally or in a for-loop
Will be parsed if not added as part of the block preset	Must be included in a block preset to be added as part of the block preset

In this example, Slide is a dynamically rendered block, and Slideshow controls is a statically rendered block.

Usage

Anchor link to section titled "Usage"

Static blocks are theme blocks that are rendered statically in Liquid. Merchants will not be able to delete or re-order static blocks, but they can customize or disable them.

Static theme blocks can be used in various scenarios:

Bring structure to the theme in cases where the theme design requires theme blocks that should not be moved or deleted by the merchant.
Conditionally render theme blocks.

In all cases, static blocks maintain the flexibility to customize the settings and data.

Inserting a Static Block

Anchor link to section titled "Inserting a Static Block"

To render a theme block statically in a section or block file, the following Liquid tag must be used:

type : The type (name) of an existing theme block in your theme’s /blocks folder.

id: A unique ID within the section or block that contains the static blocks. The ID is a literal string and can be any descriptive identifier for the static theme block that will be referred to in the presets and templates. The ID has to be unique to its parent (block or section). Note that Shopify never generates the ID for static blocks. The ID is static and authored by theme developers in Liquid.

The example below renders a collapsible row using static blocks for the summary and the icon. Summary and icon are static blocks because they have a fixed relationship with the row. A row should always have an icon and a summary at the top level, therefore a merchant should not be able to delete them or reorder them.

In this example, the static blocks are authored in the block preset.

The code above will render a collapsible row in the editor, featuring a statically rendered icon and summary:

In this example, Collapsible row is rendered dynamically. The icon and summary are rendered statically.

Conditional Rendering

Anchor link to section titled "Conditional Rendering"

A static block is conditional when rendered in a conditional statement in Liquid. Shopify detects when a static block is rendered conditionally and shows a visual cue (a dotted eye icon) next to the block in the Theme Editor sidebar for an enhanced user experience.

Static Theme Blocks in Presets

Anchor link to section titled "Static Theme Blocks in Presets"

Optionally, you may include static blocks in theme block presets to override settings values. A static block preset requires two additional keys:

id: The ID of the static block from Liquid
static: true: Signifies the block is static

Static Theme Blocks in Data

Anchor link to section titled "Static Theme Blocks in Data"

Static theme blocks are persisted in the JSON data with static: true flag. Additionally, static block IDs are not included in the block_order as these blocks can not be re-ordered by merchants. Shopify determines the order of static blocks based on their arrangement in the Liquid code relative to dynamic blocks, and displays them accordingly in the Theme Editor sidebar and on the rendered page.