---
title: "Product Gallery"
slug: "product-gallery"
tags: ["Visual UGC"]
updated: 2025-06-23T12:41:41Z
published: 2025-06-23T12:41:41Z
canonical: "support.yotpo.com/product-gallery"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.yotpo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Product Gallery

Products

  

Visual UGC

###### Supported plans

Free, Pro, Premium, Enterprise

###### eCommerce Platform

N/A

## Goals and Outcomes

The Product Gallery is a customizable photo gallery that showcases curated photos of real shoppers enjoying your products, right on your product pages! By featuring authentic customer content, you help shoppers connect with your brand on a personal level, see your products in action, and make more confident purchasing decisions.

In this article, you'll learn how to create and publish a product gallery.

## Getting Started

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/8fa4085a-3065-492b-9080-81107d274838.png?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

To get started, we recommend curating customer photos from the [Photos Curation](/v1/docs/curating-your-media-in-visual-ugc) section into custom [photo albums](/v1/docs/curating-your-media-in-visual-ugc).

> [!TIP]
> Tip
> 
> We recommend creating product albums and naming them according to their location on your site. For example, Aviator Sunglasses, Leather Strap Diving Watch, etc.

> [!WARNING]
> Important
> 
> - Media tagged to products in reviews are **not automatically added** to product galleries. While Yotpo identifies which product is associated with the photo, the image will not be added to the corresponding product album by default. This gives your brand full control to moderate and decide what visual content is published.
> - To include the image in a gallery, you must manually add it via the **Add to album** option in the Photos Curation section.
> - Additionally, product galleries are created or updated only when products are **explicitly selected in the album**, not just tagged in media.

## Creating a Product Gallery

Creating a new Product Gallery is as easy as tagging products in your curated photos!

To create a new gallery:

1. Log into Yotpo **Visual UGC.**
2. Click **Galleries >** **Photo Galleries.**
3. Click **Create New Gallery**.
4. Name your gallery and select **Product Gallery** from the dropdown menu.

> [!TIP]
> Tip
> 
> We recommend naming your gallery based on its intended location on your site.
5. Customize your gallery settings and design to match your site's look and feel. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/fef05ede-3ead-4a4b-aab7-c0fa4c4dddee.gif?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)
6. Click **Save Changes**.
7. When you're ready to add the gallery to your site, click **Place Gallery**.
8. Click **Copy Code** and paste the gallery code within the desired **<div </div>** on your store's **product page template.**

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/b0289c4c-13ae-4030-b65c-8bfedd8b5f20.png?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

### What Happens Next?

Once the gallery code is embedded on your product page, user-generated photos [tagged with a product](/v1/docs/curating-your-media-in-visual-ugc#tagging-products) will automatically populate the **Product Gallery** on the relevant product page according to the **data-product-id="{{ product.id }}** attribute.![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/22cc89dd-1a29-4eb6-97bc-51e4f56a2f32.gif?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

> [!WARNING]
> Important
> 
> A Product Gallery will only appear on a product page if there are at least 3 published photos tagged to the gallery for that product.

### Gallery Image Sorting

By default, images are sorted and displayed based on the date they were added to the album (newest first), alternating by source (e.g., Instagram, Reviews, On-Site Upload) in chronological order.

> [!TIP]
> Tip
> 
> If you prefer to display photos according to their last moderated date instead, please reach out to your Yotpo account representative for assistance.

## Gallery Design and Settings

Customize your product galleries to align with your brand’s style using our built-in design settings.

### Gallery Layouts

Choose a layout based on where the gallery will appear on your site.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/7cc00968-824b-4a21-ad89-35a2b87071df.gif?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

**Grid Layout**

Select **Grid** to create a full-page Product Gallery. As your photos will fill the entire page, we recommend creating a dedicated page on your site to host this gallery.

- Set the desired number of rows, photos per row, and border spacing. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/d3e4510d-7a06-4664-97d0-1d86db3d9f62.png?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)
- Choose one of two scroll styles for your Product Gallery widget by checking the **Show more photos as** box.
  - **Endless Scroll:** Will automatically display more photos once your shoppers scroll to the bottom of the page.
  - **Load More:** Shoppers who reach the bottom of the page will be prompted to click a **Load More** button in order to load additional photos. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/d76ef2da-5335-41f4-a8f8-be92e4ceb599.png?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

**Carousel Layout**

- The carousel layout is a great way to fit many photos in a small area on your site. Photos are displayed in a single strip of photos and can be cycled using the left/right arrows or set to **Auto Slide**.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/8ce9367e-b30c-4aad-bb19-54b1861ed0d6.png?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

- Use the **Items per row** slider to control the amount of photos and/or videos displayed in your carousel or simply check the **Responsive to width** option to display the maximum amount of items that will fit in the carousel based on the component (<div>) width on your site.

Check **Auto Slide** to enable the auto slide feature.

- Your gallery will automatically cycle through photos in an eye-catching layout and can still be manually cycled using the left and right arrows.
- The **Carousel** layout supports a **maximum of 56 photos**.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/6abccddc-02b5-449b-a7dc-4c698782ffa1.gif?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

**Collage Layout**

Transform your galleries with Yotpo's new and engaging **Collage** layout!

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/324b0941-0ccc-4f4f-8cef-1539fd0816f9.png?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

- Choose the number of **rows** and set the desired **spacing** between photos.

****Please Note:** The Collage Layout can change in accordance with the size of the element it is implemented in. For more details, [click here](/v1/docs/product-gallery#implementing-collage-layout-in-on-site-elements).

### Gallery Title

Add a title to your Product Gallery to provide context for your user-generated product photos. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/b9dbc9f3-c1f9-4cf9-8ef1-ab1f5a0f40a0.png?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

**For Example:**

- "See our products in action!"
- "Photos from our customers"
- "Add **#hashtag** to your photos to have them featured here!"

#### Title customization

**To display a gallery title:**

1. Enable the **Title** toggle button so that it appears green.
2. Include your gallery title in the text box below.

You can also customize the gallery title color (HEX), alignment, and font size for desktop and mobile views.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/be55e0cd-e828-415c-baba-f41a5bc2a614.gif?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

> [!TIP]
> Tip
> 
> Including a branded hashtag can help you generate more visual content.
> 
> For example, you can launch a contest or marketing campaign to collect photos from your customers and have the best photos featured in your Product Gallery!
> 
> ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/5f43b3e2-2b71-4b17-8f63-ec7e994bd71b.png?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

### Photo Hover

Give your gallery photos some added depth with hover-over images and effects. Photo hover overlays can also indicate the source of the photo in the gallery (e.g. Instagram or Reviews).

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/3e7b1e09-0ecd-477c-a8c1-9a38d8246e26.gif?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

**Photo Hover Customization**

- You can customise the background color (HEX) and opacity of the hover overlay using the relevant **Background** and **Opacity** settings.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/9ce7e4ff-8239-477e-a31e-b0607743ace6.gif?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

- Click on **Display Icons** to include the photo source icon.
  - For example, photos sourced from Instagram will display an Instagram icon while photos sourced from reviews will display a five-star review icon. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/07c2d065-ea0b-4338-91bc-2731227de0ab.png?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D) ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/203aceab-4b45-4f7c-8349-f4c8c65c4495.png?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

### Lightbox

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/9e68f9dc-201f-432a-8021-884fc3f831f5.png?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

Clicking a photo opens it in a full-screen lightbox for an immersive viewing experience. Customize the button text and color to match your brand’s look and feel.

**Lightbox Button Customization**

You can customize the text and color of the call-to-action button within the lightbox to match your site's voice and color scheme.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/b1f4f3a9-9871-4eb2-bc4a-554e3f8e9388.png?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

## On-Site Photo Uploads

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/7724e3ad-836b-4a51-a100-796875e9063b.png?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

Let shoppers upload photos directly to your gallery by **adding a photo-upload button**. Uploaded photos will appear in the **Uploaded** tab of the Visual Curation section, where you can review and curate them into photo albums. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/929760b1-1096-467c-8bbb-5df67cff8693.png?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

### Look & Feel Customization

You may customize the photo upload button text, font, size, and color.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/81fb7273-f2a2-4dc2-8a4e-fa2e010dde87.png?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

### Widget Interaction

Shoppers who upload photos through the Product Gallery on your site will be prompted with the popup below. Shoppers may add a caption to each photo and must provide their name and email address in order to complete the photo upload flow. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/0e894a35-8325-4c9c-819d-b4c8b907dfbe.gif?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

### Photo Requirements

Photo upload guidelines:

- Shoppers may upload up to 3 photos at a time.
- Shoppers must provide their name and email address.
- Photos must be in JPG, PNG, or GIF format.
- Each photo must be under 15 MB in size.
- Photos must be larger than 400x400 pixels.

### Preview Pane

The Preview Pane on the right side of the screen will show you how your gallery will appear on your site based on your settings.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/66cbe152-24d8-49a7-aa60-d2c59315589f.png?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

> [!TIP]
> Tip
> 
> - Click **Full Screen** for a full-screen preview of your gallery widget.
> - Use the **desktop/mobile icons** to toggle between views.
> 
> ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/05111c57-6b13-4dcb-ad29-90abb0ea8501.gif?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

## Generating a Product Gallery Code

Click **Generate Code** to generate your gallery code. This code contains your gallery settings and the customizations you’ve configured.![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/9e8abd4e-45cb-4384-865f-d01e4f7b805d.gif?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

> [!WARNING]
> Note
> 
> At least 3 photos must be published in the Product Gallery for each product in order for it to appear on product pages.

### Adding the Product Gallery Code to Your Site

To display the Product Gallery on your product pages, paste the gallery code snippet into the desired **<div>** within your product page template.

The snippet includes the **data-product-id="{{ product.id }}"** parameter, which automatically pulls in the correct product images for each page, no manual tagging or ID entry required.

Once implemented, the gallery dynamically associates the appropriate product with the widget using the **{{ product.id }} value** from your store’s data.

### Collage Layout Behavior by Element Size

**The Mosaic Gallery layout** automatically adjusts based on the size of the container it's placed in:

- If the **element size is 0-415 px**, the gallery will show one large image and two small ones:

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/c3460850-a7a1-4e05-a3fc-6d9c49a4d46e.png?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

- If the **element size is 415-1280 px**, the gallery will show one large image and four small ones:

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/7e0fc715-6687-4131-86dc-eaaa30c43a92.png?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)

- If the element size is **1280 px and above**, the gallery will show one large image and six small ones:

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/61435ffc-120f-471a-9c7c-d6903570c0a5.png?sv=2026-02-06&spr=https&st=2026-11-04T01%3A32%3A04Z&se=2026-11-04T02%3A32%3A04Z&sr=c&sp=r&sig=4HCMYnpRdsQkygN%2FFWcmHZU8ngB4JtsEFFNHV7FVD%2BE%3D)