The Product Common Widgets grouping includes the widgets referring to all types of products. They are commonly used across different product-related pages to make it easier for customers to explore and interact with different types of products.
Tip: To use the Product Common Widgets, make sure to drop the Product List widget onto the Layout Canvas and drop your required widget from the grouping.
Adding Product Common Widgets
To add the Product Common Widgets:
- Go to Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
- Click the Widgets list on the left panel.
- Type the widget name in the search bar, or navigate to the Ecommerce > Product Common Widgets grouping.
- Drag the widget from the list and drop it into the Product List widget.
Configuring the Product Common Widgets
You can configure and edit all the widgets under this grouping using the widget Styles and Settings on the Property Panel.
- Go to Styles to modify the necessary configuration of general styling features (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.
- Go to Settings to 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).
Product Media
The Product Media widget provides a visually engaging way to showcase product images in a structured way on the website. Once you have added the Product Media widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings).
The product-related content is generated from the Dashboard > Products and the Media App, where you can set up the relevant details.
Once you have added the Product Media widget, click the widget to activate the Property Panel where you can customize its Styles and Settings according to your preferences. To do so:
- Go to Styles to configure its principal styling Features (see Configuring the Product Common Widgets).
- Go to Settings:
- Activate the Group Product Images by Variants toggle to display product images grouped based on their respective variants.
- Select how the image should behave:
- Cover: The value preserves the original aspect ratio, but the image occupies all the available space resulting in the image appearing cropped.
- Contain: The image keeps its aspect ratio (not exceeding the bounds of the available space) but is resized to fit your given size resulting in the image not filling all the available space.
- Modify the widget visibility (see Configuring the Product Common Widgets).
Price
The Price widget offers a convenient way to display pricing information alongside each product, providing customers with quick and easy access to relevant pricing details while observing the products. The product-related information is generated from the Dashboard > Products, where you set up the relevant details.
Once you have added the Price widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings).
If the product has a compared price and price variants, they are presented as elements within the Price widget, and you can define the appearance and functionality of compared price and price elements separately. To do so, click the widget item and modify its Styles (Global Styles) and Settings (Visibility Settings).
Total Price
The Total Price widget calculates and displays the total cost of a customer's selection of items, services, or transactions. It is designed to provide users with a real-time view of the overall price they will pay for their selections.
The product-related information is generated from the Dashboard > Products, where you set up the relevant details.
Once you have added the Total Price widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings).
Category Name
The Category Name widget provides a visual representation of the category name and enables you to redirect your customers to your product category pages while they are browsing your products. It is designed to be positioned at the top of a category list page. You need to drop the Product List to access the Category Name widget.
The widget converts your categories, created in the Dashboard > Products > Categories, to clickable links that are easily available to your customers. By default, the widget adopts the value entered in the Name field while creating a category.
When you create a new category, a corresponding category page is generated in the Visual Editor; afterward, you need to add the widget to display the category products on the website.
Once you have added the Category Name widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings).
Rate
The Rate widget enables customers to view and assess product ratings while observing it. Displaying the rates directly within the product list simplifies the evaluation process for the customers.
You can add the widget to display rates for a particular product to your customers and get new ones in a structured way. Once you have added the Rate widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings).
Go to Settings to change the options of the Rate Settings:
- Show Breakdown: Used to display a detailed breakdown of review ratings, ranging from 1 star to 5 stars.
- Show Review Button: Used to prompt customers for feedback or reviews.
- Show Quantity: Used to display the whole number of reviews.
Review List
With the Review List widget, you can display customer reviews and feedback for each product. It helps customers make well-informed purchasing decisions on product quality, performance, etc.
Once you have added the Review List widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings).
- Go to Styles to modify:
- Layout: Customize the layout to match your product requirements by modifying the number of columns and rows, as well as adjusting the gap between them. This allows you to suit your specific needs based on the product type.
2. Go to Settings to modify:
- Load More
Offers the None, Button, and Pagination options. - Load By
Offers the number of reviews in the interface that you can set per your request.
These settings allow you to handle the display of large amounts of content in the user interface.
Tip: You can access the UI Elements in the Design System. To do so, click the bookmark icon in the upper-right corner of the Property Panel. Select one as a base for the widget, or click the plus icon to create a new UI Element and style it according to your preferences.
Add to Wishlist
Adding an Add to Wishlist widget allows customers to easily save their preferred products to their wishlist. The widget enables customers to create a list of desired items, helping them remember and track products they might wish to buy in the future.
Once you have added the Add to Wishlist widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings).
SKU
The SKU (Stock Keeping Unit) widget provides customers with immediate access to unique product identifiers. The widget displays the SKU numbers for each item, enabling customers to track specific products. It facilitates inventory management and can be useful if you handle a business with a large number of products or complex inventory systems.
The product-related information is generated from the Dashboard > Products, where you set up the relevant details.
Once you have added the SKU widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings). Go to Settings to show/hide the label of the widget.
Name
The Name widget provides a simple display of the product names alongside their category. The widget ensures that visitors can easily identify and differentiate between different products, providing a concise and structured display.
The product-related information is generated from the Dashboard > Products, where you set up the relevant details.
Once you have added the Name widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings). Go to Settings to show/hide the label of the widget.
Description
The Description widget provides concise and informative product descriptions directly inside the list. The widget allows customers to quickly access product details and enhances them to make decisions without the need for additional clicks or navigating to separate product pages.
The product-related information is generated from the Dashboard > Products, where you set up the relevant details.
Once you have added the Description widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings). Go to Settings to show/hide the label of the widget.
Brand
The Brand widget includes customized brand information, such as the logo and name, which can be managed and updated from the Dashboard. The widget helps enhance brand recognition making it easily identifiable for customers and visitors.
The product-related information is generated from the Dashboard > Products, where you set up the relevant details.
Once you have added the Brand widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings). Go to Settings to show/hide the label of the widget.
💡 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.