The Category Image widget is a component that you can place at the top of a category list to visually depict the image associated with the respective category. This widget, by default, takes the image you have uploaded as the image for the Category in the Article Management > Categories section when creating or editing a category.
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 Collection Category page.
3. Go to the Widgets list on the Visual Editor Left Panel.
4. Type the widget name in the search bar or expand the Collections grouping to access the Category Image widget.
5. Drag and drop the widget onto the Layout Canvas.
Upon dropping the widget on the Layout Canvas, it is displayed with the default styling, which you can later customize per your needs.
Configuring the Category Image Widget
To design the appearance and behavior of the Category Image widget, activate the Property Panel of the widget by clicking it to access the widget Styles and Settings.
- Go to Styles to make the required configuration of general styling features (see Global Styles) to achieve the desired visual and functional outcomes.
- Go to Settings to modify the settings of the widget:
- Select how the image is resized and fitted within its container from the Image Behavior options:
- Cover - the image is scaled to cover the entire container, filling it without any letterboxing.
- Contain - the image is scaled to fit within the container while maintaining its aspect ratio.
- Select the image loading type:
- Lazy Loading - ensures that images are only loaded when they are about to be displayed on the user's screen. When a customer visits a corresponding page, only the images initially visible or near the viewport are loaded immediately. As the user scrolls down or interacts with the page, additional images are loaded dynamically, typically as they come into view.
- Preload - ensures that images are loaded in advance before they are actually needed. Image preload involves fetching and storing product images in the user's browser cache so that they can be quickly displayed when the user navigates to a corresponding page or interacts with a product gallery.
Note: By default Lazy Load is selected.
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.