Changing the design of the product page
Each product in the online store gets its own page with unique URL and all the product information. By default, all product pages look similar and consist of a header, footer, and a block with product details. Here's an example of what a product page looks like:
However, you can manage the product page globally — by changing the design in the editor, it will apply to all the product pages in your online store. You can edit this page the same way as other pages of your site. For example, you can perform the following actions:
Add blocks and elements — contact forms, reviews, third-party code, etc.
Display a pop-up on product pages.
Change titles for the product details.
Change the design and text of the "Add to cart" button.
Follow the instructions below to redesign your product pages.
Open the Store tab on the toolbar and click on the Product page:
Hover over an empty space in the block at the bottom, side or top to add a new column to it:
You can add any element from the gallery to the product block:
All basic actions with the block are available for you — for example, changing the background, paddings, etc. Learn more in the article Changing the design of a block. You can also move, copy or delete elements in the block, and change background or paddings for the columns separately — see how you can do it in the article Managing elements.
Besides the additional elements, you can change the appearance of the already existing columns in the block. To customize a column with product images, hover over it and click on the "gear":
In the new window, choose the number of images displayed in a row:
To customize the names of default product fields (SKU, quantity) as well as the text and design of the button, hover over the column with the product name and click on the "gear":
In the General tab, you can enter your own text for the product code or quantity. In addition, you can choose which product details you want to hide or show on the page:
In the Action tab you can change the text, formatting or design of the button. You can also add an icon to the text in the button:
Note: the design of the buttons is set globally in the settings. See the article Changing the design of a button for more info.
To replace the title of the product description, hover over this column in the block and click on the "gear":
Enter your own title for the product description:
In addition to the blocks added by default, you can also add other blocks to the product page — for example, a block with reviews, contacts, office addresses, and so on.
Hover over the place on the page where you want to place the block, and click on the "plus":
Select a block from the gallery and click on it to add to the page:
Tip: You can change the design of the blocks or change their order on the page.
However, you can manage the product page globally — by changing the design in the editor, it will apply to all the product pages in your online store. You can edit this page the same way as other pages of your site. For example, you can perform the following actions:
Add blocks and elements — contact forms, reviews, third-party code, etc.
Display a pop-up on product pages.
Change titles for the product details.
Change the design and text of the "Add to cart" button.
Follow the instructions below to redesign your product pages.
Changing the design of the product block
Open the Store tab on the toolbar and click on the Product page:
Hover over an empty space in the block at the bottom, side or top to add a new column to it:
You can add any element from the gallery to the product block:
All basic actions with the block are available for you — for example, changing the background, paddings, etc. Learn more in the article Changing the design of a block. You can also move, copy or delete elements in the block, and change background or paddings for the columns separately — see how you can do it in the article Managing elements.
Product media settings
Besides the additional elements, you can change the appearance of the already existing columns in the block. To customize a column with product images, hover over it and click on the "gear":
In the new window, choose the number of images displayed in a row:
Product details settings
To customize the names of default product fields (SKU, quantity) as well as the text and design of the button, hover over the column with the product name and click on the "gear":
In the General tab, you can enter your own text for the product code or quantity. In addition, you can choose which product details you want to hide or show on the page:
In the Action tab you can change the text, formatting or design of the button. You can also add an icon to the text in the button:
Note: the design of the buttons is set globally in the settings. See the article Changing the design of a button for more info.
Product description settings
To replace the title of the product description, hover over this column in the block and click on the "gear":
Enter your own title for the product description:
Changing the layout of the product page
In addition to the blocks added by default, you can also add other blocks to the product page — for example, a block with reviews, contacts, office addresses, and so on.
Hover over the place on the page where you want to place the block, and click on the "plus":
Select a block from the gallery and click on it to add to the page:
Tip: You can change the design of the blocks or change their order on the page.
Updated on: 04/11/2023
Thank you!