Product Carousel Widget

Showcase your products to your buyers in a fancy carousel! This widget will help you to increase sales by highlighting your featured products, new products, prices drop and bestsellers.

Product Carousel Widget

Content Tab

• Skin: Choose either the Custom skin, Default skin or the Minimal-product.
• Listing: Choose product listin from featured products, prices drop, new products, best products or custom products by ID.
• Category ID: Choose the category ID of the products.
• Order By: Set ordering by popularity, sales volume, arrival or update.
• Order By: Select the ordering direction to ascending or descending.
• Randomize: Enable or disable the display in random order.
• Product Limit: Maximum number of the products in the carousel.

• Image Size: Choose the size of the product image from predefined PrestaShop values.
• Second Image: Enable or disable second image.
• Category: Show or hide the product category title.
• Description: Show or hide the description of the product.
• Regular Price: Enable or disable the regular price.
• Add to Cart: Show or hide the Add to Cart button.
• Quick View: Show or hide the Quick View button.
• Badges: Select badges for the product if available: Sale, New, Pack.
• Sale Text: Text of the sale badge.

• Text: Text of the button.
• Icon: Select an icon from the FontAwesome library.
• Icon Position: Choose the icon position from before or after.
• Icon Spacing: Set the space between the text and the icon.

• Text: Text of the button.
• Icon: Select an icon from the FontAwesome library.
• Icon Position: Choose the icon position from before or after.
• Icon Spacing: Set the space between the text and the icon.

• Slides to Show: Select the number of slides to show at one time, from 1 to 10, available for desktop, tablet, and mobile devices.
• Slides to Scroll: Set how many slides are scrolled per swipe.
• Image Sretch: Select Yes or No.
• Navigation: Choose to display navigation Arrows, Dots, Both or None.

• Pause on Hover: Select whether or not to pause autoplay when a user interacts with the carousel. Yes or No.
• Automatically: Choose Yes or No to rotate slides automatically.
• Autoplay Speed: Set the time it takes for the next slide to start rotating. This time is in milliseconds, so 1000 ms is equal to 1 second.
• Infinite Loop: Show carousel in a continuous loop, infinitely. Yes or No.
• Animation Speed: Set the speed of slide animation, in milliseconds.
• Direction: Choose to have the slides rotate from left or right.

Style Tab

• Columns Gap: Set the spacing between product columns.
• Rows Gap: Set the margin top and bottom of the product row.
• Padding: Set the padding for the box.
• Border Width: Set the border width.
• Border Radius: Set the border radius to control corner roundness.
• Border Color: Choose the color for the box’s border.
• Background Color: Choose the color for the box’s background.
• Border Color: Choose the color for the button’s border.
• Box Shadow: Set the box shadow settings for the box.

• Border Type: Set the border type to none, solid, double, dotted or dashed.
• Border Radius: Set the border radius to control corner roundness.

• Alignment: Align the content to the left, center or right of the box
• Padding: Set the padding for the content
• Min. Height: Set the minimum height of the whole box
• Spacing: Spacing between the image and the title.
• Allow Multiline: Enable or disable multiline for the product title.
• Color: Choose the color of the title.
• Typography: Set the typography options for the title.
• Spacing: Spacing between the title and the price.
• Color: Choose the color of the price.
• Typography: Set the typography options for the price.

• Spacing: Spacing between the content and the button.
• Alignment: Align the button to the left, center, right or justified.
• Size: Select the button size, from Extra Small to Extra Large
• Typography: Set the typography options for the button
• Text Color: Choose the color for the button’s text
• Background Color: Choose the color for the button’s background
• Border Color: Choose the color for the button’s border
• Border Width: Set the border width
• Border Radius: Set the border radius to control corner roundness

• Typography: Set the typography options for the button
• Text Color: Choose the color for the button’s text
• Background Color: Choose the color for the button’s background
• Border Color: Choose the color for the button’s border
• Border Width: Set the border width
• Border Radius: Set the border radius to control corner roundness

• Top Distance: Spacing from the top of the box.
• Right Distance: Spacing from right of the box.
• Spacing: Spacing between badges.
• Min. Width: Set the minimum width of the badges.
• Padding: Set the padding for the badges.
• Border Radius: Set the border radius to control corner roundness.
• Typography: Set the typography options for the title.
• Position: Set the position of badges to left or right.
• Text Color: Choose the color for the badge’s text.
• Background Color: Choose the color for the badge’s background.

• Arrows Position: Set the position of the arrows inside or outside the slider.
• Arrows Size: Set the exact size of the arrows.
• Arrows Color: Set the color of the arrows.
• Arrows Background: Set the background color of the arrows.
• Dots Position Set the position of the dots inside or outside the slider.
• Dots Size: Set the exact size of the dots.
• Dots Color: Set the color of the dots.