Website Building » Shopify » How Do I Add a Shoppable Instagram to Shopify?

How Do I Add a Shoppable Instagram to Shopify?

Last updated on December 25, 2022 @ 9:27 am

Instagram is one of the most popular social media platforms, with over a billion active users. And, it’s a powerful tool for ecommerce businesses.

Instagram shoppable posts let you tag products in your photos and link to product pages on your website. This makes it easy for your followers to purchase the products they see in your photos, and can help increase traffic and sales on your website.

Adding a shoppable Instagram to Shopify is a great way to increase traffic and sales on your website. Here’s how to do it:

1. Go to your Shopify admin and click Online Store.

2. Click Themes.

3. Find the theme you want to edit, and then click Actions > Edit code.

4. In the Layout directory, click theme.liquid.

5. Find the closing tag, and then paste the following code before it:

{% if template contains 'product' %}
{% include 'product-instagram-feed' %}
{% endif %}

This code will include the Instagram feed on product pages only, so it won’t appear on other pages of your website. You can customize the location of the feed by finding a different spot in the code to paste it. For example, if you want the feed to appear in the footer of your website, you could paste it in the footer.liquid file.

6: Create the Instagram feed

Now that you’ve added the code to your theme, you’ll need to create the actual Instagram feed. To do this, go back to the Edit code page and click the “Add a new snippet” button. Give your snippet a name (such as “product-instagram-feed”) and paste the following code into it:

<div id="instagram-feed">
{% for product in collections.all.products %}
{% if product.tags contains 'featured-on-instagram' %}
<div class="instagram-feed-item">
<img src="{{ product.images[0] | product_img_url: 'large' }}"
alt="{{ product.title }}">
<a href="{{ product.url }}">{{ product.title }}</a>
</div>
{% endif %}
{% endfor %}
</div>

This code will loop through all of your products and check if they have a tag called “featured-on-instagram”. If they do, it will include them in the Instagram feed with the product image and title linked to the product page. You can customize the design of the feed by adding your own CSS styles to the “instagram-feed” and “instagram-feed-item” classes.

7: Tag your products

The final step is to tag the products you want to feature in your Instagram feed. To do this, go to your Shopify admin and click Products. Find the product you want to feature, and then click the Edit button. Scroll down to the “Tags” field and add the “featured-on-instagram” tag. Repeat this process for all of the products you want to include in your Instagram feed.

And that’s it! You now have a shoppable Instagram feed on your Shopify store. You can continue to add and remove products from the feed by adding or removing the “featured-on-instagram” tag. By using this feature, you can showcase your products in a visually appealing way and drive traffic and sales to your website.

PRO TIP: If you are considering adding a shoppable Instagram to your Shopify account, be aware that there are some potential risks. First, your customers’ credit card information could be compromised if you do not have a secure system in place. Additionally, your customers may not be able to view your Instagram feed if they do not have an active account. Finally, if you are not careful with the way you set up your shoppable Instagram, it could violate Shopify’s terms of service and result in your account being suspended.
Dale Leydon

Dale Leydon

Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.