Skip to main content

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

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.

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.

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.
Last updated on