Bigcommerce integration

The Bigcommerce integration lets you attach your gallery to Bigcommerce website. You only need to do this once and it takes less that 5 minutes.

Before you get started, You need to install Socialphotos app from Bigcommerce app store.

Include JavaScript SDK

Include the JavaScript SDK on your website, ideally into the <head> section.

  1. Go to your Bigcommerce admin dashboard and on the top right side click on "Design".
  2. Click "Edit HTML/CSS".
  3. Find your HTMLHead in sidebar.
  4. Paste the HTML code before </head> tag. <script src="http://cdn.slpht.com/widget/bigcommerce-embed.js"></script>
  5. Save your progress by pressing Save button on top left side.

Display a gallery on the frontpage

Galleries can be placed anywhere on your website. This tutorial explains how to put gallery on your website Default page.

  1. Please ensure that you already included JavaScript SDK as described on the top of this page.
  2. Open "Galleries" section and go inside that gallery.
  3. Choose gallery you want to display.
  4. Click "Get embed code" button and copy code.
  5. In BigCommerce admin panel click "Design".
  6. Click "Edit HTML/CSS".
  7. Find your Default page (default.html) in sidebar under "Other Template Files" section.
  8. Paste the HTML code anywhere you want.
  9. Save your progress by pressing Save button on top left side

Display a gallery on a separate page

Galleries can be placed anywhere on your website. This tutorial explains how to put gallery on separate BigCommerce page.

  1. Please ensure that you already included JavaScript SDK as described on the top of this page.
  2. Open "Galleries" section and go inside that gallery.
  3. Choose gallery you want to display.
  4. Click "Get embed code" button and copy code.
  5. In Bigcommerce admin panel click "Web Content" and choose "Web Pages".
  6. Click "Create a Web Page".
  7. Follow Web page creation setup
    • Write page name
    • Choose desired URL destination
    • In editor click "HTML" button and copy the code from Socialphotos
    • Click Save button to save the changes. Watch the screencast for reference:

Display a product gallery on the product page

Product gallery can be placed only on your website product pages, think of it as part of your product page. Product gallery showcases photos related to a product. This tutorial explains how to put product galleries widget on product page. You need to place code once per all products.

  1. Please ensure that you already included JavaScript SDK as described on the top of this page.
  2. Go to your Bigcommerce admin dashboard and on the top right side click on "Design".
  3. Click "Edit HTML/CSS".
  4. Find your Product page (product.html) in sidebar under "Other Template Files" section.
  5. Navigate to Product Galleries tab in Socialphotos admin panel
  6. Press "Get Embed Code"
  7. Copy code from modal window
  8. Place code wherever you want the embed gallery to appear on your product page.
  9. Save your progress by pressing Save button on top left side.