Product elements

Product elements are a new category of elements in the editor. They have a unique feature: you can connect them to products on the Products tab.

You can add elements outside the product sections: to cards, columns and free sections.

To add an element with Absolute positioning, right-click on some free space in the section and select Add element. Such elements can be moved around the section and bound to one of the dots in the section.

To add an element with Static positioning, click the blue + icon to open the elements menu.

Product elements are found on the  Product tab, next to the Basic elements.

As product elements use information from the Products tab, start by adding a product card on the tab.

To connect a product element to a specific product, click on this element, then on Select product, and choose one on the list.

To connect product elements in bulk, select several elements and right-click to do it in the context menu.

To connect several products at a time, use the keyboard shortcut: ⌘ Command + A (MAC OS) or Ctrl + A (Windows).

After connecting the product, the elements are automatically filled with data from its card on the Products tab.

You can also connect product elements to a particular variant of the product. To do this, click on the spoiler with the number of variants in the card and select the required one.

To disconnect a product, open the element settings and click either Change product or Unselect product. Elements are disconnected one at a time, there's no option to disconnect them in bulk.

There are several features to make working with product elements a breeze:

1. Displaying 3 last selected products
In the Add product window, you see three last products connected to elements marked with the clock icon.

2. Locking a product variant
This option is enabled when you connect an element not to the product but to one of its variants.

By default, all variants are locked (the padlock is closed). It means that the image of the selected variant doesn't change when another option (color, size, etc) is chosen.

If you unlock the variants (the padlock is open), the selected variant is displayed on page load but it changes when another option is chosen.

3. Going to a separate product page from the product section
You can set up to open a separate product page when visitors click on the product card or its components.

First, create a product page as they are not generated automatically.

Then, switch on the Add a link to the product page toggle in the product settings on the Products tab and specify the page address.

Now, select Go to product page as the Action on Click:

• for product cards – on the Card tab in the product section settings;
• for Name and Images product elements – in the settings of these elements;
• for "More" button card element – this option is set up automatically when you add a link to the product page to the settings on the Products tab.

NOTE
If there is no link to a product page in the settings of a particular product, the "More" button gets invisible for the customers.

4. You can go to the product settings from the element settings

5. The {price} variable for the product elements with buttons
Add the {price} variable to the button text field and the price will be automatically displayed. It comes in handy if you want to combine the call-to-action and the product price in the button.