Add Instagram Feed to Shopify and Increase Your Sales

# Shopify
Alex Borodin
September 29, 2018

Having Instagram images linked to your Shopify store is an easy way to increase your followers' count and create additional sales channels. It enables you to move your Instagram visitors to a product page and notify them of special offers on your website.

Adding a reusable Instagram carousel section to a Shopify store is a simple process comprised of 6 steps:

  • Install Owl Carousel 2 Library

  • Create the instagram.liquid section

  • Write HTML code

  • Add Javascript

  • Get the Instagram Access API key

  • Place the carousel on the index page

Install Owl Carousel 2 Library

Click on Online Channels in the Store Settings menu. In the appeared submenu, select Themes. Choose the theme you would like to edit. Click on 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 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 need these settings when writing the markup for the owl carousel and its initiation. To add the section to the index page, we use the presets object.

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

Write the HTML code

{% 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

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

<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>

Get an Instagram access token

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

Add the Instagram carousel to the main page

Navigate to the Customization Menu of your theme and select Add Section. Then click on the Instagram Gallery button to add it.

https://www.youtube.com/watch?v=ng6aHNCIsu8

Go ahead and enjoy your brand new Instagram section. Be creative, reminding the customers about your store, and notifying them of new products. Aside from referencing your store in photo comments, try asking visitors to leave feedback. The more valuable feedback your account has, the better it's ranked on Instagram, the more prospects you have. Good luck!

Author
Alex BorodinChief Operating Officer

Related articles

At VT Labs we are a full-cycle software development company specialising in eCommerce. Whether you’re looking to develop a product from scratch, platform migration, revamp your existing product, design an app, or do UX testing, we’re your one-stop shop.