Articles on: Online store
This article is also available in:

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 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



Under the My webites section, click on the site's home page, go to the Store tab below, and select 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 Changing the design of a block article. 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 Managing elements article.

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 choose which product details you want to hide or show on the page:



In the Action tab, you can change the text, its 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 Changing the design of a button article for more info.

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 Add block button:



Select a block from the gallery and click on it to add to the page:



You can change the design of the blocks or change their order on the page.

Updated on: 12/07/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!