Custom Gallery

      Custom Gallery


        Article Summary

        Products


        Visual UGC
        Supported plans

        Free, Growth, Premium, Enterprise

        eCommerce Platform

        N/A

        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

        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.

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

        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.

        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.
        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.
          yopto giff
        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

        Available for
        Yotpo Visual UGC Growth, Powerhouse, and Enterprise 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.
        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.

        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.

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

        Photo Hover Customization
        • You can customize the background color (HEX) and opacity of the hover overlay using the relevant Background and Opacity settings.
        • 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.
        Please note:
        You can display the source of each photo in your gallery by enabling the Display Icons setting in your Photo Hover customization.

        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

        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!

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

        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:

        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.

        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.

        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.

        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

        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:
        • 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?