The product details page helps you inform customers and ease their doubts before completing a purchase. However, some products are too special to use the general layout. In those cases, creating a custom page will help you better market your offering. So, follow along to learn how.
Creating a Custom Product Details Page #
Navigate to the Stores tab inside the Sites section and click any of your store names to access the builder.
Click Add New Page at the top right corner.
Toggle “Create Custom Product Details Page” to enable the option.
Use the drop-down menu to select the product to assign to this page.
Click “Create New Page” to start designing.
Click Edit to customize the Product Details page.
Changing The Assigned Product #
Click the “Product Detail” element to access its settings.
Use the dropdown menu to select your new product.
Customizing The Product Details #
Desktop Media #
The Desktop Media section allows you to define how and where the product is displayed. Here, you must:
- Define the Media Width.
- Choose the desired Media position, and the text will go on the side opposite to your selection.
- Select one of the three layout options available. On mobile devices, the Carousel layout is automatically applied to ensure the best viewing experience.
Typography #
Choose the font family for your heading, product name, product price, and price discount, as well as their font weight and size for desktop and mobile.
Layout #
To define the products detail’s layout, complete these steps:
- Set the maximum number of products to show in the related section.
- Select the number of columns you want for related products.
- Select an Image zoom if desired. Zoom functionality applies to product images and gives customers a better way to view finer details before purchasing.
Product Description Customisation #
If enabled, the selected font family, color, and weight will override styles across all product pages.
Variants Styling #
The Variant Styling tab allows you to customize the shape and colors in which your product variants are displayed.
Reviews and Ratings #
Choose whether to display reviews and ratings for the selected products to further market your offerings.
Text Options #
The Text Options section allows you to modify the displayed text in your product element.
Wishlist Products #
Enable the wishlist for products so logged-in clients can save the products they love to checkout at a later time.
Color #
Need to make any other color adjustments? Scroll to the bottom of the General settings to make your changes.
Styles #
- Border Options: Adjust the element’s border by modifying its color, thickness, radius, and style to match your design preferences.
- Margin & Padding: The Styles tab lets you to customize the Margin & Padding of the element for both desktop and mobile views.
- Shadow: Enhance your design with box shadows. Click the plus button to apply a default outer shadow, which can be further tailored using custom shadow settings.
- Visibility: Control whether the element is visible on desktop or mobile by adjusting the visibility settings.
- Custom Class and CSS Selector: Add a custom class in the designated field and copy the CSS selector if needed for advanced styling or integration.
Customize your page as desired, and once ready, click publish to activate the custom product details page.
Use this to create pages that truly capture how special your product is. Making it easy to include extra information, connect experiences dynamically, and give customers a complete product storytelling that sells them on your business.
Frequently Asked Questions #
Why would I create a custom product details page? #
Some products are too special for the general layout. A custom page lets you better market a specific offering with tailored media, text, and styling to tell a complete product story.
How do I create a custom product details page? #
In the Stores tab, open the store builder, click Add New Page, toggle “Create Custom Product Details Page,” select the product from the dropdown, then click Create New Page and Edit to design it.
Can I change which product the page is assigned to? #
Yes. Click the “Product Detail” element to open its settings, then use the dropdown menu to select your new product.
What media layout options are available? #
In Desktop Media you define the media width, choose the media position (text appears on the opposite side), and pick one of three layouts. On mobile, the Carousel layout is automatically applied.
Does enabling product description customization affect other pages? #
Yes. If enabled, the selected font family, color, and weight will override styles across all product pages, not just the custom page.
How do I make the custom page live? #
Customize the page as desired, then click publish to activate the custom product details page.
