--- title: Advanced Product Gallery Overview description: "The [DiviMerc Advanced Product Gallery module](https://divimerc.com/modules/advanced-product-gallery/) lets you create a more interactive WooCommerce product gallery with customized images, thumbnails, navigation, zoom, lightbox, video and 3D media, etc. **Important Notes:** - Enable the Advanced Product Gallery module from **DiviMerc → Modules**.…" url: "https://divimerc.com/docs/advanced-product-gallery/" updated: "2026-09-26" category: Modules --- # Advanced Product Gallery Overview The [DiviMerc Advanced Product Gallery module](https://divimerc.com/modules/advanced-product-gallery/) lets you create a more interactive WooCommerce product gallery with customized images, thumbnails, navigation, zoom, lightbox, video and 3D media, etc. **Important Notes:** - Enable the Advanced Product Gallery module from **DiviMerc → Modules**. - Enable Video & 3D Media from **DiviMerc → Extensions** to add videos or 3D models. - Add the **video or 3D model** from the product editing screen. - The extension automatically enables **.glb and .gltf** uploads, so no separate Media Support extension is needed. - The module can be placed inside a Divi Loop, so a shop, category or custom archive layout can show each product’s own gallery on its card. Let’s see the settings in brief and how to make better use of it. ## Content Tab The Content tab lets you choose the product, arrange the gallery, control navigation, configure zoom and lightbox behavior and enable supported video or 3D media. ### Content The **Product** option lets you choose which product’s gallery will be displayed in the product page. ![](https://divimerc.com/wp-content/uploads/2026/08/advanced-product-gallery-1.webp) - **This Product:** Dynamically displays the product media of the current product. - **Latest Product:** Automatically displays the media of the most recently added product. - **Specific Product:** Lets you select a specific product and display its media wherever the module is used. ### Layout - **Layout:** Choose how the product images and thumbnails are arranged: - Thumbnail Bottom - Thumbnail Left - Thumbnail Right - Overlaid Thumbnails - Grid - Stacked - Hidden Thumbnails - **Thumbnails Bottom on Mobile:** Arrange in a horizontal row or filmstrip at the lower edge on mobile devices. This is not available with the Thumbnail Bottom and Hidden Thumbnails layouts. - **Single Line Thumbnails:** Fit all thumbnails onto a single line. It’s only visible in the front end. - **Grid Columns:** Set number of columns to display in this format. (This option only appears when you select the **Grid layout.)** - **Set Thumbnail Width:** Adjust the width of the gallery thumbnails. (This option appears only for layouts that display thumbnails.) - **Thumbnail Alignment:** Choose how the thumbnails align within the gallery. (Does not appear when single line thumbnails are enabled. Plus, the available alignment options may vary depending on the selected layout.) - **Inactive Thumbnail Opacity:** Set the opacity of thumbnails that are not currently active. - **Image Aspect Ratio:** Choose the width-to-height ratio of the product images: - Original (WooCommerce default) - Square (1:1) - Portrait (3:4) - Landscape (4:3) - Widescreen (16:9) - Custom - **Custom Ratio:** Set a custom aspect ratio based on your needs. - **Image Fit:** Choose how the image fits inside the selected aspect ratio. This setting does not appear when you choose default or custom ratio. - Cover - Contain - **Sticky Gallery:** Enable this option to keep the gallery visible while shoppers scroll through the product content. ![](https://divimerc.com/wp-content/uploads/2026/08/advanced-product-gallery-2.webp) ### Behavior & Navigation - **Enable Slider:** Turn the product gallery into a slider. When enabled, the **Show Arrows On Hover** option appears. - **Show Arrows On Hover:** Show the slider navigation arrows only when shoppers hover over the gallery. - **Variation Gallery**: Decide what happens to the thumbnail strip when a shopper picks a variation. Available options: - **Replace the gallery:** Replace the strip with that variation’s own gallery images. - **Highlight in place:** Let the full product gallery stay and the variation’s picture is selected within it. - **Switch On Thumbnail Hover:** Switch the main gallery item when shoppers hover over a thumbnail instead of clicking it. - **Show Counter:** Display the current gallery item number and total number of gallery items. When enabled, the **Counter Style** option appears. Available style options: - Number (2 / 6) - Text (1 out of 6) - Segments (story style) ![](https://divimerc.com/wp-content/uploads/2026/08/advanced-product-gallery-3.webp) ### Zoom & Lightbox - **Zoom Type:** Choose how image zoom works. Available options include: None, Inner Magnifier, Side Panel, Image Scale. - **Zoom Scale Amount:** Set the amount of zoom applied. This only appears when ‘Image Scale’ is selected from Zoom Type. - **Zoom Cursor Icon:** Choose the icon shown for the zoom cursor. - **Open Lightbox On Click:** Open the current gallery media in a larger lightbox view when shoppers click it. - **Lightbox Icon:** Choose the icon used for the lightbox control. ![](https://divimerc.com/wp-content/uploads/2026/08/advanced-product-gallery-4.webp) **Note:** Zoom effects work only on the live frontend and do not appear inside the Divi Builder preview.  ### Video & 3D Media This option requires the Video & 3D Media extension enabled and configured to display and further customize the appearance. - **Show Video Slide:** Enable this option to display video media in the product gallery. When enabled, additional video settings appear: - **Video Playback:** Choose how the video opens and plays: - Lightbox (modal) - Inline (in viewport) - **Autoplay:** Automatically start playing the video when it becomes active. - **Muted:** Play the video without sound. - **Loop Video:** Restart the video automatically after it finishes. - **Show Video Controls:** Display the standard video playback controls. - **Play Button Text:** Enter the text shown with the video play button. - **Show Text On Hover:** Show the play button text when shoppers hover over the video. - **Show 3D Model:** Enable this option to display 3D model media in the product gallery. When enabled, additional 3D settings appear: - **Auto-Rotate Model:** Automatically rotate the 3D model when it is displayed. **Note:** Keep **Muted** enabled when using Autoplay, as most browsers block autoplay with sound.  ![](https://divimerc.com/wp-content/uploads/2026/08/advanced-product-gallery-5.webp) **Elements:** Add any Divi element inside the Advanced Product Gallery as needed. **Background:** Configure the module background using Divi’s standard background controls. **Display Order:** Choose in which order an image or gallery will appear. **Element Label:** Rename the module for easier identification inside the Divi Builder. (Visible only to you.) ## Design Tab The Design tab lets you customize the main product image, thumbnail gallery, arrows, zoom cursor, lightbox control and overall module appearance. ![](https://divimerc.com/wp-content/uploads/2026/08/advanced-product-gallery-6.webp) **Product Image**: Customize the product image border width, color, style and corner radius. ### Product Gallery - **Gap:** Adjust the spacing between individual gallery thumbnails. - **Active Item Border Color:** Set the border color used to highlight the currently active thumbnail. ![](https://divimerc.com/wp-content/uploads/2026/08/advanced-product-gallery-7.webp) Also adjust border, box shadow, spacing and background as needed with the Divi’s core controls. ### Arrows The **Arrows** settings become available when **Enable Slider** is enabled under **Content → Behavior & Navigation**. - **Arrow Icon Color:** Set the color of the previous and next arrow icons. - **Arrow Background Color:** Set the background color behind the arrow icons. - **Arrow Icon Size:** Adjust the size of the navigation arrow icons. - **Disabled Arrow Opacity:** Control the opacity of an arrow when there is no previous or next gallery item available. - **Custom Previous Icon:** Enable this option to replace the default previous arrow with a custom icon. - **Previous Icon:** Choose the icon you want to use for the previous navigation control. - **Custom Next Icon:** Enable this option to replace the default next arrow with a custom icon. - **Next Icon:** Choose the icon you want to use for the next navigation control. ![](https://divimerc.com/wp-content/uploads/2026/08/advanced-product-gallery-8.webp) Use Divi’s standard **Border, Box Shadow and Spacing** controls to further style the arrows. **Counter:** You can customize the counter with settings like text, background, border and spacing. (The Counter settings become available when **Show Counter** is enabled under **Content → Behavior & Navigation**.) ### Zoom Cursor - **Zoom Cursor Color:** Set the color of the cursor used for the zoom interaction. - **Zoom Cursor Size:** Control the size of the zoom cursor. ![](https://divimerc.com/wp-content/uploads/2026/08/advanced-product-gallery-9.webp) ### Lightbox - **Lightbox Icon Color:** Set the color of the lightbox icon. - **Lightbox Icon Background:** Define the background color behind the lightbox icon. - **Lightbox Icon Size:** Control the size of the lightbox icon. - **Border:** Set the styling and typography for further customization. ![](https://divimerc.com/wp-content/uploads/2026/08/advanced-product-gallery-10.webp) **Note:** These settings customize the **lightbox trigger icon only**. The WooCommerce PhotoSwipe lightbox overlay itself is not customizable from this module.  ### Video Play Button These options appear only when ‘Show Video Slide’ is enabled from **Content → Video & 3D Media**. - **Vertical Position:** Choose where the video play button appears vertically: - Top - Center - Bottom - **Horizontal Position:** Choose where the video play button appears horizontally: - Left - Center - Right - **Icon Color:** Set the color of the video play icon. - **Icon Size:** Adjust the size of the video play icon. - **Module Text:** Customize the typography and appearance of the play button text. Customize the background, border and spacing with the Divi’s controls as needed. behind the video play button. ![](https://divimerc.com/wp-content/uploads/2026/08/advanced-product-gallery-11-1024x690.webp) **Note:** Video Play Button controls only appear when the show video slide button is enabled from the content tab. ### 3D Controls These options appear only when ‘Show 3D Model’ is enabled from **Content → Video & 3D Media**. - **Background:** Set the background color of the 3D control buttons. - **Icon Color:** Choose the color of the icons inside the 3D control buttons. - **Border Color:** Set the border color of the 3D control buttons. - **Hover Background:** Choose the background color shown when users hover over a 3D control button. - **Icon Size:** Adjust the size of the icons inside the buttons. - **Button Size:** Control the overall size of the 3D control buttons. - **Corner Radius:** Adjust the roundness of the button corners. ![](https://divimerc.com/wp-content/uploads/2026/08/advanced-product-gallery-12.webp) **Border:** Customize the lightbox control border width, color, style and corner radius. **Sizing:** Adjust the module width, height, alignment and aspect ratio using Divi’s standard sizing controls. **Spacing:** Adjust margin and padding to control the space around the module. **Border:** Customize the module border width, color, style and corner radius. **Box Shadow:** Add and customize a shadow around the module to create depth. **Transform:** Adjust the module’s scale, position, rotation or skew using Divi’s transform controls. **Animation:** Apply Divi’s built-in entrance animations to the module. ## Advanced Tab The Advanced tab provides the standard Divi settings for custom CSS, visibility conditions, transitions, attributes, positioning and other advanced controls. ## Need Help? If you have any questions or experience issues while using the Advanced Product Gallery module, please contact our support team at: support@wprio.com