A case of using product elements
This article showcases how to use product elements to create an online store selling skateboards. Learn more about product elements here.
Let's create a product catalog and several separate pages with a detailed product description. Visitors will go to these pages by clicking on the product cards in the product section.
Adding products to the catalog
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.
Creating a product page template
Next, we add a separate page that is made 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.
Duplicating the page template for your products
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 use as a link to the product page of this product's settings.
We also recommend configuring the settings for the search engine optimization (SEO) and social networks for each product page.
Connecting product elements to a product
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 this way.
Adding links to your product pages
We need to specify links to the corresponding product pages to make our product cards or their elements open as individual product pages.
To set links, we go to the Products tab, switch on the toggle Add link to product page and enter the page address.
Making products cards and elements clickable
We can choose Go to product page as the Action on click for:
- product cards in the product section;
- Name and Images product elements;
- More buttons in the 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.
To add a More button, choose is among the card components. It appears only in the cards of those products that have links taking to individual product pages.
