Getting Started on Socialphotos

Introduction

This guide walks you through how to collect user-generated content (UGC) and display it on your Shopify store using Socialphotos.

Most stores start by connecting Instagram to bring in UGC, then embed galleries on their product pages and site pages. Socialphotos also supports other UGC sources like customer uploads and bulk uploads, which we’ll briefly cover below.

The high-level steps are:

  1. Install Socialphotos
  2. Connect Instagram to bring in UGC
  3. Embed the UGC Product Gallery on your product pages
  4. Tag products in UGC so it appears on product pages
  5. Embed UGC Page Galleries elsewhere on your store (optional)

Install Socialphotos from the Shopify App Store

Install Socialphotos from the Shopify App Store. Socialphotos is built specifically for Shopify so all features integrate seamlessly with your store.

After installing, you’ll be prompted to select a plan. You get 7 days of free trial, so you can explore the app before committing. You can switch or cancel your plan anytime from Settings → Billing inside the Socialphotos app.

Billing is processed through Shopify and appears on your Shopify invoice. Plan changes and cancellation are initiated inside the Socialphotos app. Uninstalling the app also stops future charges.

Once installed, Socialphotos syncs your Shopify products to enable product tagging and syncs orders so you can track how UGC galleries impact sales.

Connect your Instagram

In this guide, we’ll first help you connect Instagram so you have UGC available to work with. Most stores use Instagram as their primary source of UGC.

Socialphotos can connect to Instagram when these requirements are met:

  1. Your Instagram account is set to a Business or Creator account
  2. Your Instagram account is connected to a Facebook Page

When connected, Socialphotos can retrieve Instagram content that Instagram allows third-party apps to access, such as posts, reels, and tagged content. Instagram does not allow retroactive access to past mentions or hashtags, and some content may be unavailable due to copyright or privacy restrictions imposed by Instagram.

You can read the full requirements and limitations in our Instagram Guide.

If you skip this step, you can connect Instagram later from Settings → Instagram.

Other ways to collect UGC

In addition to Instagram, Socialphotos supports other ways to collect UGC:

  • Customer uploads: You can enable a customer upload button in your galleries. Visitors to your store can upload their own photos or videos, which you can then add to your galleries.
  • Bulk uploads: Inside the Socialphotos app, you can bulk upload your own content. This is useful if you already have UGC from past customers or content you want to showcase.

All of these sources feed into Socialphotos as UGC that you can assign to galleries or tag to products.

The UGC Product Gallery is embedded on your product pages and is the core way Socialphotos adds social proof. Once embedded, any UGC tagged to a product will appear in that product’s gallery.

  1. Start on your Page Builder's theme editor.
  2. Click on Add Section and select HTML/Liquid.
    3. install-pagefly-add-section
  3. Click Open Code Editor
    4. install-pagefly-body
  4. Copy the following code:
    <div class="socialphotos-com-gallery slpht-clearfix" data-uid="shopify-domain.myshopify.com"></div>
  5. Enter the code for your gallery
    6. install-pagefly-code-editor
  6. Click Save & Close
  7. Save your changes and publish
  8. Check it on your website.

Show UGC on a product page (UGC Product Gallery)

To show UGC on a product page, you need to tag it to a product.

Before you start

  • Make sure the UGC Product Gallery is added to your product page in the Shopify theme editor.
  • If the gallery is not embedded, tagged UGC will not appear on the product page.

Steps

  1. In the Socialphotos app, find the UGC (photo or video) you want to use.
  2. Click Tag Product.
  3. Search for and select the product.
  4. Save.
  5. Refresh the product page to see the gallery update.

What happens next

Once UGC is tagged to a product, it will automatically appear in that product’s gallery on the product page.

Embed UGC Page Gallery on your store

UGC Page Galleries can be embedded anywhere on your Shopify store, such as your homepage, landing pages, or blog posts. You choose which UGC appears in each gallery.

  1. Go to your Shopify Admin Themes page
  2. Click on Customize to start the Theme Editor
    3. store-2.0-customize
  3. Scroll down until you see the Add Section and click on it
    4. store-2.0-add-section
  4. Click on the Apps tab.
  5. Click on UGC Page Gallery
    6. setup-guides-add-page-gallery_2x
  6. The UGC Page Gallery is installed, but we need to specify the gallery ID.
  7. Click on UGC Page Gallery that you have just installed.
    8. setup-guides-page-gallery-id_2x
  8. Enter Gallery ID into the Gallery ID field
    9. setup-guides-page-gallery-id-2_2x
  9. Click Save
  10. Check it on your website.
  1. Go to your Shopify Admin Themes Page.
  2. Click on Actions and Edit Code
    shopify_install_edit_code
  3. In the Templates section, click on index.liquid
    shopify_install_index
  4. Copy the following code:
    <div class="socialphotos-com-gallery slpht-clearfix" data-id="Gallery ID"></div>
  5. Paste the code at the bottom of the index.liquid page.
    install-widget-save
  6. Click Save
  7. Check it on your website.
  1. Start on your Page Builder's theme editor.
  2. Click on Add Section and select HTML/Liquid.
    3. install-pagefly-add-section
  3. Click Open Code Editor
    4. install-pagefly-body
  4. Copy the following code:
    <div class="socialphotos-com-gallery slpht-clearfix" data-id="Gallery ID"></div>
  5. Enter the code for your gallery
    6. install-pagefly-code-editor
  6. Click Save & Close
  7. Save your changes and publish
  8. Check it on your website.

If you don't see your Page Gallery, contact us for help.

Show UGC in a Page Gallery

Page galleries let you display selected UGC on specific pages of your Shopify store, such as your homepage, landing pages, or blog posts.

Before you start

  • Make sure the UGC Page Gallery is embedded on the Shopify page where you want the UGC to appear.
  • If the gallery is not embedded on the page, added UGC will not be visible.

Steps

  1. In the Socialphotos app, find the UGC (photo or video) you want to use.
  2. Click Add To Gallery.
  3. Select the page gallery where you want the UGC to appear.
  4. Save.
  5. Refresh the Shopify page to see the gallery update.

What happens next

Once UGC is added to a page gallery, it will appear in that gallery on the Shopify page where the gallery is embedded.

If you prefer to see this in action, the short video below walks through the same steps.

On This Page