Product Image Gallery Slider

Written by the Divi Engine Documentation Team

Introduction

Follow these steps to set up a product image gallery slider.

Example

Below is an example of what your product image gallery could look like. Click HERE to view.

Step 1: Add Images To Your Products

First off you will need to add a gallery of images to each product. Go to your products and add images as seen in the image below. 

Step 2: Add PP Gallery Module To Your Product Page Template

Head over to the Divi Library or Theme Builder and create a product page layout for your products. This is the layout that will be assigned to each of your products. On the template add relevant modules including the PP Gallery module. Save and view your gallery on the front end.

Step 3: Customize Your Image Gallery

The Gallery module has a number of settings for you to consider. I will go through some of the Content Tab, for Design please explore Divi's tutorials. You have the choice of designing a custom or default gallery.

  • Gallery Style: Select the gallery style of your choice.
  • Disable Lightbox (Custom): Enabling this disables the lightbox slider.
  • Disable Image Zoom (Custom): Enabling this disables the image zoom.
  • Enable Name Title (Custom): Enabling this adds the image name below.
  • Disable Lightbox (Default): Enabling this hides magnifying glass over the image.
  • Hide Thumbnails (Default): Enable this to hide thumbnails.

If you wish to add more to your custom gallery then slider settings and slider thumbnail settings. Note that each setting has an explanation which is visible by clicking the question mark.

More Support?

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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.