---
title: "Custom Gallery"
slug: "custom-gallery"
updated: 2024-04-03T00:30:22Z
published: 2024-04-03T00:30:22Z
canonical: "support.yotpo.com/custom-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.

# Custom Gallery

Products

			
				
					
						  

					
					Visual UGC
		
			

				

###### Supported plans

				

Free, Pro, Premium, Enterprise

			
			

				

###### eCommerce Platform

				

N/A

			

Custom Galleries are fully customizable on-site galleries designed to showcase [user-generated photos](https://www.yotpo.com/features/user-generated-photos/) at key conversion points on your site. For best results, we recommend adding custom galleries to your homepage, checkout page templates, and a dedicated gallery page.

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

## Getting started

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

	
	Tip!
	We recommend creating custom albums and naming them according to their intended location on your site. For example, if you intend on displaying photos in a given album on your homepage, the photo album should be titled **Homepage Album**.

## Creating a custom gallery

To create a Custom Gallery:

1. Log in to your Yotpo **Visual UGC** admin.
2. Click **Galleries**.
3. Click **Photo Galleries**.
4. Click **Create Gallery**.
5. Name your gallery and select **Custom Gallery** from the dropdown menu. To keep things organized, we recommend naming your gallery according to its intended location on your site e.g. Homepage Gallery, Summer Collection, Women's Accessories, etc.
6. Assign your new **Custom Gallery** to an existing **Custom Album** from the dropdown list.
		  
![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/bce1590d-cf0a-4128-91f2-029023410882.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)
7. Click **Create Gallery**.
		  
Your new **Custom Gallery** is now associated with a **Photo Album** and is ready for customization.
		  
![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/b3d4e8bc-657c-478d-a057-5d1d7b2a4dfd.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

1. Don't forget to save your changes so you don't lose your work!
2. When you're ready to add the gallery to your site, click **Generate Code**.
3. Click **Copy Code** and paste the gallery code within the desired **<div </div>** in the desired location on your site.
		  
![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/6baab990-6ade-4877-bf64-f5238fe71ac3.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

#### What happens next?

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/3284d97e-88e3-4ec4-802a-28aea592ca79.gif?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

Once you've added the gallery code to your site, curated user-generated photos from the **Custom Albums** assigned to your gallery will appear in your **Custom Gallery** on-site.

## Photo album source

Photos showcased in the Custom Gallery are sourced from photo albums created via Photos Curation. When creating a new Custom Gallery, you must assign the gallery to an existing photo album which you can reassign at any time via the gallery settings.

#### Changing the gallery source

To change the photo album source of an existing gallery:

1. [Log in](https://visual.yotpo.com/) to your Yotpo Visual UGC admin.
2. Click **Galleries**.
3. Click **Photo Galleries**.
4. Click on the Custom Gallery you'd like to modify.
		  
![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/54aa6f95-fd5f-4269-84c6-b4e1997e99ff.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

	
	Tip!
	We recommend assigning no more than one album to each gallery and naming them consistently and in line with their intended location on your site. If necessary, you may duplicate a photo album and assign it to a new gallery.
		  
![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/0605e9fb-0e85-4618-af4f-8a8d3351bd44.jpeg?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

		

For example, if you want to display a collection of photos on your site's homepage:

		

1. Curate photos to a photo album and name it **Homepage Album**.
2. Create a Custom Gallery or Product Gallery and name it **Homepage Gallery**.
3. Paste the gallery code on your site's **homepage**.

	

## Gallery design and settings

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/d17242cc-c9b4-4f97-a823-f830385efc00.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

Tailor galleries to seamlessly match the look and feel of your brand using the built-in gallery design settings.

### Gallery layouts

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/f1963066-2dcc-431c-8709-e8f3a835567c.gif?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

****Grid Layout****

	
	![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/fedbf0c9-2931-49c1-8791-a3e04aaef9e1.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

		

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/99233570-e8d4-4c17-b3aa-f2e174f3e9bf.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)
- Choose one of two scroll styles for your Product Gallery widget by checking the **Show more photos as** box.
  - **Endless Scroll:** This 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/55d78b36-cf3c-460e-81e1-aff3631461d9.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%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/41e93a76-4117-4fea-9799-449dc3f78c2d.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%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**.
				  
![yopto giff](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/yopto%20giff.gif?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

	

****Collage Layout****

	
	![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/58448426-fd85-4b29-a8b8-79aedc20df03.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

		

Transform your galleries with Yotpo's new and engaging **Collage** layout! With the varied display of photo sizes within the gallery you can choose which images you want to prominently feature.

		

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/3a91dbce-3c13-4443-a53e-d2df8bdac618.gif?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

		

- Choose the number of **rows** and set the desired **spacing** between photos.
- Click **Select images** to choose which images to highlight in your gallery. A large image will be displayed for every **two rows.** As such, the number of rows you choose to display may affect the number of images you can show as big images. If you'd like to choose more big images, try enabling the **Show more photos as: Learn More Button** checkbox.

		
			
			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/custom-gallery#implementing-collage-layout-in-onsite-elements)
		
	

### Sort gallery images

	
	Available for
	Yotpo Visual UGC [Growth, Powerhouse, and Enterprise](https://www.yotpo.com/pricing/) plans

By default, photos in custom galleries are sorted and displayed according to the date that you added them to the album (newest first) and then alternated by source (e.g. Instagram, Reviews, On-Site Upload) in chronological order. If you prefer, you can choose to manually sort your images in the gallery.

To customize the order of your images:

1. Once you’ve selected your gallery layout, click **Sort gallery images**. A popup is displayed.
2. Drag and drop your images according to where you’d like them to display in your gallery. You can quickly move an image to first place or last place in your gallery by hovering over the image, clicking the 2 dots, and then selecting the relevant option.
		  
![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/f80fbee1-ec43-4797-94b8-759776bc02e2.gif?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

1. Click **Save** to finish.

	
	Tip!
	You can always reset the order of your images back to the default order by clicking **Reset to default**.

### Gallery title

Add a title to your UGC Gallery to provide context for your user-generated photos.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/6c141d60-709e-4d34-a6ec-bebad1f25aae.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

For Example:

- "Photos from our customers"
- "See our products in action"
- "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/21292ecb-fd76-467c-838a-da06584cec25.gif?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

	
	Tip:
	Include a hashtag in your gallery title to help 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 Custom Gallery!![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/5b528cc6-0be5-48a6-8de7-b790f8322025.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%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-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

****Photo Hover Customization****

	
	

		

- You can customize 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/a54a21ea-e590-4c8e-939b-ead1132f7dbe.jpeg?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%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/885a0d99-a336-4a4d-a455-d352fd0bdd3a.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/26a9a203-83f1-468e-a9df-dc28f83acd22.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

	

	
	Please note:
	You can display the source of each photo in your gallery by enabling the Display Icons setting in your [Photo Hover customization](/v1/docs/custom-gallery#photo-hover).

### Gallery lightbox

When clicked, gallery photos are expanded in a stylish lightbox. Customize the button text and color to match your brand’s look and feel.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/e2b80758-ca7b-4ce4-8bf5-d3aba2cffa75.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

You can customize your lightbox behavior and actions using the lightbox settings.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/6bc2be5e-72cb-4440-915c-52cbb32be0d2.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

- Check **Show minimum star rating** to display the product's average star rating and set a star rating threshold.
- Check **Show Caption/Review** to show the product's reviews or Instagram caption (if curated from Instagram.
- Check **Show Date** to display the date that you added the image/video to the album.

### Lightbox shopping

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/cdc14ad1-f5c0-4a53-8a9d-9dc076973cd6.gif?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

	
	Tip!
	**Shopify-based merchants** can let shoppers add the products they love, including selecting product variants, directly to their shopping cart from within the visual UGC gallery. These shoppable galleries are not only beautiful to browse — **they’re engineered to convert!**

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/321328ea-cf4a-4a55-968d-af4f8eeb98f6.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

**To activate Lightbox Shopping:**

1. Expand the **Lightbox** section within your **Custom Gallery** settings
2. Select **Add to Cart** or **Shop Now**
  1. Scroll down and expand each section to learn more about each option
				  
![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/4a16401e-3205-433f-b912-cc2d39b75ee9.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

****Add to Cart****

	
	

		

Setting your Lightbox Shopping button as **Add to Cart** will display a button while hovering over gallery images and within the gallery lightbox itself.

		

When clicked, the button will add the product tagged in the photo or video to your shoppers' cart and allow them to proceed to checkout or keep shopping. If there are multiple product variants, shoppers will be able to select the desired size/color/etc. prior to adding the product to their cart.

		

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/d2a5bcd5-5798-4fda-b6e7-7e7c94e9bd0b.gif?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

	

****Shop Now****

	
	

		

Setting the Lightbox Shopping button as **Shop Now** will take shoppers straight to the product page of the product tagged within the photo.;

	

	
	Tip!
	Customize the Lightbox Shopping button text using the customization tools below:
		  
![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/c310fe9f-6288-4086-936e-960cc10ed99f.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

## On-site photo uploads

Add a photo-upload button to your gallery to allow shoppers to upload photos straight through your site! User-generated photos uploaded through your Custom Gallery will appear in [Visual Curation](/v1/docs/curating-your-media-in-visual-ugc) in your **On-Site** photos queue where they can be curated into photo albums.

	
	Requirements for uploaded media:
	

		

- Max. file size for images: 15 MB
- Supported image file types: PNG, GIF, JPG, JPEG
- Min. dimensions for images: 400 x 400
- Max file size for videos: 2000 MB (2 GB)

	

#### On-site photo uploads - look & feel

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

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/e981e4f4-e0a8-459a-afab-41e92410cbeb.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

#### On-site photo uploads - widget interaction

Shoppers who upload photos through the Custom 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/acfba9fd-b5e2-40ed-8e88-516da09fffb5.gif?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)

	
	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

	

## Generating your gallery code

Click **Generate Code** to generate your gallery code. This code contains your gallery settings and the customizations you’ve configured.

	
	Please note:
	In order for the UGC Gallery to appear on your site, there must be **at least 3 photos** published in the UGC Gallery.

### Adding the gallery code to your site

To add the Custom Gallery code to your site, simply paste the code snippet within the desired **<div>** on your site.

	
	Tip!
	For best results, we recommend adding the gallery to your homepage, a dedicated page, and your checkout page template.

### Implementing collage layout in on-site elements

	
	Please note:
	

		

**The Mosaic Gallery layout** depends on the element size it is installed 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/4a71d086-04b3-4c9e-9bd8-8114f0c81ef9.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%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/c79ca2dc-3098-420f-b29e-bfb1ea328366.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%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/8b14d18e-aaeb-485c-ab44-23309cb227f9.png?sv=2026-02-06&spr=https&st=2026-10-28T12%3A41%3A56Z&se=2026-10-28T13%3A41%3A56Z&sr=c&sp=r&sig=onFLao4DJ7Qyozh%2BiQL2w28J6prGHIG%2BebYc8vEW2fY%3D)