Please note!

You can also make use of Shoppable items in your Instagram feed.

What do we mean by Shoppable?

Shoppable items in your widget allows your customer to go directly to page where they can shop the item marked as Shoppable. This makes it so much easier for your customer and should increase your sales if applied properly.

To post an Instagram feed, it is necessary that you have connected Google Tag Manager (GTM) (this is available from a Mijnwebwinkel PRO subscription). If you have not yet done so, read via the links below how to create a Google Tag Manager account and how you can link it in the management environment of your webshop. Do this before continuing with SnapWidget.

A. Google Tag Manager (GTM).

Now it's time to get started with Google Tag Manager.

<< video-link>>

Create tag

  • Make sure you're logged into Google Tag Manager and select the container you've linked to your store. Select the item Tags in the menu on the left.

  • Then click on New to create a new tag.

  • Give your tag a name and then click on the Tag Configuration block.

  • Then choose Custom HTML under Custom.

  • Then paste the code below into the HTML field.

<!-- SnapWidget -->
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<script>
var iframe = '';
var elements = document.getElementsByTagName("p");
[].forEach.call(elements, function (element) {
if (element.textContent === "[instagram-feed]") {
var iframeDiv = document.createElement("div");
iframeDiv.innerHTML = iframe;
element.parentNode.replaceChild(iframeDiv, element);
}
});
</script>
  • Copy the snapwidget-lightbox.css line and the snapwidget-lightbox.js line from your SnapWidget snippet (see below marked red) and paste it after the 2nd line between the snapwidget.js line and the <script> line. These lines must be used if you have a SnapWidget PRO subscription and you have set the Photo Link as a Lightbox. It also applies when you make use of the Shoppable item feature of your SnapWidget widget because to enable this you must set the Photo Link as Shoppable (Lightbox).

Please note!

You cannot set up a Photo Link with the free SnapWidget.

What the Photo Link does:

If you click on a photo in a Slideshow or a Grid, the photo will be displayed in a larger size. With the free SnapWidget, the photo will be displayed on the SnapWidget website, but with the PRO plan, it will be displayed in a Lightbox with a link to the original photo on Instagram.

  • Next, copy the iframe code from your SnapWidget snippet (see below marked in green) and paste this between the 2 apostrophes (' ') of the var iframe = ' ' on the 4th line.

If you have correctly added/modified the HTML content of the Google Tag Manager tag, it should look like this (the XXXXXX in the iframe src is your own SnapWidget ID for the specific widget).

Please note!

SnapWidget allows you to create various widgets (e.g. grid, slideshow, etc.). To make use of this option, you must name the GTM tags accordingly (e.g. grid display and slideshow display instead of instagram feed). You then replace the [instagram feed] part of the if element.textContent === "[instagram feed]" line with the correct name. This must be in square brackets.

  • When you have pasted all the code, click on Save at the top right of your screen.

  • A pop-up will appear stating that you have not selected a trigger yet. Click on Add Trigger.

  • Then select the All Pages option.

  • Click Save again at the top right of your screen to save your tag. Once your tag has been saved, click Submit in the top right corner of your screen and then Publish. Give your tag a name and description (if you want) and click Continue. You will now see the following screen:

After loading, your tag is published and you can place the Instagram feed in your webshop!

B. Mijnwebwinkel

Finally, it is time to place your Instagram feed in your webshop.

Place Instagram feed in your webshop

<< video-link>>

  • Go to the management environment of your webshop. Go to the page where you want to place the Instagram feed. In the text of this page, paste the following code (the tag): [instagram feed] (or the name you gave as addressed before, for example [grid-display]).

Please note!

Make sure the tag is not bold and use enter to insert the text (don't shift enter because then it won't work).

  • Then click Save at the bottom left.

Google Tag Manager will now automatically replace this piece of code with SnapWidget's Instagram feed!

And on your webshop it will look like this if you have used a Grid widget.

Or like this if you used a Slideshow widget.

If you have set the Photo Link as a Lightbox in your SnapWidget widget, you can click on one of the photos and it will be displayed as follows.

Please note!

If you change the layout of the Instagram Feed after you have set it up in your webshop, the changes may not be implemented. This is because the Instagram feed is remembered in your cache. To see the Instagram Feed correctly, you have to empty your cache or view your webshop in the incognito mode of your browser.

C. Relink Instagram widget

It may happen that after some time you have to link the instagram widget again (re-auth) to your Instagram account. This is because the authorization has expired:

To fix this, log into your Snapwidget account, then click the box under "username" (see image below). Then follow the steps to pair again. Then click on UPDATE & GET WIDGET and you're done!

Did this answer your question?