How to add an image gallery to the product page

CartGenie makes it easy to add in a gallery of thumbnails underneath your main product images.

Here’s how…

Step 1 - Add “Extra Images” to your products / variants

In your CartGenie products, upload images to the “Extra Images” section in the Basic Info tab.

You can also add gallery images to a product’s variants as well to have them displayed on the product page.

Note: The image gallery component cannot function properly unless you upload at least 1 image to the “Extra Images” field in your parent product Basic Info tab.

Step 2 - Insert the Image + Gallery Component

Before completing this step, be sure you’ve already set up your product page using this guide.

In Webflow, click on the App tab in the left menu and select “CartGenie.” Then go to Create Product Pages > Components > Product section.

Click on the “Image + Gallery”. This will open up 2 options.

Select your preference of either:

• Open Lightbox

  • If the main image or a thumbnail is clicked on your site, Webflow’s native lightbox will open in an overlay to display your images in a beautiful dark gallery.

• Swap Images

  • If a thumbnail is clicked, it will immediately take the place of the main large image.

  • Note: When using this method, we recommend adding your primary image to the “extra images” slot as well in CartGenie so it can be selected again.

Then go into your Products template page.

Delete the existing “cg-product-image-wrapper” and paste in your new block. It should look something like this:

Step 3 (Lightbox Version) - Connect The Blocks to Your CMS Fields

For the swap image version instructions, click here (skip this section if you’re using the swap image version)

Now, select each element below and connect it to the corresponding fields:

“cg-main-image" Layer

In the layer settings panel on the right sidebar, connect:

• Lightbox Media → Main Image

• Image → Main Image

• Alt Text (optional) → Name

(Do not change the Group Name or else this will disconnect the lightbox)

Note: Changing these class names might cause issues. So we highly recommend keeping the default class names and simply modifying the styling as needed

“cg-product-thumb-collection” Layer

In the layer settings panel on the right sidebar, connect:

• Source → More Images

“cg-product-thumb” Layer

In the layer settings panel on the right sidebar, connect:

• Lightbox Media → More Images

• Image → More Images

(Do not change the Group Name or else this will disconnect the lightbox)

That’s it!

Step 3 (Swap Image Version) - Connect The Blocks to Your CMS Fields

For the lightbox version instructions, click here (skip this section if you’re using the lightbox)

Now, select each element below and connect it to the corresponding fields:

“cg-main-image" Layer

In the layer settings panel on the right sidebar, connect:

• Image → Main Image

• Alt Text (optional) → Name

“cg-product-thumb-collection-wrap” Layer

In the layer settings panel on the right sidebar, connect:

• Source → More Images

“cg-product-thumb” Layer

In the layer settings panel on the right sidebar, connect:

• Image → More Images

That’s it!

Step 4 - Save and Publish!

Save and publish your Webflow site.

Your product page should now pull in the thumbnail image gallery beneath your primary product image.

If you click on the main image or one of the thumbnails, a lightbox will popup and display all of your product images together in a professional display.

(Or the images will just swap if that is the method you chose.)

If you select a different variant on the product page which has its own main image and extra images gallery, it will switch out all of the images on the page.