The Category Image widget is a component that you can place with the category list to display the image of the respective category. This widget, by default, takes the value you have entered in the Image field of the Dashboard > Products > Categories section.
When you create a new category, a corresponding category page is generated in the Visual Editor; afterward, you need to add the Category Image widget to display the relevant category image on your website.
Go to the Category page to view the Category Image widget, or if you are on the Home page, drag and drop the Product List widget to access it.
Adding a Category Image Widget
To add a Category Image widget:
- Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
- Navigate to the required page.
- Go to the Widgets list on the Visual Editor Left Panel.
- Type the widget name in the search bar, or expand the Ecommerce > General Widgets/Product Common Widgets groupings to access the Category Image widget.
The widget is also available within the Product Common Widgets grouping to be dropped on other pages of your website.
5. Drag and drop the widget onto the Layout Canvas.
Configuring the Category Image Widget
Once you have added the Category Image widget, you can modify its Styles (see Global Styles) and Settings (see Visibility Settings). To design the appearance and behavior of the widget, activate the Property Panel by clicking it.
- Go to the widget Styles to make the required configuration of general styling features (see Global Styles) to achieve the desired visual and functional outcomes.
2. Go to the widget Settings to:
- Modify the widget visibility (see Visibility Settings) on the website based on criteria such as your customers' location, session status, device type, browser, language preference, etc., to tailor it to specific user segments or conditions.
- Change the options for Image Behavior:
- 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.
💡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.