Related Products Widget
Use the widget to add Related Products on a page.
Content
Products: Set desired amount of products to display.
Product Template: Choose between Default and Custom Product template.
When a Custom Product Template is selected you can choose the template to use.
Query: Choose the products to display between Related, Upsells and Cross-sells.
Widget where Cross-sells Query is selected can be used on a Cart page only.
Title: Add needed Widget Title here.
Products per Page: Choose the needed amouте from a dropdown.
Slider Type: Choose between Carousel and Coverflow.
Carousel is the standard rotating carousel skin that shows a customized number of image or video slides per view. This type allows you to choose a Slider Effect between Cube, Fade, Slide and Flip.
Coverflow is a slider skin that shows a central slide in the front and two side slides in the back.
Slider Direction: Choose between Horizontal and Vertical Slider direction.
Slider Height: Choose between Auto and Custom Slider Height.
Custom Slider Height allows to set desired slider height manually.
Slides Per View: Set the amount of Slides to be shown per row for desktop, tablet and mobile.
Slides to Scroll: Set the amount of Slides to be scrolled per swipe.
Order By: Choose desired order parameter from the dropdown. The choice is between Date, Title, Price, Popularity, Rating, Random or Menu Order.
Order: Set ascending or descending order.
Slider Options
Autoplay: Slide to YES to enable Autoplay.
Autoplay Speed: Set desired speed here.
Animation Speed: Set the animation speed in milliseconds, i.e. how fast slides should slide.
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.
Mouse Wheel Control: Slide to YES to slide slides with a Mouse wheel.
Centered Slides: Slide to YES to center the Active slide.
Free Positioning: Slide to Yes to enable free slides positioning.
Scrollbar: Slide to YES to enable a scrollbar.
Navigation
Choose a slides’ Navigation from the dropdown. You can choose between None, Bullets, Progressbar and Fraction.
Arrows
Show Arrows: Slide to YES to enable arrows.
Visibility: Choose when arrows should be displayed. The choice is between “Always” and “On hover”.
Choose needed icons for Next and Previous arrows and add a Text if needed.
Style
Products
Image
Border Type: Choose a Border Type from the dropdown and set it.
Border Radius: Set a border radius to products.
Spacing: Set a spacing between Image and Title for desktop, tablet and mobile.
Title
Color: Choose a Title Color for Normal and Hover modes.
Typography: Set a Typography using settings from the dropdown.
Spacing: Set a spacing between Title and Rating for desktop, tablet and mobile.
Rating
Star Color: Choose a Star Color.
Empty Star Color: Choose an Empty Star Color.
Star Size: Set desired Star size.
Spacing: Set a spacing between Rating and Price for desktop, tablet and mobile.
Sale Price
Color: Choose a Sale Price Color.
Typography: Set a Typography using settings from the dropdown.
Regular Price
Color: Choose a Regular Price Color.
Typography: Set a Typography using settings from the dropdown.
Button
Show Button: Slide to YES to enable such buttons as ‘Add to Cart’, ‘Read more’, ‘Select Options’.
Typography: Set a Typography using settings from the dropdown.
Text Color: Choose a Button Text Color.
Background Color: Choose a Button Background Color.
Border Type: Choose a Border Type from the dropdown and set it.
Border Radius: Set a border radius to products.
Text Padding: Set desired paddings for Button Text.
Spacing: Set a spacing between Price and Button for desktop, tablet and mobile.
View Cart
Color: Choose a View Cart link Color.
Typography: Set a Typography using settings from the dropdown.
Product Box
Box Shadow: Choose desired settings from the dropdown (for Normal and Hover Modes).
Background Color: Choose a Box Background Color (for Normal and Hover Modes).
Border Color: Choose a Box Border Color (for Normal and Hover Modes).
Alignment: Choose between Left, Center and Right Alignment for desktop, tablet and mobile.
Border Width: Set a border width to a box.
Border Radius: Set a border radius to a box.
Padding: Set Box paddings for desktop, tablet and mobile.
Sale Label
Sale Label: Slide to YES to enable the label.
Text Color: Choose a Label Text Color.
Background Color: Choose a Label Background Color.
Typography: Set a Typography using settings from the dropdown.
Border Radius: Set a border radius to a Label.
Width: Set a Label width.
Height: Set a Label height.
Position: Choose a Label position between Right and Left.
Distance: Set the distance of the Sale Label from the top of the products box.
Slider Layout
Space Between: Set a space between slides for desktop, tablet and mobile.
Width: Set slides’ width for desktop, tablet and mobile.
Border Type: Choose a Border Type from the dropdown and set it.
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.
Slider Navigation
Background Color: Choose Navigation Background Color from a color palette or dynamic tags (for Normal, Hover and Active modes).
Box Shadow: Choose desired settings from the dropdown (for Normal, Hover and Active modes).
Border Type: Choose a Border Type from the dropdown and set it.
Border Radius: Set Navigation border radius for desktop, tablet and mobile.
Size: Set Navigation size for desktop, tablet and mobile.
Spacing: Set a spacing between bullets.
Container
Background Color: Choose a Container Background Color.
Border Type: Choose a Border Type from the dropdown and set it.
Padding: Set a Container padding for desktop, tablet and mobile.
Margin: Set a Container margins for desktop, tablet and mobile.
Border Radius: Set a Container border radius for desktop, tablet and mobile.
Horizontal alignment: Choose horizontal alignment between Left, Center and Right for desktop, tablet and mobile.
Vertical alignment: Choose vertical alignment between Top, Center and Bottom for desktop, tablet and mobile.
Advanced
Set the Advanced options that are applicable to this widget