Shopagram - Instagram Feed App Installation Guide (v1)

Shopify 2.0 Setup Guide
Step 0 - Step by Step Guide through Video Tutorial 1
Step 1 - Connect Instagram Account 2
Step 2 - Configure Your Instagram Feed 4
Step 3 - Tag Products To Instagram Posts 5
Step 4 - Add App Block In Theme Editor 7
- Go to Online Store (Under Sales Channel) > Themes 7
Step 5 - View On Shopify Store 9


Step 0 - Step by Step Guide through Video Tutorial

How to Install Instagram Feed on Shopify Store | ShopInsta Instagram Feed for Shopify | Instafeed


Step 1 - Connect Instagram Account

Click on the “Connect with Instagram” button to connect your account.


Give “Profile Information” & “Media” permissions.
 

After a couple of seconds, your Instagram account will be successfully authenticated with the ShopInsta - Instagram Feed App.


Step 2 - Configure Your Instagram Feed

After you connect your Instagram account, a default feed configuration will be created.


You have the options to set various configurations for your Instagram feed such as Grid, Highlight and Slider.


Also, there are other options to customize your Instagram feed such as
What should happen when a user clicks on a Post?
Add spacing between the Posts


Step 3 - Tag Products To Instagram Posts

You have the option to tag products to your Instagram post


Click on an Instagram Post image to tag products to that particular post.

Click on Tag Products and select Products which you want to tag to your Instagram post. You can only tag upto 3 Products to a single Instagram post.


After selecting the products which you want to tag, click on the Select button to save the selected products and they will be tagged to your Instagram post.

If you would like to see which products you have tagged to a particular Instagram post, click on the Instagram post image in the right section.

Step 4 - Add App Block In Theme Editor
Go to Online Store (Under Sales Channel) > Themes

Click on Customize button


In the left navigation menu, click on the Add Section or Add Block depending on where you want to show your Instagram Feed.


Select Insta Feed block from under the Apps section.


Once selected, you will be shown a preview of how your Instagram Feed will be displayed on your shopify store.


Click on the Save button to save this Instagram Feed for your shopify store.


Your Instagram Feed is saved successfully as per the configurations defined by you in the app.

Step 5 - View On Shopify Store

Visit your shopify store to view the Instagram Feed.



This is how the tagged products will be shown to the customers who visit the merchant shopify store when a customer clicks on the Instagram post.



Manual Setup Guide
1).  Just Copy the code block and place it in the section where you want to display your Instagram feed.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js" defer></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"
  integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
  defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" defer></script>

<script defer>
  shopCurrencySymbol = "{{ cart.currency.symbol }}"
  cartItemsCount = {{ cart.item_count }}
</script>

{{ "https://shopagram-685c76c87a2e.herokuapp.com/static/css/feed_popup.css"| stylesheet_tag}}
{{ "https://shopagram-685c76c87a2e.herokuapp.com/static/css/image_popup.css" | stylesheet_tag }}
{{ "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" | stylesheet_tag }}
{{ "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" | stylesheet_tag }}
{{ "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" | stylesheet_tag }}
{{ "https://shopagram-685c76c87a2e.herokuapp.com/static/css/bootstrap.min.css" | stylesheet_tag }}

<div class="min-sif">
  <div class="popup"   role="alert"  id="mn-ifd-popup"></div>
  <div ap-cfg-full-width=false  ap-cfg-t-margin=0
 ap-cfg-b-margin=0    class="{{shopagram_config_id}}"></div>
</div>







2). After that replace {{shopagram_config_id}} with actual ID.
E.g. cfg-294-1701887452