Getting Started with Shopify

Socialphotos works on both the new Online Store 2.0 themes and Vintage themes. If you need any help, please reach out and we can help with your installation and customizations.

Introduction

This page will guide you in integrating Socialphotos with your store. When you first install Socialphotos from Shopify App Store, a set up guide will help you integrate. The steps are outlined as follows:

Install Socialphotos from the Shopify App Store.
Connect your instagram
Install the Page Gallery on your homepage
Install the Product Gallery
Add photos to your Page Gallery
Tag photos with products

Install Socialphotos from the Shopify App Store

Socialphotos is exclusively on the Shopify App Store.
Our deep integration with Shopify ensures that all of our features work seamlessly.
Here are some examples:

Tag a photo with a product and that photo will appear on that product's page.
Emailing your customers to share their experience when their orders are delivered.
Shopify billing for your protection and convenience. There is one less payment vendor you have to worry about.
Analytics on impressions, engagements, sales, and conversions.
Sync automatically with Shopify and many more...

Connect Instagram

Connecting your instagram will allow us to fetch your posts, tagged photos, mentioned photos, and any hashtags you are tracking.

Go to your Instagram Settings Page
or from the left menu, navigate to Account → Settings → Instagram, and click on Connect Instagram.
Socialphotos will fetch all your existing posts and tagged photos.
Mentioned photos will start appearing as your customers mentions you in captions and comments.
You can also start tracking hashtags.

Install Page Gallery Basic Plan

The instructions given here gives you a general idea on how to install a page gallery to your site.
To get specific step by step instructions for that specific gallery,

Go to your galleries page.
Click on the gallery you want to install.
Click on the Install button on the top right.
The step-by-step instructions to install that specific gallery will be listed to you.

Socialphotos works on both the new Online Store 2.0 themes and Vintage themes. If you need any help, please reach out and we can help with your installation and customizations.

Online Store 2.0 Themes

Go to your Shopify Admin Themes
Click on Customize to start the Theme Editor

Scroll down until you see the Add Section and click on it

Under THEME SECTIONS, Scroll down until you get to APPS
Click on UGC Page Gallery

Enter 1234 into the Gallery ID field

You should see the page gallery appear on your page inside the Theme Editor
Click Save and you're done!

Vintage Themes

Go to your Shopify Admin Themes.
Click on Actions and Edit Code
In the Templates section, click on index.liquid
Copy the following code:
<div class="socialphotos-com-gallery slpht-clearfix" data-id="1234"></div>
Paste the code at the bottom of the index.liquid page.
Click Save

The page gallery will appear at the bottom page of your website.

If you install the page gallery correctly, you should see something like this:

Install Product Gallery Advance Plan

The instructions given here gives you a general idea on how to install a product gallery to your site.
To get specific step by step instructions for your product gallery:

Go to your products page.
Click on the Install button on the top right.
The step-by-step instructions to install the product gallery will be listed to you.

Socialphotos works on both the new Online Store 2.0 themes and Vintage themes. If you need any help, please reach out and we can help with your installation and customizations.

Online Store 2.0 Themes

Go to your Shopify Admin Themes
Click on Customize to start the Theme Editor

Click on a product to see the Default product theme
Scroll down until you see the Add Section and click on it

Under THEME SECTIONS, Scroll down until you get to APPS
Click on UGC Product Gallery

You should see the product gallery appear on your page inside the Theme Editor
Click Save and you're done!

Vintage Themes

Go to your Shopify Admin Themes.
Click on Actions and Edit Code
In the Templates section, click on product.liquid
Copy the following code:
<div class="socialphotos-com-gallery slpht-clearfix" data-uid="store-name.myshopify.com"></div>
Paste the code at the bottom of the product.liquid page.
Click Save

The product gallery will appear at the bottom of your product's pages.

Product Gallery Example

Add Photos to Page Gallery

If you followed the guide so far, your Instagram is connected.
Let's add some photos from your Instagram to your page gallery.

Under Collect & Curate, click on Instagram, and then click on Posts.
Click on a photo that you want to add to the page gallery.
On the page, ensure that Add To Gallery is highlighted.
Click on the + sign to add the photo to that gallery.
Visit your homepage and you should see your gallery populated with that photo.
Repeat the above steps to add more photos to your gallery.

Tag Photos with Products Advance Plan

Now, we will tag some photos with a product so your gallery becomes Shoppable.
In addition, the photo will appear in that product's page.

Assuming you just completed the Add Photos to Page Gallery section,
you should see Tag Product next to Add To Gallery.
Click on Tag Product.
Use the search bar and look for a product related to the photo.
Click on the tag with the plus sign.
Visit your homepage, click on the photo and you should see the product's image instead of the caption.
Click on the product's image and it will take you to that product's page.
You should see your product gallery populated with the image.
Repeat the above steps to tag more photos with products.

Example: Product Gallery Advance Plan

When you tag a product with a photo, that photo will appear on that product's page.