Product Gallery
- DarkLight
Product Gallery
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
The Product Gallery is a customizable photo gallery that showcases curated photos of shoppers enjoying your products right on your product pages! When shoppers see others using a product, they can connect on a personal level and see themselves using the product- effectively alleviating buyer hesitation and increasing conversion rates!
In this article, you'll learn how to create and publish a product gallery.
Before you start
To get started, we recommend curating customer photos from Photos Curation into custom photo albums.
Tip:
We recommend creating product albums and naming them according to their intended location on your site. For example, if you intend on displaying photos on a given product page, the product album should be titled accordingly (e.g. V-neck T-Shirt, Aviator Sunglasses, Leather Strap Diving Watch, etc.)
Creating a Product Gallery
Creating a new Product Gallery is as easy as tagging products in your photo!
To create a new Product Gallery:
- Log into Yotpo Visual UGC.
- Click Galleries.
- Click Photo Galleries.
- Click Create New Gallery.
- Name your gallery and select Product Gallery from the dropdown menu. To keep things organized, we recommend naming your gallery according to its intended location on your site.
- Customize your gallery settings and design to match your site's look and feel.
- Don't forget to click Save Changes so you don't lose your work!
- When you're ready to add the gallery to your site, click Place Gallery.
- Click Copy Code and paste the gallery code within the desired <div </div> on your store's product page template.
So, what happens next?
Once the gallery code is implemented on your product page, user-generated photos tagged with a product will automatically populate to the Product Gallery on the relevant product page according to the data-product-id="{{ product.id }} attribute. 
Important:
In order for the Product Gallery to appear on product pages, there must be at least 3 photos published and tagged to the Product Gallery for the corresponding product.
Gallery image sorting
By default, photos 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.
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
Tailor galleries to seamlessly match the look and feel of your brand using the built-in gallery design settings.
Gallery layouts
Choose the gallery layout that's right for you according to the intended gallery location on your site.
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: 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.
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.
- 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.
Collage Layout
Transform your galleries with Yotpo's new and engaging Collage layout!
- 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
Gallery title
Add a title to your Product Gallery to provide context for your user-generated product photos.
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:
- Enable the Title toggle button so that it appears green
- 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.
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 Product 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). 
Photo Hover Customization
- You can customise the background color (HEX) and opacity of the hover overlay using the relevant Background and Opacity settings.
- Click on Display Iconsto 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.
- For example, photos sourced from Instagram will display an Instagram icon while photos sourced from reviews will display a five-star review icon.
Lightbox
When clicked, gallery photos are expanded in stylish lightbox. Customize the button text and color to match your brand’s look and feel.
Lightbox Button Customization
You may customize the text and color of the call-to-action button within the lightbox to match your site's voice and color scheme.
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 the Visual Curation section under Uploaded 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 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. 
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-hand side of the screen provides a visual preview of how your Product Gallery will appear on-site according to your settings and customizations. 
Tip:
- Click Full Screen to view a full-screen preview of your gallery widget.
- To preview your gallery as viewed on a desktop/laptop or mobile client, click the relevant icon:
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.
Please note:
In order for the Product Gallery to appear on product pages, there must be at least 3 photos published to the Product Gallery for the corresponding product.
Adding the Product Gallery code to your site
To add the Product Gallery code to your site, simply paste the code snippet within the desired <div> on your product page. The Product Gallery code snippet includes the product ID parameter in order to dynamically retrieve the relevant product image(s) for each respective product page so there's no need to manually add the product ID to the code snippet.
Once you've pasted the Product Gallery code on your product page, it will automatically associate the relevant product with the widget based on the {{ product.id }} value of the data-product-id="{{ product.id }}" parameter.
Implementing collage layout in on-site elements
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:
- If the element size is 415-1280 px, the gallery will show one large image and four small ones:
- If the element size is 1280 px and above, the gallery will show one large image and six small ones:
Was this article helpful?
