Summary

  • Overview
  • Adding Product Carousel
  • Product Carousel Options
    • Size and Margin options
    • Presets and Layout options
    • Filter Products option
    • Arrows options
    • Active Product Options
    • All Products options

Product Carousel Overview

The Product Carousel is a special instance for the Products element that shows the products as a Carousel where you can present your products as a sliding carousel.

product-carousel-overview.png

This Element will correspondingly show the products created in your E-Commerce extension for WP or Joomla: WooCommerce or VirtueMart.

Add Product Carousel

To add the Product Carousel, you need to open the Element menu >> Carousel >> Product Carousel or from the Block (Element) menu >> Products >> Products Carousel.

product-carousel-add.png

Also, you can add it as a Products element. Choose the Carousel layout in the Products control options to switch it to the Products Carousel.

product-carousel-options-7.png

Add Product Elements

Use the plus sign inside the carousel item to choose what Product List Elements will appear in the carousel item. This will open the available Product List Elements.

product-carousel-add-element.png

Product Carousel Options

After adding the Products Carousel element to the page, you can select different options in the right panel to style it.

Size and Margin

You can manage the size options of your Carousel, making it screen width or any other desired size. Also, you can edit margins.

product-carousel-options-1.png

Presets and Layout

Choose one of the defined Products Presets and edit the Layout. You can select the simple Grid Layout that will make it a basic Products element or choose the Carousel option to make it a sliding carousel.

You can set the number of Columns and specify the number of products present in a Carousel using the Product Count option. To stylize the Layout, edit the Gap between Items.

product-carousel-options-2.png

Filter Products

Choose what products to be shown with the Products Carousel element. You can choose the Recent Products (all categories), Featured Products, or products from the specific Category (type the exact category name in the input below).

product-carousel-options-3.png

Arrows

Next, you can activate and stylize the Arrows in the Products Carousel. Choose the Icon, its style and specify the default and hover state colors for the Icon. Then also edit the Arrow Shape Style activating the Background color or gradient with the desired colors.

The Arrows can have a Border with straight or rounded corners. Here you can also specify the inner Spacing. The next option allows to Flip the arrows Icon in two directions. Also, you can hide the Arrows any Responsive View if required.

product-carousel-options-4.png

Active Product

Here you can choose the styling for a separate item inside the Carousel. For that, select the Active Item option, and then the above options like Background and Hyperlink will be applied to the currently active item only.

product-carousel-options-5.png

If you then switch to the All Items option, then the styling of the currently active item will be applied to all carousel items.

All Products

You can specify the Layout for all Products in your Carousel. Edit the Border Color, Width, Radius, and Padding inside the Carousel items.

You can also set the custom CSS Class for the Product Carousel element and specify if you need to hide it in any responsive mode.

product-carousel-options-6.png

## Summary - Overview - Adding Product Carousel - Product Carousel Options - Size and Margin options - Presets and Layout options - Filter Products option - Arrows options - Active Product Options - All Products options ## Product Carousel Overview The Product Carousel is a special instance for the Products element that shows the products as a Carousel where you can present your products as a sliding carousel. !product-carousel-overview.png! This Element will correspondingly show the products created in your E-Commerce extension for WP or Joomla: WooCommerce or VirtueMart. ## Add Product Carousel To add the Product Carousel, you need to open the Element menu >> Carousel >> Product Carousel or from the Block (Element) menu >> Products >> Products Carousel. !product-carousel-add.png! Also, you can add it as a Products element. Choose the Carousel layout in the Products control options to switch it to the Products Carousel. !product-carousel-options-7.png! ## Add Product Elements Use the plus sign inside the carousel item to choose what Product List Elements will appear in the carousel item. This will open the available Product List Elements. !product-carousel-add-element.png! ## Product Carousel Options After adding the Products Carousel element to the page, you can select different options in the right panel to style it. ### Size and Margin You can manage the size options of your Carousel, making it screen width or any other desired size. Also, you can edit margins. !product-carousel-options-1.png! ### Presets and Layout Choose one of the defined Products Presets and edit the Layout. You can select the simple Grid Layout that will make it a basic Products element or choose the Carousel option to make it a sliding carousel. You can set the number of Columns and specify the number of products present in a Carousel using the Product Count option. To stylize the Layout, edit the Gap between Items. !product-carousel-options-2.png! ### Filter Products Choose what products to be shown with the Products Carousel element. You can choose the Recent Products (all categories), Featured Products, or products from the specific Category (type the exact category name in the input below). !product-carousel-options-3.png! ### Arrows Next, you can activate and stylize the Arrows in the Products Carousel. Choose the Icon, its style and specify the default and hover state colors for the Icon. Then also edit the Arrow Shape Style activating the Background color or gradient with the desired colors. The Arrows can have a Border with straight or rounded corners. Here you can also specify the inner Spacing. The next option allows to Flip the arrows Icon in two directions. Also, you can hide the Arrows any Responsive View if required. !product-carousel-options-4.png! ### Active Product Here you can choose the styling for a separate item inside the Carousel. For that, select the Active Item option, and then the above options like Background and Hyperlink will be applied to the currently active item only. !product-carousel-options-5.png! If you then switch to the All Items option, then the styling of the currently active item will be applied to all carousel items. ### All Products You can specify the Layout for all Products in your Carousel. Edit the Border Color, Width, Radius, and Padding inside the Carousel items. You can also set the custom CSS Class for the Product Carousel element and specify if you need to hide it in any responsive mode. !product-carousel-options-6.png! ##