1. Guides
  2. How To

How To Guide

How do I create a customer photos page?

A Customer Photos page is a great way to build your brand with social proof. For example, a customer photo's page may look like this:

example of customer photos

Socialphotos works on both the new Online Store 2.0 themes and Vintage themes. Select your theme version and follow the instructions.

Vintage Theme

  1. Create a page in Shopify for Customer Photos. You can follow Shopify's instructions here.
  2. Add in one single line of code for the gallery that you want.
    When you are creating the page, there is a "<>" button to show the HTML code. You want to copy and paste the gallery code on the bottom of the page. It looks like this: creating a page
  3. In Socialphotos, go to Galleries → Page and click on a gallery.
  4. Take note of the ID next to gallery's title. It looks like ID: 12345. This is your GALLERY_ID.
  5. Copy the following code <div class="socialphotos-com-gallery slpht-clearfix" data-id="GALLERY_ID"></div> but replace the GALLERY_ID with your GALLERY_ID that you got from the last step.
  6. Replace the highlighted area with the code above.

Online Store 2.0 Theme

  1. Create a page in Shopify for Customer Photos. You can follow Shopify's instructions here.
  2. Go to your Shopify Admin Themes. The URL should be something like https://store.myshopify.com/admin/themes.
  3. Click on Customize to start the Theme Editor
  4. Click on Home page → Pages → Default page
  5. Scroll down until you see the Add Section and click on it
  6. Under THEME SECTIONS, scroll down until you get to APPS
  7. Click on UGC Page Gallery
  8. In Socialphotos, go to Galleries → Page and click on a gallery.
  9. Take note of the ID next to gallery's title. It looks like ID: 12345. This is your GALLERY_ID.
  10. Enter GALLERY_ID into the Gallery ID field
  11. Click Save

Voila! You now have a page dedicated to Customer Photos. View live demo here.

Pro tip: You can follow the same steps to create a page dedicated for sweepstakes, contests, and blogs.

How do I install a gallery to a single blog post?

You can embed a page gallery on a single blog post. Here are the steps:

  • Start on your Shopify Add Blog Posts page
  • After you write your post, click on the <> icon
  • In Socialphotos, go to Galleries → Page and click on a gallery.
  • Take note of the ID next to gallery's title. It looks like ID: 12345. This is your GALLERY_ID.
  • Copy the following code <div class="socialphotos-com-gallery slpht-clearfix" data-id="GALLERY_ID"></div> but replace the GALLERY_ID with your GALLERY_ID that you got from the last step.
  • Enter the code for your gallery
  • Click Save

View live demo here. Note that the page gallery follows the width of the blog post as intended.

How do install a gallery to Pagefly?

Every Pagefly implementation is unique. Please use this as a broad guide and contact us for further help. Here are the steps:

  • Start on your Pagefly's editor
  • Click on Add Section and select HTML/Liquid
  • Click Open Code Editor
  • In Socialphotos, go to Galleries → Page and click on a gallery.
  • Take note of the ID next to gallery's title. It looks like ID: 12345. This is your GALLERY_ID.
  • Copy the following code <div class="socialphotos-com-gallery slpht-clearfix" data-id="GALLERY_ID"></div> but replace the GALLERY_ID with your GALLERY_ID that you got from the last step.
  • Enter the HTML code for your gallery
  • Click Save & Close
  • Save your changes and publish

We created a pagefly page and implemented it as an example here.

Product Gallery on Pagefly?

The instructions to install product gallery on Pagefly's product pages are similar except you need to use the product gallery code.

Copy the following code <div class="socialphotos-com-gallery slpht-clearfix" data-uid="MYSHOPIFY_DOMAIN"></div> , but replace MYSHOPIFY_DOMAIN with your store.myshopify.com.

How to install Socialphotos on the Impulse theme?

  • Go to your Shopify Admin Themes. The URL should be something like https://store.myshopify.com/admin/themes.
  • Click on Customize to start the Theme Editor.
  • Scroll down until you see the Add Section and click on it.
  • Click on Custom content.
  • In Socialphotos, go to Galleries → Page and click on a gallery.
  • Take note of the ID next to gallery's title. It looks like ID: 12345. This is your GALLERY_ID.
  • Copy the following code <div class="socialphotos-com-gallery slpht-clearfix" data-id="GALLERY_ID"></div> but replace the GALLERY_ID with your GALLERY_ID that you got from the last step.
  • Paste the code inside:
    impulse-theme
  • Set width to 100%.
  • Click Save

Curate Social Proof and Build Your Brand

14 days free trial. Cancel at any time.

Get Started