Changing the design of the Product Page

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:

  1. Add blocks and elements — contact forms, reviews, third-party code, etc.
  2. Display a pop-up on product pages.
  3. 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

1. Open the website pages tab on the toolbar and click on the Product page:



2. Hover over an empty space in the block at the bottom, side or top to add a new column to it:

3. You can add any element from the gallery to the product block:

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

1. 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":

2. In the new window, choose the number of images displayed in a row:


Product details settings

1. 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":

2. In the General tab, you can choose which product details you want to hide or show on the page:

3. 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 article Changing the design of a button 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.


1. Hover over the place on the page where you want to place the block, and click on the Add block button:

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



    • Related Articles

    • Changing the design of the category page

      SiteCliq automatically creates a universal category page for all the categories you have in your store. By default, this page contains your site's header and footer, as well as the category name and the products you put in this category. Here's an ...

    • Changing the design of the store homepage

      SiteCliq automatically creates a store homepage where store categories and products are placed. This page can be accessed by adding /shop at the end of your domain (for example, yoursite.com/shop) or by pressing the link in the store categories ...

    • Changing product URL in the online store

      Each product in your online store has a dedicated page with a description, media gallery, SKU, and others. By default, the product page link is generated based on its name: See how you can change the URL of the product page in the SEO settings. ...

    • Product Card Settings

      After setting up an online store on your site, you can edit the appearance of the product cards. Important: the online store is available for Pro sites only. Product card settings 1. To access the settings of the card, hover over the Product element ...

    • Adding product ribbons

      Add eye-catching ribbons to your products to draw customers' attention and increase sales. These could be "Bestseller", "New" or other ones. At SiteCliq, you can add up to 5 ribbons to each product. Adding a new ribbon to the product 1. Open the ...