Home / Widgets

Ecommerce Product List Widget

Taguhi

Last updated on Dec 05, 2024

The Product List widget displays a list of your currently available products from the Dashboard. Once you drop the Product List widget, various product-specific widgets appear that you can add and customize according to your business.

Note: You can also drop the Product List widget on non-product-related pages.

Adding a Product List Widget

To add a Product List widget to your website:

  1. Go to Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
  2. Open Page on the top panel and navigate to the required page.
  3. Click the Widgets list on the left panel.
  4. Type the widget name in the search bar, or open Ecommerce > General Widgets.
  5. Drag and drop the Product List widget from the list onto the desired crafting area of the Layout Canvas.

Note: To access the other Ecommerce product-specific widgets, you need to drop the Product List and add the widgets within it. To drop the product-related widgets within the Product List, hold down the CTRL/Cmd.

The following Ecommerce product widget groupings are available:

  • Product Common Widgets
    The grouping is shared among different types of products and provides common features. It includes image galleries, descriptions, pricing displays, customer reviews, and so on.
    Note: The Product List widget automatically includes the Product Media and Name widgets from this grouping. You don’t need to add them separately when placing the widget on the layout.
  • Physical Product Widgets
    The grouping is developed for physical products that can be shipped or picked up. It includes widgets like size, quantity, inventory availability, etc.
  • Digital Product Widgets
    The grouping stands for digital products that are downloadable and available online.
  • Appointment Product Widgets 
    The grouping is used for the reservation or booking service types of products. It includes calendar options, time slot availability, duration customization options, availability options, and so on.
  • Rental Product Widgets 
    The grouping is intended for products that are available for rent, such as equipment or vehicles. It includes rental duration pickers, an availability calendar, and so on.
  • Table Product Widgets
    The grouping is for products involving table arrangements, such as restaurants. It includes an availability calendar, time slot availability, a duration customization option, and so forth.
  • Event Product Widgets
    The grouping is suitable for products related to the events, including event date and time displays, ticket quantity displays, venue or section choices, and so forth.

You can select your product type and start the configuration and customization process. In the creation of a product-focused interface, the related widgets provide a more structured approach by offering certain functionalities based on the product type.

Configuring the Product List Widget

To design the appearance and behavior of the Collection List widget, activate the Property Panel by clicking it to access its Styles and Settings.

  1. Go to Styles to configure the general styling features (see Global Styles) to achieve the desired visual and functional outcomes.

2. Go to Settings to modify the widget settings:

  • Select None/Button/Pagination to display or hide the Load More button/Pagination icon below the product list.
  • Specify the number of products displayed per page in the Items per Page field.
  • Enable the Title toggle to display the "Showing N Results" text above the Product List.
    Tip: You can modify the Label styling by clicking the Title and using its Property Panel.
  • Select products or categories from the Data Source dropdown.
    • If you select Category, you must indicate the desired sorting criteria, such as Price (ascending or descending), Alphabetical order (A to Z or Z to A), or chronological order (Newest First or Oldest First).
    • If you select Product, you must indicate the product name and also indicate the Linked Products with the possibilities of:
      • Cross-selling Products: Refers to recommending products that enhance the current selection, encouraging customers to make additional purchases.
      • Upselling Products: Involves recommending higher-end or upgraded versions of the selected product to get customers to choose premium options.
      • Related Products: Displays the products closely related to or relevant to the selected product.
  • Expand Visibility and modify the widget visibility on your website. Select who can view the widget according to the customer’s location, session status, type of used device, browser, language preference, etc. (see Visibility Settings).

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.