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.
Sell Products Online With Shopify - Start Your Free Trial
Start trialAdding 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
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" />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.
{% 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>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>The gallery needs your Instagram access token to function. You can get it on the Pixel Union website.
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, 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!
VT Labs does agile development for Shopify stores, to move faster than competitors. You get store improvements every week and can change priorities anytime.
