Customize your product detail
Easily personalize your product detail page with our website template. Opt for the default layout applied from the template or create a custom design tailored to your preferences,
A. Customize product detail page
B. Add a custom layout for a specific product
Go to Online Store > Design > Customize the Website template that you would like to customize.
Hover on icon Page to open Page Selector or use hot key Cmd + P (on Mac) or Shift + P (on Windows) > Choose Product detail.
Click on each block to edit its settings and drag and drop to move it.
If you would like to add a new block, click the Insert panel (icon +) or use the hot key Cmd + I (on Mac) or Shift + I (Windows)
Choose the product to preview.
In Website Builder, click Page icon > Select Product detail page.
Click the drop down design menu > Select Create new design
A popup of available templates will be shown. You can choose your desired template to create a new design based on it.
Hover a template to preview or apply it.
Eye icon Preview: You can preview these templates with different colors and fonts to your store by hovering the Eye icon.
Button Apply: You can click this button to apply the template to create a new design based on it.
Name template as a custom design of product page in the Name your design field. Click Create to save it as a product page template that you can apply later for products in product admin.
Customize this product detail template in Website Builder. Please follow this article to find out more.
You can assign the certain design for certain product(s).
Go to store admin dashboard > Products > All products > Select the desired product.
In Page design section, select the design template you would like to assign.
You can also use Bulk update tool to apply the design to many products at once to save time. Go to Products > Bulk updates > Filter and choose action Change product page design. In the name field, choose a desired design template to assign the action. Please follow this article to find out more about Bulk update.
Overview of Website Builder
Get started with Website Builder
Add website template made with Website Builder
Overview of Website Settings
How to use General in Website Settings?
How to edit your product in Website Settings?
In this article
A. Customize product detail page
B. Add a custom layout for a specific product
A. Customize product detail page
Go to Online Store > Design > Customize the Website template that you would like to customize.
Hover on icon Page to open Page Selector or use hot key Cmd + P (on Mac) or Shift + P (on Windows) > Choose Product detail.
Click on each block to edit its settings and drag and drop to move it.
If you would like to add a new block, click the Insert panel (icon +) or use the hot key Cmd + I (on Mac) or Shift + I (Windows)
Choose the product to preview.
B. Add a custom layout for a specific product
In Website Builder, click Page icon > Select Product detail page.
Click the drop down design menu > Select Create new design
A popup of available templates will be shown. You can choose your desired template to create a new design based on it.
Hover a template to preview or apply it.
Eye icon Preview: You can preview these templates with different colors and fonts to your store by hovering the Eye icon.
Button Apply: You can click this button to apply the template to create a new design based on it.
Name template as a custom design of product page in the Name your design field. Click Create to save it as a product page template that you can apply later for products in product admin.
Customize this product detail template in Website Builder. Please follow this article to find out more.
You can assign the certain design for certain product(s).
Go to store admin dashboard > Products > All products > Select the desired product.
In Page design section, select the design template you would like to assign.
You can also use Bulk update tool to apply the design to many products at once to save time. Go to Products > Bulk updates > Filter and choose action Change product page design. In the name field, choose a desired design template to assign the action. Please follow this article to find out more about Bulk update.
Related articles
Overview of Website Builder
Get started with Website Builder
Add website template made with Website Builder
Overview of Website Settings
How to use General in Website Settings?
How to edit your product in Website Settings?
Updated on: 01/02/2024
Thank you!