Customize Gallery

Introduction

Socialphotos provides you with many tools and options to customize your galleries to fit your brand and message. Please check out our demo shop for some examples and inspiration.

There are two types of gallery that you can customize:

  1. Page Gallery
  2. Product Gallery

Each page gallery has its own "template". You can have many page galleries with each having their own unique customizations. You only have one product gallery "template". When you customize a product gallery, the customizations gets applied to all your products' pages.

Most customizations between a page gallery and the product gallery are the same. The main difference are page galleries have "Shoppable" customizations such as setting the "SHOP THIS LOOK" wording.

Our support team is here to help you install and customize! Please email us at support@socialphotosapp.com or use the chat functionality to get in touch.

Customizing Page Gallery

Each page gallery has its own "template". You can have many page galleries with each having their own unique customizations.

To customize your page gallery:
  1. Go to your galleries page
  2. Click on the gallery that you want to customize
  3. Click on the Customize button

Customizing Product Gallery

Product gallery only have one template. When you make a customization, it gets applied to all your products' pages gallery.

To customize your product gallery:
  1. Go to your products page
  2. Click on the Customize button

Customizing Gallery Layout

Here are some of the customizations you can set:

  • Set the typography (font, size, alignment, color)
  • Change the header message
  • Change the submit message and whether its a button (default) or an underlined link
  • Change the "SHOP THIS LOOK" message
  • Change the gap between the thumbnail images
  • Set the gallery direction to be vertical (new images added to the bottom) or horizontal (carousel)
  • Infinite scrolling (vertical direction only)
  • Width of the gallery. By default it follows your page's page width.
  • Set the number of thumbnail photos for desktop, tablet, and mobile

Customizing Photo Modal

The photo modal appears when users click on a photo thumbnail. The customizations you can set are:

  • Show/hide the submit button
  • Show/hide the caption
  • Show/hide the Shoppable products
  • Change the "In this Look" text

Customizing Photo Upload

photo of customizable photo uploads

The photo upload modal appears when users click on "Submit Your Photo". The customizations you can set are:

  • Show/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

Mix & Match Website Typography with Socialphotos' Gallery

You can use your website's existing style to create the gallery title and use Socialphotos gallery for the thumbnails and the upload functionality. You can see a demo of this on our demo shop.

In the above image, the title "Share with us your vintage photos with #getsocialphotos" is created directly on the website. The thumbnail gallery is Socialphotos' Page Gallery without any header nor upload button. The Upload button is another Socialphotos' Page Gallery without any header nor thumbnails. It only has the upload button. By having a Page Gallery that only has the upload functionality, you can style it once and use it everywhere throughout your website. Here are the general steps on how to set this up:

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 an Upload Button Page Gallery
  • Create a new Page Galleries
  • Name it Upload Button
  • 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.

3. Put it all together on your website

You probably have your own way of adding custom HTML on your website with its own styling. In this example, we are using the Shopify's way of using their Custom Liquid section.

  • 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="rich-text rich-text--full-width">
    <div class="rich-text__blocks">
        <div class="rich-text__text rte"><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>
</div>

Placeholder Photos (Product Gallery Only)

For product galleries, you can upload placeholder images and use them until there are a certain number of tagged photos. The number is determined by the "Number photos per row". For example, if you set the "Number photos per row (Desktop)" to 6, the placeholder photos will be displayed until you have tagged 6 photos.

Live Store Demo

Our ADIDAS BACKPACK and ASICS TIGER uses placeholder photos because they have insufficient photos tagged. However, ADIDAS STAN SMITH have enough and customer photos are used.

Instructions

To use placeholder photos for your product gallery:
  1. Go to your products page
  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. Click "Save"