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 Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
- Navigate to the required page.
- Open the Widgets list on the 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:
- 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.
- Expand Visibility to modify the widget visibility on your website. 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.