Skip to main content

Layers and Conditions

The layer panel is where you can add, remove, and edit layers. Layers are the building blocks of your template.

When you click on a layer on the canvas or in the layer panel, the layer will be selected and the layer panel will show the layer's properties.

On the layer there are three buttons:

  • Rename
  • Delete
  • Toggle visibility

If you want to select multiple layers, you can hold down the key (Mac) or ctrl key (Windows) and click on the layers you want to select.

Groups

It's possible to group layers together. This is useful if you want to move multiple layers at once or apply a condition to multiple layers.

To group layers, select the layers you want to group and click on the folder icon in the layer panel.

Groups can be nested inside other groups.

tip

You can also group or ungroup by pressing ctrl + g (Windows) or + g (Mac).

Conditions

Conditions are a powerful feature that allows you to show or hide layers based on the data you pass to the template.

You find the conditions panel by clicking on the conditions icon in the properties panel (right side).

Condition modal
Condition modal

To add a condition, click on the Add condition button. This will open a modal where you can select the data field you want to use for the condition.

You can choose between many fields such as:

  • On sale
  • Price
  • Title
  • Brand
  • And many more

With the condition above the layer will only be visible if the product is on sale. This is useful if you want to show a badge on products that are on sale.

It's also possible to add multiple conditions. In that case, all conditions must be true for the layer to be visible.

The badge is only visible if the product is on sale
The badge is only visible if the product is on sale

Operators

Depending on the field you select you can choose between different operators.

The available operators are:

  • Equals
  • Does not equal
  • Exists
  • Does not exist
  • Greater than
  • Less than
  • Starts with
  • Ends with
  • Contains
  • Does not contain

Examples

The logo is only visible if the brand is ADIDAS
The logo is only visible if the brand is ADIDAS

Shipping Price

Shows free shipping if the shipping price greater than $100
Shows free shipping if the shipping price greater than $100
Shows shipping price if the shipping price less than $100
Shows shipping price if the shipping price less than $100