Home / Widgets

Ecommerce Product List Widget

Tech Writers Team @ Ucraft

Last updated on Sep 02, 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.

Tip: 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 the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
  2. Navigate to the Widgets list on the Visual Editor Left Panel.
  3. Type the widget name in the search bar, or open the Ecommerce > General Widgets.
  4. Drag and drop the Product List widget from the list onto the desired crafting area of the Layout Canvas.

Note: In order 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 while doing so.

Configuring the Product List Widget

After dropping the Product List widget, you can see these groupings with their relevant widgets:

  • Product Common Widgets - is shared among different types of products and provides common features. It includes image galleries, descriptions, pricing displays, customer reviews, and so on.
  • Physical Product Widgets - is developed for physical products that can be shipped or picked up. It includes widgets like size, quantity, inventory availability, etc.
  • Digital Product Widgets - stands for digital products that are downloadable and available online.
  • Appointment Product Widgets - 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 - 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 - 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 - 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.

You can edit the Product List widget Styles and Settings from the Property Panel, set its item, and customize it per your needs.

  1. Go to Styles of the Property Panel to configure:
  • Global Styles - Make the necessary configuration of principal styling features from the Property Panel (see Global Styles). Global Styles are a set of predefined style settings that can be applied to widgets across the website. They provide a constant appearance by defining default styles for all the widget types.
  • Layout - Customize the layout to match your product requirements by modifying the number of columns and rows and adjusting the gap between them. This allows you to suit your specific needs based on the product type.

2. Go to Settings of the Property Panel to configure:

  • Load More - None, Button, Pagination\ This allows you to handle the display of large amounts of content in the user interface.
  • Enable Navigation - allows you to control the redirection to your product and item single pages.
  • Data Source - Configure it to choose the appropriate data origin, either Product or Category.

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 that are closely related to or relevant to the selected product.
  • Modify the Visibility of the widget on your website. Specifically, select who can view the widget according to the customer's location, session status, used device type, 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.