Dynamic sources

Theme blocks are reusable blocks which are defined at the theme level and can be nested. The settings of theme blocks can be connected to data that come from the following:

Theme blocks can access dynamic sources using access paths such as:

Because theme blocks are re-usable and can be nested across multiple different sections and blocks, it isn't always possible to know ahead of time where its data will come from. To get around this problem, you can use context to reference the closest resource of a given type.

The context access path provides a way to access the closest resource of a given type, regardless of whether it is coming from the template, parent section or any ancestor block.

In this example, the Image banner section has a Product card block with nested Media, Title and Price blocks. They are connected to the closest product which currently resolves to the product setting of the Product card which is set to Sunglasses.

If the Sunglasses product is removed from the Product card block, its nested blocks will look for the next closest product available, which in this example is the Shoes product from the template.

If the T-shirt product is later selected in the Product card block, its nested blocks will then display the new closest product: T-shirt.

In other words, a setting connected to the closest product will automatically go up the chain of its ancestors to grab the attributes from the closest product value found, in the following order:

1. A product setting within the same block;
2. A parent block product setting;
3. The current section product setting;
4. The current template’s product

You can connect settings to the closest resource of a specific type within their presets, which allows you to access the most relevant resource of any type (such as a product, collection or page).

You can configure theme block preset settings to reference the closest resource of a compatible resource type by using the following Liquid syntax: {{context.<type>}}.

When a nested theme block is connected the closest resource of a specified type, the order of resolution for the closest resource is based on the following rules:

1. The closest Liquid context setter of the specified type
2. The closest ancestor block setting that has a value of the specified type
3. The section resource settings that has a value of the specified type
4. The template resource if it's of the specified type

The following table shows all possible configuration values for each resource type:

The following examples shows a price block with a product setting. The price block’s product setting is set to context.product. The context key means it will be able to access the closest product resource from the closest ancestor possible.

You can configure theme block settings in presets to point to the closest ancestor of a specific resource type, without needing to specify where. After a resource is connected at an ancestor level, children blocks can access the available resource properties using dynamic sources from their settings.

In the following example, the text, price and product media blocks access the closest product resource using {{ context.product }}:

After the preset has been inserted into a section or block, then the data is stored in JSON as follows:

Theme block settings can access the closest resources set in Liquid using the content_for Liquid tag directly. A resource can be passed directly to the content_for tag using a parameter that specifies the type of the resource.

The table below shows which resource types can be passed to the content_for tag in Liquid:

The {% content_for "block" %} tag, which is used to render static blocks, also supports passing context using the same syntax for all of the resource types above.

A common use-case for passing resources down to nested blocks in Liquid is when looping over the products in a collection. We need to pass down the current product that is being iterated over in the collection to the content_for tag so that nested blocks can access the product resource using {{ context.product }}.

In this example, we are rendering a static block named product-card while looping over the products in the collection setting of the Product grid block. This will allow all the Product card block, and all of its nested blocks to access the current product for that card via {{ context.product }}.

Merchants can connect theme block settings to the closest resource of a particular type using the dynamic sources picker in the theme editor. A merchant might have access to more than one type of closest resource.

In this example, the merchant is editing a text block on a product template. The merchant is connecting a text setting for the text block to a dynamic source. The merchant can pick from different resource contexts: the closest product, the product set at the section or the product set at the template.

Once a resource context is selected, the merchant may select a data field. All the data fields are compatible with a text setting.