Increase Your Sales on Shopify with an Instagram Feed

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

Instagram feed

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

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.

Have you encountered any difficulties? Contact us!

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 need these settings when writing the markup for 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

<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 on the Pixel Union website.

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

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