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 that case, the Container is used as a template to render each row in the data set.



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.

Group by option

In the Container component when you apply the group by option, then the Container is iterated for each group. Once you apply the grouping, you will have "magic" data field "grouped_rows" which contains array of rows with the same name.

If you have dataset for the container like this

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

Then after grouping you will have

{
	"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
		}]
	}]
}

The sum function should be applied to the "grouped_rows" e.g {% sum({grouped_rows::value}) %}

For more information about Grouping option, please, see 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: 21/03/2025