Product Details Page Customization
The Product Details Page in ZenBasket is a customizable section of your online store where customers can view detailed information about a product. This document explains how to configure its layout, text, gallery, wishlist, and other settings to optimize the user experience and align with your store’s branding.
Accessing the Product Details Page
-
Navigate to the Design module in the ZenBasket admin.
-
Click the Start Editing button under the Start Editing section.
-
Use the dropdown menu in the top-left corner to select the Product Details Page.
-
Click the Product Details section to modify its settings.
The Product Details Page has nine customizable sections:
-
Section Layout Settings
-
Text Settings
-
Breadcrumbs Settings
-
Gallery Settings
-
Wishlist Settings
-
Rearrange Product Content
-
General Settings
-
Mobile Layout Settings
-
Return Policy Settings
-
1. Section Layout Settings
Select the desired layout for how the product detail page should appear. Two layout options are available to choose from.
2. Text Settings
Customize text, text color, and button color for the following elements: Product Availability, Product Many in Stock, Product Out of Stock, Product Unavailable, Notify Me Button, Cart Button, Order Button, Buy Now Button, Location Not Available, Pre-order Available, Menu Not Available, Instruction Text, Inclusive Tax Text, and Discount Title.
3. Breadcrumbs Settings
Enable the Show Breadcrumbs toggle to make breadcrumbs visible on the product details page.
4. Gallery Settings
Set up the product image gallery with the following options: Thumbnail Position, Border Size, Border Opacity, and Color. Check the Zoom Product Image on Hover and Loop Product Video checkboxes if necessary.
5. Wishlist Settings
Choose how the wishlist option is displayed:
-
Icon: Customize icon color, opacity, border size, radius, and color.
-
Button: Specify button text, button type, button color, and text alignment.
6. Rearrange Product Content
Rearrange product content to align with your store’s criteria and preferences.
7. General Settings
Select the rating icon color from the available color palette to match your theme.
8. Mobile Layout Settings
Enable the Show Image Thumbnail toggle to display image thumbnails in the mobile layout.
9. Return Policy Settings
Customize return policy settings with the following options: Background Color, Text Color, Divider Color, and Font Family. Upload Images Related to the Return Policy.
Adding More Sections
If you wish to add more sections to your product details page, refer to the help document on adding a new section for detailed instructions.
Click Save or Publish to apply the changes and view them on the storefront.
Video Tutorial