G Product Carousel: How To Add & Edit A Product Carousel?

Written by the Divi Engine Documentation Team

Introduction

Follow this information to add and edit the G Product Carousel module. This module displays your products in a carousel.

Step 1: Create The Product Loop Layout

The product loop layout (loop layout) is a layout that you create in the Divi Library that contains information about each product. What you want to do is to create a new layout and add modules for this layout such as the thumbnail, title, price and add to the cart module.

Step 2: Add The Carousel Module & Assign Loop

Add the carousel module to your shop page (or another page) and assign your product layout. The carousel has a ton of setting so make sure that you spend time exploring its functionality.

Carousel Module Settings

Main Settings

Loop Layout: Select your custom loop layout.
Link Each Layout To Product: Enable to link each layout to the product.
Display Featured Products: Enable to show featured products.
Display Most Popular Products: Enable to dispaly the most popular products.
Display On Sale Products: Enable to show on-sale products.
Display New Products: Enable to show new products.
Number Of Days: Set the number of days for your new products.
Hide Non Purchasable Products: Enable to hide non-purchasable products.
Carousel Type: Select a carousel type.
Show Hidden Products: Enable to show hidden products.
Posts Number: Set the number of products to show.
What Do You Want To Sort Your Products By: Select how you want to sort the carousel.
Sort Order: Select a sort order.
Equal Height Grid Cards: Enable to force each product card to be the same height.
Align Last Module At The Bottom: Enable to force each card to align at the bottom.
Custom Loop: Enable to set a custom loop.
Include Tags Only: Add a list of a comma-separated list of tag URLs.
Include Categories Only: Add a list of a comma-separated list of category URLs.

Carousel Settings

Desktop

Desktop Images Number In View: Define the number of images in view.
Desktop Images Number To Slide: Define the number of images to slide.
Enable Arrows: Enable to show arrows.
Left Icon Code: Customize your own left arrow icon by finding an icon at the Elegant Themes icon page and paste the code after the X.
Right Icon Code: Customize your own right arrow icon by finding an icon at the Elegant Themes icon page and paste the code after the X.
Arrows Colour: Define the colour of the arrows.
Arrow Distance From Edge: Set the distance between each arrow and the edge.
Enable Infinite Loop: Enable an infinite loop.
Autoplay And Delay: Add the delay time in milliseconds for each slide.
Slide Speed: Set the speed of each slide in milliseconds.

Tablet

Tablet Portrait Images Number In View: Define the portrait number of images in view.
Tablet Portrait Images Number To Slide: Define the portrait number of images to slide.
Tablet Landscape Images Number In View: Define the landscape number of images in view.
Tablet Landscape Images Number To Slide: Define the landscape number of images to slide.
Enable Arrows On Tablet: Enable to make arrows on tablet.
Arrow Distance From Edge: Set the arrow distance.

Mobile

Mobile Images Number In View: Define the portrait number of images in view.
Mobile Images Number To Slide: Define the portrait number of images to slide.
Spacing Between Slides: Set the spacing between each slide.
Enable Arrows On Mobile: Enable to make arrows on mobile.
Arrow Distance From Edge: Set the arrow distance.

More Support?

Please email us at [email protected] if you are unable to get Divi BodyCommerce working.