Custom Gallery

Custom Galleries are fully customizable on-site galleries designed to showcase 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 into custom photo albums. 

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.
   
7. Click Create Gallery.
   Your new Custom Gallery is now associated with a Photo Album and is ready for customization.
   

8. Don't forget to save your changes so you don't lose your work!
9. When you're ready to add the gallery to your site, click Generate Code. 
10. Click Copy Code and paste the gallery code within the desired <div </div> in the desired location on your site.
    

What happens next?

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 to your Yotpo Visual UGC admin.
2. Click Galleries.
3. Click Photo Galleries.
4. Click on the Custom Gallery you'd like to modify.
   

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.

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

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

Gallery layouts

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

Collage Layout

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.

• 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

Sort gallery images

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.
   

3. Click Save to finish.

Gallery title

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

For Example:

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

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!

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

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.

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

• 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

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
      

Tip!

Customize the Lightbox Shopping button text using the customization tools below:

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 in your On-Site photos queue where they can be curated into photo albums.

On-site photo uploads - look & feel

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

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.

Generating your gallery code

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

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.

Implementing collage layout in on-site elements