According to the official stats, more than 500 million people use Instagram on a daily basis. 80% of this social media channel users are subscribed to at least one business profile, while 60% of users go to Instagram for shopping. This apparently means that building a presence on Instagram is one of the first-priority activities for any brand of today.

5% of Instagram users will interact with a post they like. Such actions may include completing a purchase, clicking a link in the description, or post shares. By using hashtags, you get to engage users in a conversation/discussion of a promoted product/service.

Today, Instagram allows users to add specific posts on websites or blogs effortlessly. However, this turns out to be inconvenient if your Instagram business page gets updated constantly, and multiple posts are made every day. In such a case, youโ€™ll need to make code adjustments each time a new Instagram post gets published.

With that in mind, weโ€™ve prepared a step-by-step guide on how to easily (and for free) add an image gallery or a video from your Instagram account to your Shopify store and configure it based on your personal preferences.

Step-by-Step Guide on Embedding Instagram Feed to Your Shopify Store

Step 1. Making adjustments to your current Shopify theme

1.Log in the Admin Panel of your Shopify store. Then, go to Online Store โ†’ Themes. In the drop-down Actions list of your theme  โ€• you wish to add the Instagram feed to  โ€• click Edit code.

We can see the published theme on the following screenshot:

How to Embed Instagram Feed in Your Shopify Site in 3 Easy Steps | MageWorx Shopify Blog

2. In the Sections folder, click Add a new section.

How to Embed Instagram Feed in Your Shopify Site in 3 Easy Steps | MageWorx Shopify Blog

3. Enter the name of the section โ€• Instagram-feed โ€• and click the Create section button.

How to Embed Instagram Feed in Your Shopify Site in 3 Easy Steps | MageWorx Shopify Blog

4. Paste this code in the created instagram-feed.liquid file and click Save.

How to Embed Instagram Feed in Your Shopify Site in 3 Easy Steps | MageWorx Shopify Blog

Step 2. Getting an Instagram access token

To make the feed display content from your Instagram account, youโ€™ll need to get a unique access token. To do that, access our free of charge app that has been developed specifically for this purpose and obtain the required access token in a click.

  1. Follow the link: https://appstore.mageworx.com/instagram-access-token.html and click Get Access Token.
How to Embed Instagram Feed in Your Shopify Site in 3 Easy Steps | MageWorx Shopify Blog

2. Instagram will request you to log in and authorize our app.

3. As soon as you permit access, the app will get access to the public content of your account. You will be redirected back to the page with our app. There, your access token will be specified in the text field. Save it. We will need it a little later.

How to Embed Instagram Feed in Your Shopify Site in 3 Easy Steps | MageWorx Shopify Blog

Please note that our app does NOT collect, store, or transfer your data to any third parties, including the access token you get using the app. For more details, read the Access Token App Privacy Policy.

Step 3. Configuration of your Instagram feed

  1. Go to Online Store โ†’ Themes and click Customize next to the theme you added code to in Step 1.
How to Embed Instagram Feed in Your Shopify Site in 3 Easy Steps | MageWorx Shopify Blog

2. Click Add section.

How to Embed Instagram Feed in Your Shopify Site in 3 Easy Steps | MageWorx Shopify Blog

3. In the sections list, find Instagram feed and click Add.

How to Embed Instagram Feed in Your Shopify Site in 3 Easy Steps | MageWorx Shopify Blog

4. Go to this section from the general list and add the access tokenyou obtained in Step 2 to the corresponding field.

How to Embed Instagram Feed in Your Shopify Site in 3 Easy Steps | MageWorx Shopify Blog

5. Donโ€™t forget to configure the Instagram feed according to your preferences. The free app enables you to:

  • Set a name for the section,
  • Specify the number of images that will get loaded from Instagram (the last added ones),
  • Set up the number of images on one slide, as well as
  • Specify intervals for gallery slides changes.

6. Click Save and open your Shopify storeโ€™s main page to see the Instagram feed weโ€™ve just added.


Thatโ€™s it! We hope this solution works for you just fine. Should you have any difficulties or questions, please leave us a comment in the comments field. We will be happy to assist!

(Visited 9,124 times, 34 visits today)

31 Comments

  1. Kathy July 4, 2019 at 3:21 am

    Hey,

    thx so much for writing this good guide article. But I just followed your steps and it just didn’t show on my website. Could you pls kindly help?

    Thx so much!
    Kathy

    Reply
    1. Ellie Yantsan July 5, 2019 at 9:50 am

      Hello Kathy,

      Thank you so much for your comment. The author of the article will contact you directly to help out. Hopefully, you do not mind. =)

      Reply
  2. Zoe Borrell September 28, 2019 at 5:37 am

    Hi there,

    It worked for me, however its just showing one image at a time as a slideshow. I would like to show 5 images in a row.

    Please help!

    Reply
    1. Ellie Yantsan September 30, 2019 at 7:42 am

      Dear Zoe,

      Thank you for contacting us. As far as I see, several images are displayed in a row: http://prntscr.com/pcqr5q. Is there anything you’d like to achieve?

      Reply
  3. alinga October 9, 2019 at 7:33 am

    How can we get public post using based on hashtag name.?

    Reply
    1. Ellie Yantsan October 9, 2019 at 7:57 am

      Hello there,
      Thank you for taking the time to leave a comment. As far as I know, there would be slight code changes required. Please, contact the author directly at v.tsupryk@mageworx.com. He will be happy to assist.

      Reply
  4. Anni December 12, 2019 at 11:24 pm

    Super useful guide! Everything worked perfectly. Other articles I found on Google weren’t much help . . .

    Thank you so much! ๐Ÿ™‚

    Reply
    1. Ellie Yantsan December 17, 2019 at 9:05 am

      Thank you so much for your kind words, Anni. We really appreciate you taking the time out to share your opinion about the article!

      Reply
  5. ๅ‚…ๅคฉ January 17, 2020 at 1:56 am

    Hello, I succeeded with your method, but suddenly nothing is displayed today, only a title is displayed, there is no ins content, what’s wrong?

    Reply
    1. Ellie Yantsan January 21, 2020 at 8:12 am

      Hello there,
      Thank you for taking the time to leave a comment. Please, contact the author directly at v.tsupryk@mageworx.com. He will be happy to assist.

      Reply
  6. Kerry February 18, 2020 at 2:11 am

    Great app! I had it working the other day, but now it doesn’t display the feed anymore. Can someone let me know if it is due to the new algorithm that will be released on March 4th?

    Reply
    1. Vadzim Tsupryk February 18, 2020 at 11:51 am

      Hi Kerry,
      Glad you liked the app.
      There is no exact date of deprecation of the Instagram API Platform.
      I can send you a collaborator access request to your store from my Shopify partner account to have a closer look at your problem.

      Reply
  7. Belmond Candelaria February 21, 2020 at 12:40 am

    Hi,

    I follow the whole steps and it works but it show the whole 10 IG images in a landscape orientation.

    Reply
    1. Ellie Yantsan February 25, 2020 at 2:17 pm

      Hello,
      Thank you for reaching out to us. What is the URL of your e-store?

      Reply
  8. Sierra February 29, 2020 at 12:56 am

    Hi is there a code to input for spacing between the images? Thanks!

    Reply
    1. Vadzim Tsupryk March 3, 2020 at 1:07 pm

      Hi!

      You can add horizontal margin between images manually. To do so, find .mw-instagram-feed__slide line inside instagram-feed.liquid snippet and add margin: 0 (X)px right before closing curly bracket where (X) is desired margin from left and right sides of each image in pixels.

      Snippet

      Reply
    1. Vadzim Tsupryk March 17, 2020 at 7:17 am

      Anytime!

      Reply
  9. Suman Kumar March 30, 2020 at 12:08 pm

    Hi

    First of all I must say that you have created a wonderful easy to use code.

    But after doing the above steps, instagram section started appearing in the home page. But how can I display the same in my other page?

    Reply
    1. Vadzim Tsupryk April 3, 2020 at 11:16 am

      Unfortunately you can’t currently add the section to any other shop page except Homepage.

      Reply
      1. Monica April 25, 2020 at 4:57 pm

        Is there no way to add the Instagram Feed on a separate section on your websit?

        Reply
        1. Ellie Yantsan April 27, 2020 at 8:32 am

          Monica, could you please clarify what you would like to achieve?

          Reply
  10. Kelly March 31, 2020 at 1:02 pm

    this worked so well! thank you so much!
    Id like to make the feed images responsive so that they shrink in the mobile app…i have the code but not sure where to put it?

    Reply
  11. ana April 3, 2020 at 11:03 pm

    thanks a bunch you guys are awesome, let me know what can I do to thank you

    Reply
  12. Joseph Bouchard April 8, 2020 at 1:31 pm

    Wow! Wonderful help. Thank you so much!

    Reply
    1. Ellie Yantsan April 10, 2020 at 9:21 am

      Joseph, thank you for taking the time to comment on the article. We appreciate that!

      Reply
  13. Arran Mehtam April 11, 2020 at 8:08 am

    Hi there. Trying to add the section, however I keep getting the message of “This file contains the following errors:
    Error: Liquid syntax error: Duplicate entries for tag: schema” how do I fix this?

    Thanks

    Reply
    1. Vadzim Tsupryk April 13, 2020 at 6:36 am

      Hi!
      Please check your inbox

      Reply
  14. caitie April 22, 2020 at 9:32 am

    This is great thank you so much!! ๐Ÿ™‚ Just added it to my site and it looks great

    Reply
  15. Erboristeria dott. Simioni May 11, 2020 at 11:56 am

    Great! Thank you so much!

    Reply

Leave A Comment

Your email address will not be published. Required fields are marked *