Product List Page Customization

ZenBasket offers comprehensive options to customize your product list page. This help document provides step-by-step instructions for customizing the product list page in the ZenBasket admin, including settings for product cards, details, filters, quick view, images, and adding or creating new sections to enhance the page’s functionality and appearance. Follow the steps below to modify its settings effectively.

Accessing the Product List Page

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

  2. Under the Start Editing section, click the Start Editing button.

    enter image description here

  3. Use the dropdown menu on the top-left corner to select the Product List Page for customization.

    enter image description here

Customizing Product List Page

Click the Edit icon to access customization settings. The customization options are divided into five sections:

  1. Card Settings

  2. Details Settings

  3. Filter Settings

  4. Quick View Settings

  5. Image Settings

    enter image description here

1. Card Settings

Modify your product display card with the following options:

  • Display Style: Choose a product display style that suits your store.

    enter image description here

  • Product Count: Specify the number of products displayed per page.

  • Grid Behavior: Select Fixed or Responsive Grid Behavior.

  • Mobile View: Configure the product display layout for mobile devices.

  • Desktop View: Adjust the number of columns and spacing between rows and columns.

    enter image description here

2. Details Settings

Customize the details displayed on the product list page:

  • Show Product Price and Add Button: Enable toggles to display the product price and the Add button.

  • Add Button Text: Edit the text displayed on the Add button.

  • Product Name Text Size: Adjust the text size for product names.

    enter image description here

3. Filter Settings

Set up filters to enhance the product browsing experience:

  • Show Filters: Enable toggles for the following:

  • Food filter

  • Filter section

  • Sort options

  • Filter options

    enter image description here

  • Edit Sort Options: Modify the display labels for sort options and change their visibility using the eye icon.

    enter image description here

  • Filter Template:

  • Choose a filter template and customize filter details.

  • Add a filter name and its options.

  • Select a background and text color from the color palette for the filter templates 2 & 3.

    enter image description here

4. Quick View Settings

Customize the quick view feature for your products:

  • Ratings: Enable toggles to show ratings and star icons. Adjust the star color using the color palette.

  • Labels: Enter labels for the following:

  • Cart

  • Many stocks

  • Product availability

  • Product tax

    enter image description here

  • Tax Title Color: Choose a color for the tax title text.

  • Wishlist Icon: Enable the toggle to display a wishlist icon for products.

    enter image description here

5. Image Settings

Define how product images are displayed:

  • Image Display: Select Crop or Fit.

  • Aspect Ratio: Specify height and width values for the images.

    enter image description here

Adding or Creating Sections

Adding a New Section

  1. Click the Add Section icon.

  2. Select a suitable section from the options provided.

  3. Drag and drop the section into the desired position.

  4. Click the Edit icon to customize the new section further.

  5. Also, customize your store further by adding a new page, adjusting global settings, or modifying footer details to enhance functionality and branding. For detailed guidance, refer to this help document.

    enter image description here

Creating a New Section

  1. Click the Create Section button.

  2. Customize the section as per your requirements.

  3. For additional guidance, refer to the help document for detailed instructions on adding existing components.

  4. Click Save or Publish to apply your changes to the storefront.

    enter image description here

Video Tutorial