Product Carousel

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
Product Carousel Widget

Content Tab

Product Carousel
  • 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.
Content
  • 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.
Add to Cart
  • 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.
Quick View
  • 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.
Carousel Settings
  • 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.
Carousel Settings > Additional Options
  • 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

Product Box
  • 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.
Image
  • Border Type: Set the border type to none, solid, double, dotted or dashed.
  • Border Radius: Set the border radius to control corner roundness.
Content
  • 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.
Add to Cart
  • 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
Quick View
  • 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
Badges
  • 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.
Navigation
  • 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.
© WebshopWorks - Professional PrestaShop Addons