Customize Gallery Guide

Introduction

You can customize your Socialphotos galleries without knowing any HTML/CSS/Javascript code. You can customize your Instagram Feed Gallery, UGC Page Gallery, and UGC Product Gallery.

Customize Instagram Feed Gallery

To customize your Instagram Feed Gallery, go to Galleries → Instagram Feed.

Customize UGC Page Gallery

Each UGC Page Gallery has its own "template" that you can customize. For example, if you have two Page Gallery, one for your Homepage and another for your "Customer Gallery" page, you can style each Page Gallery differently.

To customize your Page Gallery:

  1. Go to Galleries → Page
  2. Click on the gallery that you want to customize
  3. Click on the Customize button

customize-page-gallery-button

Customize UGC Product Gallery

Product gallery only have one template. When you customize your Product Gallery, the style gets applied to all your products' pages.

To customize your product gallery:
  1. Go to your Galleries → Products
  2. Click on the Customize button
customize-product-gallery-button

Remove Customer Upload Button

If you only want to use Instagram and do not want users to upload their content directly, you can remove the Customer Upload Button.

gallery-customize-upload_2x

To remove the Customer Upload Button from your Instagram Feed, follow these steps:

  1. Go to Galleries → Instagram Feed
  2. Scroll to the CUSTOMIZE CUSTOMER UPLOAD section
  3. Switch Show Customer Upload Button to OFF
  4. Scroll down and click Save

To remove the Customer Upload Button from UGC Page Gallery, follow these steps:

  1. Go to Galleries → Page
  2. Click on the gallery that you want to customize
  3. Click on the Customize button
  4. Scroll to the CUSTOMIZE CUSTOMER UPLOAD section
  5. Switch Show Customer Upload Button to OFF
  6. Scroll down and click Save

To remove the Customer Upload Button from UGC Product Gallery, follow these steps:

  1. Go to Galleries → Products
  2. Click on the Customize button
  3. Scroll to the CUSTOMIZE CUSTOMER UPLOAD section
  4. Switch Show Customer Upload Button to OFF
  5. Scroll down and click Save

Bigger Images

You can increase the size of the thumbnail images by setting how many images you want per row. For example, if you want to have only 3 images per row, the images will look bigger than if you have 5 images per row. See image examples below:

hashtag-gallery_2x

5 images per row

hashtag-gallery_2x

3 images per row

To set the number of images per row you want for desktop, tablet, and mobile screens:

  1. Get to the Customize Gallery page. See Introduction for instructions
  2. Scroll down to "CUSTOMIZE THUMBNAIL GALLERY RESPONSIVE LAYOUT"
  3. Set the Number photos per row for desktop, tablet, and mobile
  4. Scroll down and click Save
  5. Voila! That's how you can set the image sizes for your galleries

Common options

customize-gallery-layout

Socialphotos provide many customization options so you can style it to match your brand without touching any code. Here are some of the common ones:

  • Change the header message
  • Show or hide the Submit Photo
  • Change the submit message and whether its a button (default) or an underlined link
  • Change the "SHOP THIS LOOK" message
  • Set the gap between the image thumbnails
  • Set the gallery direction to be vertical (new images added to the bottom) or horizontal (carousel)
  • Set the number of thumbnail photos for desktop, tablet, and mobile

Customizing Pop-up Modal

customize-modal_2x

The pop-up modal appears when customers click on a photo thumbnail. Here are some of the common customizations:

  • Show or hide the social icons: Facebook, Twitter, and Pinterest
  • Show or hide the caption
  • Show or hide the Shoppable products

Customizing Customer Upload

customize-site-upload_2x

The photo upload modal appears when users click on "Submit Your Photo". Here are some of the common customizations:

  • Show or hide the different fields (username, email, caption)
  • Set the fields as required so users have to enter something
  • Change the field and its placeholder wording so you can use a different language, provide more instructions, etc...
  • Change the upload instructions
  • Change the terms and conditions statement

Product Gallery Placeholder Content

For Product Gallery, sometimes you have not tagged any products so no user-generated content appears. We provide several options for you as a placeholder until you have tagged enough content.

  • Using Instagram Feed
  • Using Custom Photos

Using Instagram Feed

You can use your Instagram Feed content if you do not have enough content yet. For example, this product uses Instagram Feed while this product uses user content that you tagged.

The number of photos required is determined by the "Number photos per row" you set for your gallery. For example, if you set the "Number photos per row (Desktop)" to 6, your Instagram Feed will be used until you have at least 6 photos for that product.

To use Instagram Feed for your Product Gallery:
  1. Go to your Galleries → Products
  2. Click on the Customize button
  3. Scroll down to "PLACEHOLDER PHOTOS"
  4. Toggle ON the "Use Placeholder Photos"
  5. Toggle ON the "Use Instagram Feed"
  6. Click "Save"
placeholder-instagram-feed_2x

Using Custom Photos

You can upload custom placeholder images and use them until there are enough user content.

The number of photos required is determined by the "Number photos per row" you set for your gallery. For example, if you set the "Number photos per row (Desktop)" to 6, the placeholder photos will be used until you have at least 6 photos for that product.

To use Custom Photos for your Product Gallery:
  1. Go to your Galleries → Products
  2. Click on the Customize button
  3. Scroll down to "PLACEHOLDER PHOTOS"
  4. Click "Add Photo"
  5. Set the image, username, and caption
  6. Repeat the above steps until you have enough placeholder photos
  7. Once you are ready, turn ON the "Use Placeholder Photos"
  8. Ensure that "Use Instagram Feed" is OFF
  9. Click "Save"
placeholder-custom-photos_2x

Standalone Upload Button

You can create a standalone upload button or link that you can embed anywhere on your website. With a button like this, you can style it once and use it throughout your site.

The ingenious idea is that this button is a regular Page Gallery, customized without any header nor thumbnails. This shows you how flexible our galleries are. You are already familiar with our Page Gallery. Now, you just have to customize it to be a button.

Example: Desktop

upload-button-desktop

Example: Mobile

upload-button-mobile

Here are the steps to create a standalone upload button:

  • Create a new Page Galleries
  • Name it Upload Button ONLY
  • Customize it and clear out the "Header", "Header (no photos)", "Submit Photo Text"

Remember to NOT add any images to the Upload Button Page Gallery as we are only using it for its upload functionality.

The default gallery has the upload button above the thumbnails gallery. If you want the upload button underneath it, you have to combine two separate galleries.

customize-mix-and-match_2x

In the above image, two galleries are embedded one right above the other. The first gallery is a Page Gallery where you customize it to not have any header nor the upload button. The second gallery is a Page Gallery where you customize it as a Standalone Upload Button

1. Create a Thumbnails only Page Gallery
  • Create a new Page Galleries
  • Name it Thumbnails Only
  • Customize it and clear out the "Header", "Header (no photos)", "Submit Photo Text"
  • (Optional) Add some images to this gallery so you can see the final form
2. Create a Standalone Upload Button
3. Put it all together on your website
  • Go to your Shopify's theme and customize it
  • On the page, add a new section and select Custom Liquid
  • Add your own HTML and add the HTML for the Thumbnail Page Gallery and the Upload Page Gallery code
  • This is how ours looked:
<div class="socialphotos-gallery">
      <div class="socialphotos-header"><p>Share with us your vintage photos with #getsocialphotos</p></div>

      <-- Add Thumbnails Only Page Gallery -->
      <div class="socialphotos-com-gallery slpht-clearfix" data-id="4352267"></div>

      <-- Add Upload Button Page Gallery -->
      <div class="socialphotos-com-gallery slpht-clearfix" data-id="4352266"></div>
</div>

Your Socialphotos Gallery now have the upload button underneath the gallery.

Pro tip: You can follow the same steps above for your Product Gallery and use the same Standalone Upload Button.

On This Page