Increase sales with Instagram feed in Shopify store

on September 29, 2018

Create your own shopify store

Having Instagram images with links to your Shopify store is an easy way to increase your number of Instagram followers and create additional sales channels. You can easily move your Instagram visitors to product pages or notify them about special offers in your store.

Instagram feed

Adding a reusable Instagram carousel section to the Shopify store is easy. The process consists of 6 steps.

Learn how to delight a customer by AR Quick Look in Shopify Store

Open your store settings. Click on Online Channels. In the new submenu, press Themes. Select the theme you would like to edit. Click More and Edit Code.

In the Layout folder, find a theme.liquid file and place the following lines inside the <head> tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" />

Create the instagram.liquid section

In the Sections folder, create a new file and call it instagram.liquid.

In instagram.liquid, define the section settings:

{% schema %}
  {
    "name": "Instagram (index)",
    "settings": [
      {
        "id": "show_instagram",
        "type": "checkbox",
        "label": "Show instagram feed",
        "default": true
      },
      {
        "id": "instagram_divider",
        "type": "checkbox",
        "label": "Show divider",
        "default": true
      }, 
      {
        "id": "instagram_access_token",
        "type": "text",
        "label": "Instagram access token"
      },
      {
        "id": "instagram_autoplay",
        "type": "checkbox",
        "label": "Autoplay",
        "default": true
      },
      {
        "id": "instagram_autoplay_speed",
        "type": "text",
        "label": "Autoplay timeout (ms)",
        "default": "1500"
      },
      {
        "id": "instagram_hover_pause",
        "type": "checkbox",
        "label": "Pause autoplay on mouse hover",
        "default": true
      },
      {
        "id": "instagram_photos_amount",
        "type": "text",
        "label": "Amount of Instagram photos to get",
        "default": "7"
      }
    ],
    "presets": [
      {
        "name": "Instagram gallery",
        "category": "Gallery"
      }
    ]
  }
{% endschema %}

We're going to need these settings when we write markup for the carousel and for owl carousel initiation. We use the presets object when adding the section to the index page.

Now, as the section is created, it can be referenced from anywhere in the project using the {% section 'instagram' %} tag.

Read more about our BookingMap Shopify App. Turn your standard eCommerce store into map-based service like Booking or Airbnb.

Write HTML markup

 {% if section.settings.instagram_access_token == blank or section.settings.instagram_access_token == "" %}
  <div>
    <p>For instagram feed to appear, you must set up an access token</p>
    <p>First navigate to <a href="http://instagram.pixelunion.net/">http://instagram.pixelunion.net/</a> to obtain your access_token</p>
    <p>Then, in this section's settings, find 'Instagram access token' setting and paste the token into it.</p>
  </div>
  {% endif %}
  <div>
    <div class="instagram-carousel owl-carousel owl-theme"></div>
  </div>

Add Javascript functionality

<script type="text/javascript">
  (function(){
    var instafeedToken = '{{section.settings.instagram_access_token}}', 
        userid = 'self',
        num_photos = '{{section.settings.instagram_photos_amount}}'; // how much photos do you want to get    
    $.ajax({
      url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent', // or /users/self/media/recent for Sandbox
      dataType: 'jsonp',
      type: 'GET',
      data: {access_token: instafeedToken, count: num_photos},
      success: function(data){
        for( x in data.data ){
          $('.instagram-carousel')
              .append('<div class="item"><a href="'+data.data[x].link+'"><img src="'+data.data[x].images.low_resolution.url+'"></a></div>'); 
          // data.data[x].images.low_resolution.url - URL of image, 306х306
          // data.data[x].images.thumbnail.url - URL of image 150х150
          // data.data[x].images.standard_resolution.url - URL of image 612х612
          // data.data[x].link - Instagram post URL 
        }
        $('.instagram-carousel').owlCarousel({
          loop: false,
          margin: 5,
          items: 4,
          nav: false,
          dots: true,{% if section.settings.instagram_autoplay %}
          autoplay: true,
          autoplayTimeout: '{{ section.settings.instagram_autoplay_speed }}',
          autoplayHoverPause: '{{ section.settings.instagram_hover_pause }}'
        {% endif %}
      })
      },
      error: function(data){
        console.log(data); // send the error notifications to console
      }
    });
  })();
</script>

That's it! Your Instagram carousel section is ready to use.

Get an Instagram access token

The gallery needs your Instagram access token to function. You can get it at the Pixel Union website.

Navigate to Customization menu of your theme and select 'Add section.' Find 'Instagram gallery' and add it.

Go ahead and utilize your newly added Instagram section. Get creative, find ways to remind your customers about your store, or notify them about new products. Moreover, don't forget not only to reference your store in the photo comment section, but also ask your customers to leave comments so that you get more valuable feedback, and your account will become better referenced on Instagram.

Share This Article