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:

dedicated-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: support-create-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. store-2.0-customize
  4. Click on Home page → Pages → Default page
  5. Scroll down until you see the Add Section and click on it
    6. store-2.0-add-section
  6. Under THEME SECTIONS, scroll down until you get to APPS
  7. Click on UGC Page Gallery
    8. store-2.0-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. store-2.0-gallery-id
  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
    • install-gallery-blog-post
  • 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.