Add Instagram Feed to Shopify and Increase Your Sales

# ShopifyAlex Borodin
September 29, 2018
6 min read
Add Instagram Feed to Shopify and Increase Your Sales

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.

# Shopify
September 29, 2018
6 min read

Sell Products Online With Shopify - Start Your Free Trial

Start trial

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

  1. Install Owl Carousel 2 Library

  2. Create the instagram.liquid section

  3. Write HTML code

  4. Add Javascript

  5. Get the Instagram Access API key

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

add-instagram-feed-to-shopify

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. We use the presets object to add the section to the index page.

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

Final thoughts

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, and the more prospects you have. Good luck!

Sell your products anywhere with Shopify. Shopify has everything you need to start selling, all in one place. Try Shopify free for 14 days. No credit card is required. Click the link and get a free trial of Shopify!

Author
Alex Borodin - Chief Operating Officer
Alex BorodinChief Operating Officer

Related articles

Sell Products Online With Shopify - Start Your Free Trial

Start trial

VT Labs does agile development for Shopify stores, to move faster than competitors. You get store improvements every week and can change priorities anytime.