Container Component

The Container component allows you to group other components and iterate over a list of data when a Data Field is set. In this case, the container acts as a row and is used to dynamically render each record from the dataset.



Example JSON dataset:

[
   {
      "line_items":[
         {
            "product_name":"Singing Bowl Carved With Brick-Red Highlights And Striking Tool",
            "quantity":1,
            "image":"https://cdn.shopify.com/s/files/1/0257/9571/products/FBM2MA220_8233032b-61a1-4083-8dac-eecc704f4466.jpeg?v=1403526067",
            "sku":"333813489"
         },
         {
            "product_name":"Handcrafted Decorative Plate",
            "quantity":1,
            "image":"https://cdn.shopify.com/s/files/1/0257/9571/products/FBK2036_2_8e8a94b1-014c-4e15-b16f-938da6f0a23d.jpeg?v=1403526097",
            "sku":"333813141"
         },
         {
            "product_name":"Onyx Chess Squares Long Box",
            "quantity":2,
            "image":"https://cdn.shopify.com/s/files/1/0257/9571/products/FBK2032.jpeg?v=1403526037",
            "sku":"333812817"
         }
      ]
   }
]

It is also possible to nest multiple Container components. For more information, see this article.

Advanced Tab

Unique identifier – Allows adding a unique identifier to component, ensuring precise component identification and improving navigation in the Component list.
Lock position – Locks the component in a defined position, preventing it from being affected by other components and ensuring it doesn’t affect them.
Auto shrink – Adjusts the container's height based on the content's height.

Sorting & Filtering

Sorting and filtering are essential features for working with dynamic data. Using the Sort by and Filter by options in the Advanced settings, you can define the order in which records appear and display only those that match specific conditions.

Group By Option

In the Container component, when you apply the Group by option, the container iterates over each group separately. Once grouping is applied, a special data field grouped_rows becomes available. This data field contains an array of rows that share the same group name.

For example, if your dataset looks like this:

{
	"items": [{
		"name": "Test",
		"value": 1
	}, {
		"name": "Test",
		"value": 1
	}, {
		"name": "Test 2",
		"value": 1
	}]
}

After grouping, the data will be transformed into:

{
	"items": [{
		"name": "Test",
		"value": 1,
		"grouped_rows": [{
			"name": "Test",
			"value": 1
		}, {
			"name": "Test",
			"value": 1
		}]
	}, {
		"name": "Test 2",
		"value": 1,
		"grouped_rows": [{
			"name": "Test 2",
			"value": 1
		}]
	}]
}

To sum a specific data field within each group, apply the sum function to the grouped_rows array: {% sum({grouped_rows::value}) %}

For more information about this option, refer to this article.

Related articles you may find helpful

Common use-cases of the Expression language
How to embed editor to my application?
How to set up alternate rows in the Container/Table component?

Updated on: 02/06/2025