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

  1. Navigate to the Design module in the ZenBasket admin.

  2. Click the Start Editing button under the Start Editing section.

    enter image description here

  3. Use the dropdown menu in the top-left corner to select the Product Details Page.

    enter image description here

  4. Click the Product Details section to modify its settings.

    The Product Details Page has nine customizable sections:

    1. Section Layout Settings

    2. Text Settings

    3. Breadcrumbs Settings

    4. Gallery Settings

    5. Wishlist Settings

    6. Rearrange Product Content

    7. General Settings

    8. Mobile Layout Settings

    9. Return Policy Settings

    enter image description here

1. Section Layout Settings

Select the desired layout for how the product detail page should appear. Two layout options are available to choose from.

enter image description here

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.

enter image description here

3. Breadcrumbs Settings

Enable the Show Breadcrumbs toggle to make breadcrumbs visible on the product details page.

enter image description here

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.

enter image description here

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.

    enter image description here

6. Rearrange Product Content

Rearrange product content to align with your store’s criteria and preferences.

enter image description here

7. General Settings

Select the rating icon color from the available color palette to match your theme.

enter image description here

8. Mobile Layout Settings

Enable the Show Image Thumbnail toggle to display image thumbnails in the mobile layout.

enter image description here

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.

enter image description here

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.

enter image description here

Video Tutorial