Product Categories Slider Widget
Use the widget to display product categories as a slider.
Content
Categories
Categories Count: Choose the number of categories to be displayed.
Slider Type: Choose between Carousel and Coverflow types.
Carousel Slider Type allows to choose the Slider Effect from the dropdown.
Slider Direction: Choose between Horizontal and Vertical direction.
Slider Height: Choose between Auto (for Horizontal direction only) and Custom height. When Custom slider height is chosen you can set desired Height manually.
Slides Per View: Set desired amount of slides for desktop, tablet and mobile.
Slides to Scroll: Choose how many slides should be scrolled per swipe.
Query
Source: Select what categories should be shown. You can choose to show all categories, manually select the needed categories, show categories by parent or display current subcategories.
Hide Empty: Slide to YES to hide empty categories.
Order By: Choose the parameter your categories should be ordered by. The choice is between Name, Slug, Description and Count.
Order: Choose between descent and ascent order.
Slider Options
Autoplay: Slide to YES to enable Autoplay.
Autoplay Speed: Set desired Autoplay speed here.
Animation Speed: Set how fast slides should slide. (in milliseconds)
Active Slide: Choose the slide that should be shown first.
Pause on Hover: Slide to YES to enable Pause on Hover.
Autoplay Reverse: Slide to YES to enable Autoplay reverse.
Infinite Loop: Slide to YES to enable Infinite Loop.
Mousewheel Control: Slide to YES to slide slides with a Mouse wheel.
Free Positioning: Slide to Yes to enable free slides positioning. When this mode is enabled slides don’t have fixed positions, like usual scroller.
Content Animation: Choose the Animation from the dropdown.
Navigation: Choose slides’ Navigation between None, Bullets, Progressbar and Fraction.
When Bullets Navigation is chosen you can select its type between Normal, Dynamic and Numbered.
Show Arrows: Slide to YES to show Arrows and set them.
Widget Lazy Load
Enable Widget Lazy Load: Slide to YES to enable widget lazy load. Enabling the setting will delay the website widget loading until it comes into visitor’s view to improve page load time.
You can choose the settings you want in the widget’s Style tab, or set the Preloader view globally in the Site Settings to apply to all widgets with lazy loading enabled.
Style
Slider Layout
Space Between: Set the space between slides for desktop, tablet and mobile.
Width: Set the slider width for desktop, tablet and mobile.
Padding: Set paddings for desktop, tablet and mobile.
Separators: Choose a separator type from the dropdown and set it.
Categories
Alignment: Choose between left, center and right alignment for desktop, tablet and mobile.
Background Type: Choose between Color and Gradient background type (for Normal and Hover modes).
Border Color: Set the desired border color.
Border Radius: Set a border radius for desktop, tablet and mobile.
Box Shadow: Choose desired settings from the dropdown.
Padding: Set paddings for desktop, tablet and mobile.
Border Type: Choose the desired border type from the dropdown and set it.
Image
Image Size: Choose the desired image size.
Spacing: Set a spacing between image and category title.
Border Color: Set the desired border color (for Normal and Hover modes).
Border Radius: Set a border radius for desktop, tablet and mobile.
Box Shadow: Choose desired settings from the dropdown.
CSS Filters: Use the settings from the dropdown to set blur, brightness, contract, saturation and hue.
Border Type: Choose the desired border type from the dropdown and set it.
Title
Title
Typography: Set a Typography using settings from the dropdown.
Color: Set the desired text color (for Normal and Hover modes).
Text Shadow: Choose desired settings from the dropdown.
Product Count
Position: Choose between Inline and Block product count position.
Vertical Alignment: Choose between Baseline, Top, Center and Bottom vertical alignment.
Typography: Set a Typography using settings from the dropdown.
Color: Set the desired product count color.
Spacing: Set the spacing between product count and title for desktop, tablet and mobile.
Product Count Additional
Text: Add the desired Text and Text for Plural and set its position (before or after amount), spacing between text and product count and choose whether you’d like the amount to be displayed in brackets.
Slider Arrows
Slider Arrows
Icon Color: Choose Icon Color from a color palette or dynamic tags. (for Normal and Hover modes)
Background Color: Choose Icon Background Color from a color palette or dynamic tags. (for Normal and Hover modes)
Box Shadow: Choose desired settings from the dropdown. (for Normal and Hover modes)
Icon Size: Set Icon size for desktop, tablet and mobile.
Arrows Box Width: Set Arrows Box Width for desktop, tablet and mobile.
Arrows Box Height: Set Arrows Box Height for desktop, tablet and mobile.
Border Radius: Set Arrows Box border radius for desktop, tablet and mobile.
Border Type: Choose a Border Type from the dropdown and set it.
Padding: Set padding for desktop, tablet and mobile.
Container
Position: Choose between Horizontal and Vertical positions.
Horizontal alignment: Choose horizontal alignment between Start, Center, End and Space between for desktop, tablet and mobile.
Vertical alignment: Choose vertical alignment between Top, Center and Bottom for desktop, tablet and mobile.
Margin: Set margins for desktop, tablet and mobile.
Widget Lazy Load Preloader Type Icon
Icon
Icon Source: Choose default or custom icon.
Icon Size: Set the icon size for widescreen, desktop, tablet portrait and mobile portrait modes.
Icon Color: Choose the icon color.
Icon Animation Speed (ms): Set the icon animation speed in milliseconds.
Container
Height: Set the container height for widescreen, desktop, tablet portrait and mobile portrait modes.
Background Type: Choose the container background type between Classic and Gradient and set it.
Overlay Background Type: Choose the container overlay background type between Classic and Gradient and set it.
Border Type: Choose the border type from the dropdown.
Border Radius: Set a desired border radius.
Box Shadow: Choose desired settings from the dropdown.
Widget Lazy Load Preloader Type Grid
Grid
Count: Choose the number of icons that should be displayed.
Columns: Add the number of columns the icons should be shown for widescreen, desktop, tablet portrait and mobile portrait modes.
Height: Set the height for widescreen, desktop, tablet portrait and mobile portrait modes.
Horizontal gap: Choose Horizontal gap between elements for widescreen, desktop, tablet portrait and mobile portrait modes.
Vertical gap: Set Vertical gap between elements for widescreen, desktop, tablet portrait and mobile portrait modes.
Container padding: Add Container paddings for widescreen, desktop, tablet portrait and mobile portrait modes.
Icon: Choose the icon from Icon library or upload desired SVG.
Icon size: Set the icon size for widescreen, desktop, tablet portrait and mobile portrait modes.
Icon Color: Choose the icon color.
Icon Animation Type: Choose between none, Blink and Spin types.
Icon Animation Speed (ms): Set the icon animation speed in milliseconds.
Background Type: Choose the background type between Classic and Gradient and set it.
Border Type: Choose the border type from the dropdown.
Border Radius: Set a desired border radius.
Box Shadow: Choose desired settings from the dropdown.
Container
Background Type: Choose the container background type between Classic and Gradient and set it.
Overlay Background Type: Choose the container overlay background type between Classic and Gradient and set it.
Border Type: Choose the border type from the dropdown.
Border Radius: Set a desired border radius.
Box Shadow: Choose desired settings from the dropdown.
Advanced
Set the Advanced options that are applicable to this widget