Get a fast, conversion-focused WooCommerce theme in 2022. Switch to Shoptimizer.

Home Documentation Shoptimizer CommerceKit CommerceKit Product Gallery

CommerceKit Product Gallery

CommerceKit includes a Product Gallery module which transforms the default WooCommerce gallery into something much more powerful. It includes features such as:

  • Multiple gallery layouts.
  • Can now select a specific gallery type on an individual product-basis also.
  • Support for variation image swapping.
  • Include videos in the product gallery.
  • Enable or disable a lightbox when you click on an image.
  • Optimized for performance. See how we achieved a PageSpeed score of 98 on our single product pages.

To get started go to: CommerceKit > Product Gallery – and activate the module.

CommerceKit Product Gallery Admin

Gallery layouts

This is a global setting which allows you to choose from multiple layouts. The layout options are:

  • Horizontal (default)
  • Grid: 2 cols x 4 rows
  • Grid: 3 cols, 1 col, 2 cols
  • Grid: 1 col, 2 cols, 1 col

The grid options work best if you like to create bespoke product page designs with a specific number of images on each. With a grid layout selected, the summary area ‘sticks’, allowing you to scroll through the gallery images, while still keeping the key product data on screen.

You can also select a unique gallery layout on a per-product basis by editing a product. You’ll see a new dropdown on the right-hand side. This will overrule the global gallery selection.

Product Gallery Options

Adding video

To add a video to your gallery, first add a regular product gallery image. It will still need a thumbnail.

Adding a video to your product gallery

Once you have uploaded a thumbnail, you’ll see a ‘play’ icon over the product thumbnail. Click on that.

Adding a video to your product gallery

Now, you’ll be able to upload an MP4 video, or include a Youtube or Vimeo url.

Adding a video to your product gallery

If you’re uploading an MP4 which is the incorrect aspect ratio (say you want it to be square, like the product images) you can use this tool to resize it.

Troubleshooting

If you are using Elementor on your product pages, you will need to switch off this option in order to use CommerceKit’s Product Gallery module.

Elementor > Settings > Experiments tab > Improved Asset Loading

$50
Off

Do you want a whopping $50 off Shoptimizer for WooCommerce?

Click the button below to get Shoptimizer for only $49. (Regular price: $99).
This is a special launch offer for today only.
Get it before it is gone!