A case of using product elements

First, we create an online store with a Product section and add products to the Products tab. Later on we'll create an individual product page with a detailed description for each of them.

Next, we add a separate page that is built of product elements, and customize its look. We won't connect it to any product in the catalog as it will serve as a template to create new product pages.

To create a first product page, we go to the Pages tab and duplicate the page template.

We give a unique address to each product page that we will later specify as a link to the product page of this product in its settings.

To connect several product elements in bulk, we can select the required elements and:

• use the keyboard shortcut Command+A (MacOS) or CTRL+A (Windows);
• open the context menu with a right click and select Connect to product.

Learn more about connecting / disconnecting product elements.

Now our product page looks as follows:

We need to specify links to the corresponding product pages if we want our product cards or their elements to take visitors to individual product pages.

To set it up, we go to the Products tab, switch on the toggle Add link to product page and specify the page address.

Go to product page as the Action on click can be set up for:

• product Cards in the product section;
• Name and Images product elements;
  
• More buttons in the product cards.

We set up two clickable options.

Clickable product cards
To set up Go to product page as the Action on click, we select this option in the drop-down list in the Cards tab of the product section settings. 

More buttons in the product section
The More button is added to all cards in the product section as a card component. It's visible on the site only in the cards of those products that have added links taking to individual product pages.