All Collections
Distribute
Shoppable Galleries
Embed a Shoppable Gallery into a website
Embed a Shoppable Gallery into a website
Updated over a week ago

To add a shoppable gallery to your e-commerce site, you'll need to include a code snippet in your website's source code. Here's how you can do it:

  1. Log in to your Social Native account.

  2. Go to the "Activate" menu and select "Gallery Manager."
    ​

  3. Find the Shoppable Gallery you want to embed and click on the Three dots menu in the right top corner of the gallery.
    Then click on "Get code".
    ​
    ​

  4. Copy the Code Snippet from the modal that appears. You can use the "copy code" button or copy it manually with your keyboard.
    ​

  5. Paste the code snippet in your website's page where you want to display the shoppable gallery or carousel.

Code Snipped Details

<div id="olapic-widget-876a564787fde54703f2e22f021c86e9"></div>
<script
defer
async
id="olapic-widget-876a564787fde54703f2e22f021c86e9-script"
src="https://widgets-ssr.photorank.me/876a564787fde54703f2e22f021c86e9/en_US"
data-tag=""
></script>

The Code Snippet includes the following details:

  1. The Shoppable Gallery hash ("olapic-widget-876a564787fde54703f2e22f021c86e9" in the example above) is a unique identifier for this gallery, which must not be edited or removed.

  2. The Language Code (en_US) indicates the default language of the gallery. If you only support English, you don't need to change this parameter. If you support other languages, you can change it to match the language code you set up when you enabled the "Multi-language support" feature of the gallery.

  3. The parameter data-tag="" is optional and only necessary if you're using a "dynamic stream/category" source, which is related to the Product ID in your Product feed. If you don't need this feature, you can leave this parameter empty.


Did this answer your question?