Home / Widgets

Collection Category Icon Widget

Unknown Author

Last updated on Nov 28, 2024

The Category Icon widget is a component you can place at the top of a category list to visually depict the icon associated with the respective category. This widget, by default, takes the image you have uploaded as the icon for the Category in the Article Management > Categories section when creating or editing a category.

Adding a Category Icon Widget

To add a Category Icon widget:

  1. Go to Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
  2. Open Page on the top panel and 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 Icon 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 Icon Widget

To design the appearance and behavior of the Category Icon widget, activate the Property Panel of the widget by clicking it to access the widget Styles and Settings.

  1. 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 Settings to modify the settings of the widget:
  • Select how the icon is resized and fitted within its container from the Image Behavior options:
    • Cover: The icon is scaled to cover the entire container, filling it without any letterboxing.
    • Contain: The icon is scaled to fit within the container while maintaining its aspect ratio.
  • Expand Visibility and modify the widget visibility on your website. Select who can view the widget according to the customer’s location, session status, type of used device, 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.