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.