How to Add an Instagram Feed to Your Shopify Store
What is a Shopify Instagram Feed?
A Shopify Instagram feed is a section of a page on your website that embeds your most recent Instagram posts. Using an app to do this allows you to click on the post and open the caption and comments, as well as tag products within each post.
Best Shopify Instagram Feed Apps
There are a bunch of apps that allow you to add an Instagram feed to a store in the Shopify theme store but here are my go-to favorites that I use on all my stores. There are so many others out there but decision fatigue is a thing, so I continue to use these.
Instafeed
PROS
- Basic free plan available
- Very simple and easy to use. Set up & connect to the Instagram account in just 2 minutes and there's nothing to get confused about on the interface.
- Add the feed super easily to the homepage just like a regular section.
- Some customization options like spacing and number of images.
CONS
- Requires you to upgrade to the paid plan in order to customize the mobile layout. So if you want 6 per row on desktop, and 2 per row on mobile, then you’d have to upgrade from the free plan.
- Not as many customization options as other apps.
Covet.pics
PROS
- A ton of different customization options (as seen below) for both desktop and mobile on the free plan. These options include spacing, number of rows, number of images, hover effects and more.
- “Gallery” feature so that if your client hasn’t set up their Instagram yet, you can still add temporary images to mockup an Instagram account. That way the website looks polished when you present it to the client for their first revision (rather than the site still looking unfinished).
CONS
- The free plan has been removed.
- Since there are so many settings, the app interface can be confusing for the client to navigate, and it takes slighty longer to set up.
- The setup is a bit complicated. It requires an Instagram Business Account and connects the account through an existing Facebook Page (rather than straight to the Instagram account), so you also need a Facebook page.
- Installation for Store 1.0 is slightly more laborous as you need to copy and paste the code yourself to embed it. On Store 2.0, it's as simple as adding a regular section.
How to add an Instagram Feed without an app
An alternative option to using an Instagram feed app is to insert your best Instagram images into a row that looks like an Instagram feed, but isn't a live representation of your feed. The advantage of this is that you can display all your best images, making sure the feed always looks very good, and it removes any additional load time that an app may require. The drawback is that the feed is not up to date and doesn't allow features such as using a click to open a popup that displays the post in a larger format.
In order to add a "static feed" rather than a "live feed", look in your theme for a "text columns with images" section or something similar. Add an image to each column, removing any text inside the columns, and display 6 images per row on desktop. Link each image to the Instagram post, making sure that the links are opening in a new tab. Add a heading such as "Follow us on Instagram @brand". If the section doesn't allow you to add a heading, add a "rich text" section right above this section, removing any padding separating the section.
Just like that you can display your best Instagram images without worrying about configuring an app. Be sure to update these every so often.
Where to put the Instagram feed
The usual place to put an Instagram feed is just above the footer on the home page. Some people say you shouldn't put it on the home page as it can cause your website to load slower. I feel that if Instagram is one of the brand's main marketing channels or ways to connect with their audience, then it's an absolute must - especially for very visual products. It doesn't affect load speed enough for me to not include it.
If you want the feed to be on every single page above the footer rather than only on the home page, then you'll need to include the section in the theme.liquid theme file, right above the footer (between content_for_layout and the footer section). However, I also love it when the feed is integrated into the footer's colored background as it makes it stand out more and gives a premium feel. See how Aisle has done it below. To do this, you need to add the app's feed/gallery code in the footer.liquid file.
While Shopify's app blocks make it very easy to add the feed to any page, I find that the formatting can sometimes not be ideal, and I prefer to add the feed with code. For the Instafeed app, you'll add <div id="insta-feed"></div> into a Custom Code section to display the feed (instead of using the app block). This gives more flexibility for placement and padding of the section. Note that if you also have an app block on the page, it the feed will only display the first instance, so you'll need to hide the app block to show both.
App Maintenance **Important**
For all Instagram apps, the account login eventually times out, and the feed will break (this is a security feature of Instagram). Store owners need to check their store regularly and make sure that the login hasn’t expired (you'll see that the feed image links are all broken). The good news is that you just need to log in again through the app to re-authenticate the account.
If you found this helpful, you might like to check out our Shopify Store Launch Kit.
Hana Drdla
