Layouts

Define all visible elements in the layout section. The elements are structured in rows spread across a 12-column grid.

There can be:

Form elements inside an attribute form widget
Attributes inside a layout widget
Specialized widgets for certain customizable areas

By using width on an element, modify the number of columns this element occupies. Embed widgets inside a layout or form widget, for example, a product_unit_price inside a form widget. For advanced configuration, both rows and cells can also have conditions to show elements based on the value of attributes.

Layout Row Configuration

The following table describes layout row configuration:

Name	Type	Description
layout	array	As array of layout columns
condition	string	An expression to switch the row visibility

Layout Column Configuration

The following table describes layout column configuration:

Name	Type	Description
id	string	The widget ID
attribute	string	The attribute reference inside a form or layout widget `1"layout": [ 2{ 3"attribute": "content1" 4} 5]`
width	integer (1 <= width <= 12)	Number of grid cells the column occupies
offset	integer (1 <= width <= 12)	Number of grid sets to leave empty before this element. Either Offset + Width total 12 or "end". `1"layout": [ 2 { 3 "attribute": "content1", 4 "width": 6 5 }, 6 { 7 "attribute": "content2", 8 "width": 6 9 }, 10 { 11 "attribute": "content3", 12 "width": 6, 13 "offset": 6 14 } 15]`
end	Boolean	Specify to leave empty until the end of the row. `1"layout": [ 2 { 3 "attribute": "content1", 4 "width": 6, 5 "end": true 6 }, 7 { 8 "attribute": "content2", 9 "width": 6 10 }, 11 { 12 "attribute": "content3", 13 "width": 6 14 } 15]`
condition	string	An expression to switch the row visibility.

Layout Conditions

Layout conditions include the following:

Operator	Description	Example
>	Greater than operator. Evaluates to true if the left side is greater that the right side.	5 > 3
>=	Greater than or equal to operator. Evaluates to true if the left side is greater than or equal to the right side.	5 >= 5
<	Less than operator. Evaluates to true if the left side is less than the right side.	3 < 5
<=	Less than or equal to operator. Evaluates to true if the left side is less than or equal to the right side.	3 <= 3
==	Equality comparison. Returns true if the left side equals the right side. Does not check type equality.	3 == ‘3’
!=	Inequality comparison. Returns true if the left side equals the value and type of the right side. Does not check type inequality.	3 != 2
===	Strict equality comparison. Returns true if the left side equals the value and type of the right side.	3 === 3
!==	Strict inequality comparison. Returns true if the left side doesn’t equal the value of the right side and both types are the same.	3 !== ‘3’
!	Negation operator. Negates the Boolean value.	!true
&&	Logical AND operator.	true && true

The following sample condition would hide the associated widget until the current product doesn’t require variation selection anymore.

1"condition": "!type.master"

Configuring Width

You use the width property to specify how many columns an element spans.

The following is an example of specifying the width. Because of the nested layout, the same result would be achieved without width.

1{
2  "id": "address",
3  "layout": [
4    {
5      "layout": [
6        {
7          "attribute": "first_name",
8          "width": 6
9        },
10        {
11          "attribute": "last_name",
12          "width": 6
13        }
14      ]
15    },
16    {
17      "layout": [
18        {
19          "attribute": "postal_code",
20          "width": 6
21        },
22        {
23          "attribute": "city",
24          "width": 6
25        }
26      ]
27    }
28  ]
29}

The following is a sample for width without nested layouts:

1{
2  "id": "address",
3  "layout": [
4    {
5      "attribute": "first_name",
6      "width": 6
7    },
8    {
9      "attribute": "last_name",
10      "width": 6
11    },
12    {
13      "attribute": "postal_code",
14      "width": 6
15    },
16    {
17      "attribute": "city",
18      "width": 6
19    }
20  ]
21}

It results in a layout like this:

Example billing address layout with address fields spanning 6 columns using the width property

Combining Elements

By using the property suppress_new_column, combine multiple elements in one cell. Each element with the property suppress_new_column:true is added to the cell of the previous element.

1{
2  "id": "address",
3  "layout": [
4    {
5      "layout": [
6        {
7          "attribute": "first_name"
8        },
9        {
10          "attribute": "last_name",
11          "suppress_new_column": true
12        }
13      ]
14    },
15    {
16      "layout": [
17        {
18          "attribute": "postal_code"
19        },
20        {
21          "attribute": "city",
22          "suppress_new_column": true
23        }
24      ]
25    }
26  ]
27}

Each element with the property suppress_new_column:true is added to the cell of the previous element.

Example billing address layout showing suppress_new_column combining first name and last name into one cell