Category Filter #

This section controls which product categories are displayed and how they are organized.

• Include Categories: Select specific categories to show by clicking the + icon. Leaving this empty will display all categories by default.
• Exclude Categories: Use this to hide specific categories from the widget.
• Hide Empty Categories: A toggle to prevent categories with no assigned products from appearing.
• Category Depth: Define the level of sub-categories to display. Setting this to 0 allows for unlimited depth.
• Order By: Choose the criteria for sorting categories, such as by Name.
• Order: Set the sorting direction to either Ascending or Descending.

Slider Settings #

The Slider Settings transform your category display into a dynamic carousel, allowing users to scroll through categories.

Responsive Visibility: Set the number of categories visible simultaneously across different devices:

• Desktop: Default is 6.
• Tablet (Landscape/Portrait): Ranging from 4 to 5.
• Mobile (Landscape/Portrait): Ranging from 2 to 3.

• Space Between Slides: Adjust the pixel gap between each category card (currently 20px).
• Loop Slides: Toggle Yes to allow the slider to return to the beginning after reaching the last item.
• Autoplay: Set the slider to move automatically. You can adjust the Autoplay Delay (default 3000ms) and Transition Speed (default 1000ms).

Navigation Controls:

• Show Navigation: Toggle the visibility of navigation arrows.
• Navigation Button/Icon Size: Adjust the scale of the arrow buttons and icons.
• Horizontal/Vertical Distance: Fine-tune the position of the arrows relative to the slider edges and center.

Style Tab: Category Image #

This section controls the appearance and behavior of the category thumbnail images.

• Equal Height: Toggle this to Yes to ensure all category images in the grid or slider maintain a uniform height for a balanced look.
• Height: Use the slider to set a custom pixel height for the images.
• Object Fit: Define how the image should fit within its container, such as Cover, which ensures the image fills the area without being distorted.
• Object Position: Choose the focal point of the image (e.g., Center Center) to determine which part of the image remains visible if cropped.
• Border Radius: Adjust the roundness of the image corners to create sharp or softened edges.
• Background Color: Apply a color behind the image, which is useful if your images have transparency.

Style Tab: Category Items #

The Category Items section provides specific typography and color controls for the text elements within each category card.

• Title Typography: Click the pencil icon to set the font family, size, and weight for the category name.
• Title Color: Define the text color for the category title.
• Count Typography: Customize the font style for the product count (e.g., “5 Products”) displayed within the category.
• Count Color: Set the color for the product count text.

Style Tab: Navigation Arrows #

The Navigation Arrows section allows you to customize the appearance of the slider controls to ensure they match your store’s branding and remain visible to users.

• State (Normal / Hover): Switch between these tabs to define different visual styles for the arrows when they are in their static state versus when a user hovers over them.
• Background Color: Select the fill color for the navigation button container.
• Icon Color: Set the specific color for the arrow icon itself.
• Box Shadow: Click the pencil icon to apply a shadow effect, adding depth and making the navigation buttons stand out against the category images.