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.

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” block to copy it to your clipboard.

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 - Connect The Blocks to Your CMS Fields

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)

“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 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.

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.