As we recently discussed in a blog post, the current Instagram API has now been deprecated and there is a good chance that Instagram feeds on your Shopify stores stopped working unless you already took action. For some businesses, this instagram feed is a very important part of the sales funnel. Showing a feed of photographs of your product out in the world can be a very valuable visual incentive for your users as they peruse your online shop. So how do you get it back?

One simple way to get around this problem is to replace your Instagram feed with what we call an “emulated” feed. By this we mean, instead of using the API to pull in the data for your feed, we instead set up a custom section with blocks and use that as our data source.

While the downside to this is approach is that you have to manually update this feed each time you want to add new images, this is an acceptable compromise given the current situation with the API being deprecated and (at the time of writing) the only other option being to use a Shopify app, which for some people may not be the preferred option for a variety of reasons.

To build the emulated feed, we simply add a section which we will call instagram-feed.liquid and we include it in our page template the standard way with {% include instagram-feed.liquid %}.

Inside our section file we add the following code to define the schema for the blocks:

{% schema %}
{
    "name": "Instagram Feed",
    "blocks": [
        {
            "type": "image",
            "name": "Image",
            "settings": [
                {
                    "type": "image_picker",
                    "id": "image",
                    "label": "Image"
                }
            ]
        }
    ]
}
{% endschema %}

All we need is an image_picker field in the block so we can set each image for the feed. This gives us a new section where we can add a block for each image that we want to appear in our feed.

With the images all in place, the final step is to output them inside our template like so

<div id=”instagram-feed”>
{% for block in section.blocks %}
    <img src="{{ block.settings.image | img_url: 'master' }}" alt="{{ block.settings.image.alt }}">
{% endfor %}
</div>

#instagram-feed { float: left; width: 25%; }

There’s a chance that Instagram may give us back the API down the line, or offer other options for putting your feed back in the Shopify store in a more dynamic manner, but for now this fix will do the trick! 

Just remember to update it when you post new images. You don’t have to do it every time, but perhaps every four that you post (to coincide with the 4 column grid, if that is what you’ve chosen) you can jump in and update your site. The most important thing is that your product is still being showcased like it was before, and this beautiful visual photo grid can continue to work for you, and bring people closer to a conversion… which is always the name of the game!