WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Plugins» How to Add Instagram Shoppable Images in WordPress

How to Add Instagram Shoppable Images in WordPress

Last updated on July 21st, 2020 by Editorial Staff
165 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add Instagram Shoppable Images in WordPress

Do you want to add shoppable Instagram images to your WordPress site?

Instagram shoppable images have links that people can easily click on to buy your products. This is a powerful way to showcase your products and drive more sales from Instagram.

In this article, we’ll show you how to easily add Instagram shoppable images in WordPress.

Adding shoppable Instagram images in WordPress

Why Add Shoppable Instagram Images in WordPress?

A shoppable Instagram feed is a series of photos where each photo has a link to a product or service on your site. Customers can simply click on the link in an image’s caption to buy that product in your online store.

Using Instagram to display photos allows you to leverage Instagram’s massive user base. At the same time, it also helps your website visitors a chance to discover your Instagram account.

You can send traffic to individual product pages in WooCommerce. You can also use the feed to display recent posts across your website while at the same time growing your Instagram following.

Creating a Shoppable Feed and Adding It to Your Site

First, you need to upload the images that you want to use on your Instagram account.

For each image that you want to make shoppable, you need to add the relevant product (or service) page’s URL in the photo’s caption on Instagram.

Here’s a photo in our Instagram feed with a URL in the caption. When the photo and caption are embedded on our site, that URL will link to the product’s sales page: https://example.com/product/floral-dress/

A photo on Instagram with a product URL in the caption

Once you’ve done this for all the images you want to use, it’s time to add your shoppable Instagram feed to your site.

Connecting Your WordPress Site to Your Instagram Account

For this tutorial, we’ll be using the plugin Smash Balloon Instagram Feed Pro. It is the best Instagram plugin for WordPress and allows you to easily add Instagram photos to your WordPress website.

First, you need to install and activate the Smash Balloon Instagram Feed Pro plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Instagram Feed » License page in your WordPress admin area to enter your license key. You can find this information under your account on the Smash Balloon website.

Adding your Instagram Feed license

Don’t forget to click on the ‘Save Changes’ button at the bottom after activating your license key.

Now it is time to connect WordPress to your Instagram account. Simply, switch to the ‘Configure’ tab and click on the ‘Connect an Instagram Account’ button.

Connecting your Instagram account

You will then see a popup asking you to choose whether you’re using a Personal or Business Instagram profile. Since you’ll be using photos from your own account, you can use a Personal Instagram account.

Simply leave Personal selected and click the ‘Connect’ button to continue.

Connect your personal Instagram account to your WordPress site

This will take you to the Instagram website where you’ll be asked to allow Smash Balloon access to your Instagram account. Simply click on the ‘Authorize’ button to continue.

Authorize Instagram account

You’ll now be redirected back to your website where you will see your Instagram ID in a popup asking you to connect and add your account.

Connect your Instagram account

You need to click on the ‘Connect this account’ button to continue.

After that, you’ll see your Instagram account listed under plugin settings.

Your personal Instagram account is now connected to your WordPress site

Your Instagram account is now connected to your WordPress site, and you can easily display your recent Instagram uploads anywhere on your website.

Link Instagram Photos to URLs in Captions

Your Instagram feed is almost ready. However, you need to let the plugin know that you want to link Instagram posts in your feed to the URLs you have added in captions.

To do that, simply switch to the ‘Customize’ tab under plugin settings. From here, you need to click on the ‘Posts’ section and check the box next to ‘Link Posts to URL in Caption’ option.

Link Instagram posts in your feed to URLs in caption

Don’t forget to click on the ‘Save Changes’ button to store your settings.

Adding a Shoppable Instagram Feed to Your WordPress Site

Smash Balloon Instagram Feed Pro makes it very easy to display your Instagram photos anywhere on your WordPress blog.

Simply edit the post or page where you want to display your Instagram feed. On the post edit screen, click on the (+) button to add a new block and then insert ‘Instagram Feed’ block to your content.

Adding an Instagram feed block to your page

The plugin will then automatically load your Instagram feed and show a preview of it inside the editor. You can now save your post or page and visit your website to see it in action.

The Instagram feed live on the website

To buy any of the products, a user can simply click on the image and it will take them to the URL you added in the image caption.

Display a Shoppable Instagram Feed in Sidebar

The plugin also allows you to easily display your Instagram feed in the sidebar.

Simply head over to the Appearance » Widgets page and add the ‘Instagram Feed’ widget to your sidebar.

Sidebar widget
Don’t forget to click on the save button in the widget settings.

You can now visit your WordPress website to see your Instagram feed in the sidebar.

Instagram sidebar widget preview

Customizing Your Shoppable Instagram Feed

Smash Balloon Instagram Feed Pro comes with beautiful layouts and customization options. This allows you to easily customize the styles and adjust it to your own requirements.

You can tweak the layout by visiting the Instagram Feed » Customize page. From here you’ll see layout options like carousel, masonry, grid, and highlight.

Customize your shoppable Instagram feed layout

Additionally, you can show and hide the header, load more button, follow button, and other options.

Show and hide items from your Instagram products feed

Don’t forget to click on the Save Changes button to store your settings.

You can now visit the post or page containing your Instagram feed, and it will automatically display with the new settings you applied.

Shoppable Instagram feed carousel layout

We hope this article helped you learn how to add Instagram shoppable images in WordPress. You may also want to see our guide on proven ways to recover abandoned cart sales, and our comparison of the best email marketing services for eCommerce.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

165 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

6 Comments

Leave a Reply
  1. Talat Mehmood says:
    Jul 18, 2020 at 9:55 am

    Sir very useful tutorial. So nice to find you here. Sir I am lucky to found your advise. My pleasure to do as you advise. Thanks a lot. Sir keep sending me tutorials.

    Reply
    • WPBeginner Support says:
      Jul 22, 2020 at 1:41 pm

      Glad you found our tutorial helpful :)

      Reply
  2. Shelley R Zurek says:
    Jul 15, 2020 at 5:57 pm

    Can the URL be an affiliate link that goes off your site to say a store or Amazon?

    Reply
    • WPBeginner Support says:
      Jul 16, 2020 at 9:02 am

      If you wanted, you can reach out to Smash Balloon for the specifics on how to set something like that up.

      Reply
  3. Optik Inspektor says:
    Jul 15, 2020 at 4:41 am

    Does it mean you can use instagram like a shop, or can connect it to an existing shop on another page?

    Reply
    • WPBeginner Support says:
      Jul 15, 2020 at 10:52 am

      You would be connecting it to a shop on a page that is not Instagram.

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
SeedProd Logo
SeedProd
Create beautiful custom landing pages - Drag & drop builder. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
HostGator
HostGator Coupon
Get 62% OFF HostGator, one of the most reliable and popular web hosting companies! Includes FREE domain.
TeslaThemes
TeslaThemes Coupon
Get 20% off on TeslaThemes large collection of premium WordPress themes.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.