Page Builders

Overview

Socialphotos works with most Shopify page builders. The goal is the same: add a Socialphotos gallery element to your page so Shopify can render it inside your storefront.

In most cases, you can embed galleries with a no-code Socialphotos element inside the page builder. If your page builder does not support app elements for your theme, you can use a simple HTML embed as a fallback.

Note: Socialphotos galleries only render inside a Shopify storefront where the app is installed. We do not provide a standalone script for non-Shopify sites.

PageFly

PageFly supports embedding Socialphotos galleries directly in your PageFly layouts.

UGC Page 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-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.

UGC Product 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.

GemPages

This video shows how to embed Socialphotos galleries in GemPages.

Other page builders (Shogun, etc.)

Many page builders work the same way:

  1. Open the page builder editor for the page you want to edit.
  2. Add an App / App block / App element if available.
  3. Select the Socialphotos gallery element and configure it (for example by choosing a gallery or entering the gallery ID).
  4. Publish the page and refresh your storefront.

If your builder does not support app elements, use the manual embed fallback:

  1. In Socialphotos, open a Page Gallery and copy the gallery ID.
  2. In your page builder, add a Custom HTML element.
  3. Paste the code below, replacing GALLERY_ID with your gallery ID:
<div class="socialphotos-com-gallery slpht-clearfix" data-id="GALLERY_ID"></div>

If the gallery still does not appear, your theme may be blocking app scripts or the page builder may be rendering outside the storefront context. In that case, try embedding using Shopify’s theme editor instead. See Shopify Themes.

On This Page