Return to WeTheme.com

Instagram API Fix

A walkthrough on how to fix the Envy and Flow themes affected by the recent Instagram API change.

In this article

  1. Overview
  2. Instructions
  3. FAQs

Overview

Instagram recently rolled out changes to the way they allow images to show on third party sites.

It appears that the change has affected certain versions of our themes, and as a result your Instagram feed may not show correctly.

Symptoms of this change are broken link icons where images should reside:

How images will look if affected by Instagram API change

Instructions

This process is fairly straightforward, regardless of the fact it contains code - you should only need to follow the steps outlined in this document to get your Instagram feed back up and running, super fast :-)

Estimated time to implement: 10 minutes

Step 1

Firstly, in a new tab in your browser, open up your Shopify admin and navigate to the theme you wish to apply the fix to:

Admin > Online store > Actions > Edit code

Step 2

From the left hand side folder list, select “Snippets” to expand the folder.

How to access the 'Snippets' folder

This will reveal the option “Add new snippet” - click this.

Create a new 'snippet'

Copy and paste the following when you are prompted to name the Snippet:

For Flow, paste this:

instagram-fix-flow

For Envy, paste this:

instagram-fix-envy

Here’s an example of how things should look for Flow:

How to name the 'Flow' snippet

Here’s an example of how things should look for Envy:

How to name the 'Envy' snippet

Then, click “Create Snippet”

Leave this page open for now as we need to grab some text to add in here.

Step 3

In a new tab in your browser, open one of these links depending on your theme:

Flow - http://docs.wetheme.com/faqs/instagram-fix-flow.txt
Envy - http://docs.wetheme.com/faqs/instagram-fix-envy.txt

Copy the entire bunch of text within the page:

You will need to copy all of this code

Paste it into the newly created Snippet and click Save.

You are doing great - nearly there!

Step 4

Now, open up “Theme.liquid”

Open 'theme.liquid'

Scroll all the way to the bottom and find the little piece of code which says:

</body>

You will need to copy and paste the following ABOVE </body>

For Flow:


{% include 'instagram-fix-flow' %}

For Envy:


{% include 'instagram-fix-envy' %}

This is how it should look:

And you're done!

Save this and then head back to your storefront using a new tab in your browser - you should see your Instagram feed back to normal and you did it all yourself!

Pat yourself on the back! Good work!