This article is also available in:

Changing the design of the product page

Each product in the online store catalog has its own unique page, generated based on a template that you can customize and personalize.

Similar to regular pages, you can add blocks and elements to the product page and change their appearance. For example, you will be able to perform the following actions:

Add blocks and elements — contact forms, reviews, third-party code;
Display pop-up windows on product pages;
Edit default elements.

Important: It is not currently possible to edit specific product pages individually.

Contents:

Product page structure
Editing Product page

Product page structure

By default, the main block on this page consists of the following elements:

Note: The Product page editor may display information about one of the products you have already added or a template product to visualize the final result. It is important to remember that you are not editing the displayed product page separately — this is a template for all products in the store.

To open the Product page editor, from the list of pages on your site, go to the Store tab and click on Product page:

Top section:

Contains breadcrumbs — this is an element on the website that displays the path to the page where the visitor is located. The breadcrumb element looks like a horizontal row of text links separated by the “greater than” symbol (>). The symbol indicates the degree of nesting of the page relative to others in the chain.

In the settings for this element, you can choose whether the product name is displayed in the breadcrumbs:

Middle section:

It has three elements by default.

The first column contains the Product media, where all photos and videos that you add in the settings of the corresponding product will be displayed.

If you have a large number of media, you can select in the element settings how many image previews will be displayed under the main photo:

In the second column, the Product details element displays the price, quantity slider, SKU, availability status, etc. In its settings, you can choose which parameters will be displayed:

You can also customize the product purchase button, namely its action, text, and appearance:

Below it is the Product description element, which displays the product description text that you specified in the settings. Separate tabs also display attributes and embedded files, if any, for the product.

Note: You can find more details about product settings in our article.

Bottom section:

Depending on the website template, this section may be either empty or contain the Related products element, which displays your recommended products.

If you have not configured similar products for a particular product, this element will not be displayed on its page.

In the settings for this element, you can choose which product card elements are displayed and customize the appearance of the element and slider:

Note: You can find more details about the settings for related products in our article.

Editing Product page

Similar to the pages you created manually, you can also edit this page:

Add/delete blocks and manage them;
Add/delete elements and manage them;
Add/delete columns and manage them;
Customize the appearance of existing columns and blocks.

You have access to universal block settings, such as adding a background, animation, changing indents, etc. You can learn more about this in the article Changing the block design. You can also move, delete, or copy elements, add a background, and change indents in columns — the article Managing elements will tell you how to do this.

Configure the Product Page elements discussed in the section above.

Important: The product page is a template — that is, any changes you make will affect all product pages. It is currently not possible to edit a specific product page separately.

Updated on: 02/05/2026

Was this article helpful?

Thank you!