88

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.

What is Instagram Shopping?

Instagram shopping allows you to tag products in your Instagram photos.

After tagging one or more products, users who are looking at the post will see a ‘View Products’ icon in the bottom-left corner.

A shoppable Instagram post

They can simply click on that icon to see the product’s name, description, and price.

This makes it easier for shoppers to learn more about the products featured in your social media posts.

Products in a shoppable Instagram post

Visitors can tap the screen again to go to your Instagram store, where they can buy the product featured in the social media post.

This is great user experience, but it isn’t easy to set up.

You will need to get approval from Instagram to use their shopping features, and some of these requirements are vague. For example, you’ll need to “have demonstrated trustworthiness, including through an authentic, established presence.” You’ll also need to maintain a “sufficient follower base.”

In addition, you’ll have to set up a  Facebook catalog, a product catalog, and a Facebook business page.

In other words: it’s a lot.

Because of that, many Instagram users are looking for an easier way to help shoppers buy products. That’s where shoppable Instagram images come in.

Why Add Shoppable Instagram Images in WordPress?

A shoppable Instagram feed is a series of photos that have a link to a product or service on your site. These URLs aren’t clickable when viewed on Instagram, as you can see in the following image.

Adding a shoppable link to an Instagram post

However, when you embed the shoppable feed on your WordPress website, these links do become clickable. In this way, an Instagram shoppable feed encourages the people who visit your website to look at specific products.

Any likes and comments you get on those posts can also act as social proof, and encourage people to click on the product’s link.

As you post new shoppable images to Instagram, they’ll appear on your site automatically, so visitors will always see the latest posts without you having to add them manually.

If visitors like what they see, they may even decide to follow you on Instagram. This can get you more followers, and gives you another way to promote directly to that person.

Even better, since these shoppable links appear on your website, you have complete control over them. This means you don’t have to follow Instagram’s strict shoppable policies, or set up a Facebook product catalog.

With that being said, let’s see how you can easily add Instagram shoppable images to your WordPress website using Smash Balloon Instagram Pro.

Creating a Shoppable Feed on Instagram

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

Smash Balloon has a shoppable feature that allows you to link each image to a URL inside the plugin settings. With this feature enabled, visitors can click on a shoppable image on your website, and its link will open in a new tab.

These links won’t appear on Instagram.

Another option is adding the link to your Instagram captions. These links will show up on Instagram, but they won’t be clickable.

Smash Balloon's lightbox popup

However, these links will be clickable on your WordPress website. If you want to use this method, then you’ll need to spend some time adding a URL to each shoppable image on your Instagram account.

If you’re planning to use Smash Balloon’s shoppable feature, then you can skip this step as we’ll be adding each link inside the plugin’s settings.

How to Install an Instagram Photos Plugin With Shoppable Support

The best way to add Instagram shoppable images in WordPress is by using Smash Balloon Instagram Pro.

A shoppable Instagram feed, created using Smash Balloon

In this guide, we’ll be using the premium version of Smash Balloon as it has the advanced features you need to add shoppable images in WordPress. However, there’s also a free version that allows you to embed Instagram in WordPress.

Before getting started, you’ll need to connect your Instagram account to a Facebook page. If you have a personal Instagram account, then you may also want to turn it into a business account as this allows Smash Balloon to show your Instagram bio and header automatically.

When you’re ready, go ahead and install and activate the Smash Balloon Instagram Pro plugin. For more details, see our guide on how to install a WordPress plugin.

Upon activation, head over to Instagram Feed » Settings and enter your license key into the ‘License Key’ field.

Activating the Instagram Feed Pro plugin for WordPress

You’ll find this information under your account on the Smash Balloon website.

After entering the key, click on the ‘Activate’ button.

How to Connect an Instagram Account to WordPress

After activating the plugin, your first task is connecting your Instagram account to WordPress. Simply go to Instagram Feed » Settings and then click on ‘Add New.’

How to create a new shoppable Instagram feed

With Instagram Feed pro, you can create feeds from tagged posts and hashtags, or even create a social wall with content from lots of different social media websites.

We want to show shoppable images from our Instagram timeline, so simply select ‘User Timeline’ and then click on ‘Next.’

Creating a shoppable Instagram feed in WordPress

Now, choose the Instagram account where you’ll get the shoppable images from.

To get started, click on the ‘Add Source’ button.

Adding a source for a shoppable Instagram feed

After that, choose whether you want to show shoppable images from a personal or business Instagram account.

If you check the box next to ‘Personal’ then Smash Balloon won’t include the Instagram avatar and bio in your header by default. However, you can always add the Instagram avatar and bio manually in the plugin’s settings.

Linking a persona or business Instagram account to WordPress

After choosing ‘Personal’ or ‘Business,’ click on ‘Login with Facebook.’

You can now select the Instagram account that you want to feature on your WordPress website, and click on ‘Next.’

Selecting the shoppable Instagram source

After that, check the box next to the Facebook page that’s linked to the Instagram account with your shoppable images.

Once you’ve done that, click on the ‘Next’ button.

Selecting the Facebook page you want to use

You’ll now see a popup with all the information Instagram Feed Pro will have access to and the actions it can perform.

To restrict the plugin’s access to your Instagram account, simply click any of the switches to turn it from ‘Yes’ to ‘No.’ Just be aware that this may affect the photos that you can show on your WordPress blog or website.

With that in mind, we recommend leaving all the switches enabled. When you’re happy with the settings, click on ‘Done.’

Changing the information that Smash Balloon can access

You’ll now see a popup with the Instagram account you just added to your website.

Simply check the box next to that account and then click on ‘Add.’

Adding a shoppable image source to a WordPress website

Instagram Feed Pro will now take you back to the Instagram Feeds » All Feeds screen.

To create a feed, just check the box next to the Instagram account that you want to use. Then, click on ‘Next.’

How to create a shoppable Instagram feed

The plugin will now create an Instagram photo feed that you can add to any page, post, or widget-ready area.

However, before you can show shoppable images there are a few extra settings to configure.

How to Enable Smash Balloon’s Shoppable Feature (Optional)

As we already mentioned, there are two ways to make your Instagram photo feed shoppable. If you’ve added the URLs to your captions on Instagram, then simply skip to the next step.

Another option is to open shoppable links in a new tab as soon as the visitor clicks on a post. To do this, you’ll need to enable Smash Balloon’s shoppable feature.

To start, select the ‘Settings’ tab and then click on ‘Shoppable Feed.’

How to create a shoppable Instagram feed for your online store

On this screen, go ahead and toggle the ‘Enable’ slider so that it turns blue.

Smash Balloon will now show an ‘Add’ button on every photo or video in your Instagram feed.

How to add shoppable links to a WooCommerce site or e-commerce store

Simply find the first post that you want to make shoppable, and click on its ‘Add’ button.

You can now type the product or service’s URL into the ‘Product Link’ field and click on ‘Add.’

How to add a shoppable link to an Instagram post

Now, clicking on this photo will open the linked URL in a new tab.

Simply repeat these steps to make every image shoppable.

If you need to change a post’s URL at any point, then just hover your mouse over it and click on ‘Update.’

Changing the shoppable links in an Instagram feed

Once you’ve added all your links, don’t forget to click on the ‘Save’ button.

How to Filter Your Shoppable Instagram Feed

By default, Smash Balloon shows all the images and videos from your Instagram account. However, since we’re creating a shoppable feed you may want to filter your posts, and only show photos that link to a product or service.

This can help shoppers find products to buy, without getting distracted by other photos and videos in your Instagram feed.

With Smash Balloon, it’s easy to filter Instagram posts based on their captions. You can simply add a keyword or hashtag to your shoppable images on Instagram, and then create a matching filter in Smash Balloon.

For example, in the following image we’re using the #ordernow hashtag for all the images we want to make shoppable.

Filtering a shoppable Instagram feed by hashtag

To create a filter in Smash Balloon, select the ‘Settings’ tab.

Then, go ahead and click on ‘Filters and Moderation.’

Filtering shoppable Instagram photos and videos using a hashtag

In the ‘Only show posts containing’ box, type in the hashtags or keywords that you want to use in the filter.

If you want to use multiple words in the filter, then simply separate each hashtag or keyword with a comma.

Adding a filter to a shoppable Instagram feed

When you’re happy with how the filter is set up, click on the ‘Save’ button.

Just be aware that the preview won’t update straight away, so you’ll need to refresh the page to see the filter in action.

A filtered shoppable Instagram feed

How to Customize Your Shoppable Instagram Feed

When you’re happy with the photos and videos that appear in your shoppable feed, you may want to change how the feed looks.

To customize your shoppable Instagram feed, simply click on the ‘Customize’ tab. On the left-hand side are all the settings you can use to change how the shoppable feed looks.

How to customize your shoppable Instagram feed

Most of these settings are self-explanatory, but we’ll quickly cover some key areas that can help you get more sales.

Let’s start at the top, by selecting ‘Feed Layout.’ Here, you can choose different layouts for your shoppable feed, such as carousel and highlight.

Adding Instagram shoppable images to WordPress

As you make changes, the preview will update automatically so you can try different settings to see what looks the best.

Depending on the layout, you’ll get some extra settings that you can use to fine-tune your feed. For example if you choose ‘Highlight’ then you can tell Smash Balloon to highlight posts based on a pattern, post ID, or a specific hashtag. This is great for highlighting your most popular products.

Showing Instagram shoppable images in a highlighted layout with Smash Balloon

By 2025, it’s estimated that US consumers will spend $710 billion every year shopping on their mobile devices. With that in mind, you’ll want to make sure the shoppable Instagram feed looks just as good on smartphones and tablets, as it does on desktops.

By default, Smash Balloon will show the same number of photos on desktop computers and mobile devices.

You can preview how the shoppable feed will look on desktop computers, tablets, and smartphones using the row of buttons in the upper-right corner.

Creating a mobile-friendly layout for an e-Commerce site

You can show fewer shoppable photos on mobile devices by changing the settings in the ‘Number of Posts’ and ‘Columns’ sections.

After making any changes, click on the ‘Customize’ link. This will take you back to the main Smash Balloon editor, ready for you to explore the next option, which is ‘Color Scheme.’

Changing the color scheme of a shoppable Instagram feed

By default, Smash Balloon uses a color scheme inherited from your WordPress theme, but it also has ‘Light’ and ‘Dark’ themes that you may want to use for the shoppable feed instead.

Another option is creating your own color scheme by selecting ‘Custom.’ Then, simply use the controls to change the background color, change the text color in WordPress, and more.

Changing the color scheme for your Instagram shoppable feed

By default, Smash Balloon adds a header to the shoppable feed, which is your profile picture and the name of your page.

To change how this section looks, click on ‘Header’ in the left-hand menu and then use the settings to change the size of your header, add Instagram bio text, and more.

Customizing the header for an embedded Instagram feed

You can also add a different bio. For example, you might encourage people to buy your products, or offer visitors an exclusive coupon code.

For more information on creating these codes, please see our expert pick of the best WordPress coupon code plugins for your online store.

To create a unique Instagram bio, simply type into the ‘Add custom bio’ box.

How to add Instagram shoppable images in WordPress

With that done, click on ‘Customize’ to return to the main Smash Balloon editor.

Then, select ‘Posts.’

How to customize individual Instagram posts in WordPress

This takes you to a screen that has a few different options.

You can look through these settings and make any changes you want, but we’re going to focus on ‘Caption.’

Customizing the Instagram captions

If you added shoppable links to your captions, then it’s important to make the text stand out. For example, you might make the caption bigger.

You might even use a different color for the caption.

Adding a style to a shoppable Instagram caption

With that done, click on ‘Posts’ to go back to the previous screen.

Here, you’ll also see a ‘Hover State’ option, which is the overlay that Smash Balloon adds to a post when you hover over it.

Adding a hover state to a shoppable Instagram feed

This allows visitors to see any links in your captions without opening that Instagram post first.

On this screen, you can use the settings to create an eye-catching colored overlay.

How to create a custom hover state for an Instagram photo and video feed

After selecting ‘Hover State’ you’ll be able to change the background color and text color that appears when you hover over each post.

Under ‘Information to display,’ you’ll see all the different information that Smash Balloon can show as part of the overlay. Simply check the box next to each piece of information that you want to show.

Smash Balloon's hover state settings

If the caption contains shoppable links, then make sure you leave ‘Caption’ enabled.

When you’re happy with your changes, click on ‘Customize’ to return to the main Smash Balloon editor screen. You can now select the next option, which is ‘Load More Button.’

Smash Ballon's Load More button settings

By default, Smash Balloon adds a ‘Load More’ button to the bottom of your Instagram feed so visitors can scroll through your shoppable posts.

Here, you can change the button’s background color, text color, and hover state.

You can also add your own messaging to the button by typing into the ‘Text’ field.

How to add a load more button to a shoppable Instagram feed

While we recommend leaving the ‘Load More’ button enabled to get more sales, you can remove it. For example, you might encourage people to visit your Instagram page by limiting the number of photos they can see on your site.

To remove the button, simply click on the ‘Enable’ slider to turn it from blue to grey.

How to remove the Load More button from a social media photo feed in WordPress

If shoppers like what they see, they may decide to follow you on Instagram using the ‘Follow on Instagram’ button that appears below the shoppable feed.

Since it’s such an important button, you may want to help it stand out by selecting ‘Follow Button’ from the main Smash Balloon editor screen.

Adding a follow button to a shoppable Instagram feed

Here, you can change the button’s background color, hover state, and text color.

You may also replace the default ‘Follow on Instagram’ text with your own messaging.

How to get more followers with a Follow button

As always, when you’re finished with these settings, click on ‘Customize’ to return to the main editor screen.

If you’ve enabled the Smash Balloon shoppable feature, then clicking on any post in the Instagram feed will open a new tab and take them straight to the linked product page.

However, if you haven’t enabled the shoppable feature then you may want to take a look at Smash Balloon’s lightbox feature.

This feature allows visitors to open the image or video in a lightbox popup, without leaving your WordPress website. They can then click on any shoppable links in the captions.

Smash Ballon's Instagram lightbox popup

To enable or disable the lightbox, simply select ‘Lightbox’ from the left-hand menu.

Here, you can remove or add this feature using the ‘Enable’ slider.

How to enable or disable the Instagram lightbox popup

You can also change how many comments Smash Balloon will show in the lightbox. Lots of positive comments can be a powerful form of social proof, which will often help you sell more products and services.

However, they can also be distracting so you may want to type a maximum number into the ‘No. of comments’ box.

How to limit the number of comments in a shoppable Instagram feed

Another option is to hide comments completely, by clicking on the ‘Comments’ toggle.

When you’re happy with how the Instagram feed looks, don’t forget to click on ‘Save’ to store your changes. You’re now ready to add the shoppable Instagram feed to your website.

How to Embed Instagram Feed in WordPress

You can add the shoppable feed to your website using a block, widget, or shortcode.

If you’ve created more than one feed using the Smash Balloon plugin, then you’ll need to know the feed’s code if you’re going to use a widget or block.

To get this code, go to Instagram Feed » All Feeds and then copy the value in the ‘Shortcode’ column.

The code for a shoppable Instagram feed

If you want to embed the Instagram feed in a page or post, then we recommend using the Instagram Feed block.

Just open the page or post where you want to embed your shoppable photo and video feed. Then, click on the ‘+’ icon to add a new block and start typing ‘Instagram Feed.’

When the right block appears, click to add it to the page or post.

The Instagram Feed WordPress block

The block will show one of your Smash Balloon feeds by default. If you want to show a different Instagram feed instead, then find ‘Shortcode Settings’ in the right-hand menu.

Here, simply add the shortcode and then click on ‘Apply Changes.’

Adding a shoppable Instagram feed to a page or post

The block will now show all the photos and videos from your Instagram feed. Just publish or update the page to make the feed live on your website.

Another option is to add the feed to any widget-ready area, such as the sidebar or similar section. This allows visitors to shop using your Instagram feed from any page of your site.

Simply go to Appearance » Widgets in the WordPress dashboard and then click on the blue ‘+’ button.

Adding a shoppable feed to any widget-ready area

In the search bar, type in ‘Instagram Feed’ and select the right widget when it appears.

Just be aware that WordPress has a built-in Instagram widget, so make sure you choose the one that shows the official Instagram logo.

Adding a shoppable Instagram widget to WordPress

Next, simply drag the widget onto the area where you want to show the shoppable Instagram feed, such as the sidebar or similar section.

The widget will automatically show one of the feeds you created using Smash Balloon. If this isn’t the shoppable Instagram feed you just created, then type the feed’s code into the ‘Shortcode Settings’ box.

After that, click on ‘Apply Changes.’

You can now make the widget live by clicking on the ‘Update’ button. For more information, please see our step-by-step guide on how to add and use widgets in WordPress.

Another option is embedding the Instagram feed on any page, post, or widget-ready area using a shortcode.

For help placing the shortcode, please see our guide on how to add a shortcode.

Finally, if you’re using a block-enabled theme, then you can use the full-site editor to add the Instagram Feed block anywhere on your website.

In your dashboard, simply go to Appearance » Editor.

How to add a shoppable Instagram feed to your WordPress theme

By default, the full-site editor will show the theme’s home template. If you want to add the shoppable feed to a different template, then click on the arrow next to ‘Home.’

You can then choose any design from the dropdown, such as the footer template.

Selecting a different template in the WordPress FSE full-site editor

If you don’t see the template in the list, select ‘Browse all templates.’

The full-site editor will now show a list of all the templates you can edit. Simply click on the template where you want to show the shoppable Instagram feed.

Choosing a WordPress template in the full-site editor (FSE)

After choosing a template, just hover your mouse over the area where you want to add the shoppable Instagram feed.

Then, click on the ‘+’ button.

Adding a block to your WordPress theme using full-site editing (FSE)

After that, start typing in ‘Instagram Feed.’

When the right block appears, click to add it to the template.

Adding a Smash Balloon instagram block to a WordPress theme

As always, Smash Balloon will show a feed by default. You can change this feed by adding a shortcode following the same process described above.

We hope this article helped you learn how to add Instagram shoppable images in WordPress. You may also want to see our guide on how to create a free business email address, or see our expert pick of the best WooCommerce plugins for your store.

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.

The post How to Add Instagram Shoppable Images in WordPress first appeared on WPBeginner.

Want to receive personalized offers?

Allow notifications to get real-time updates about your shopping cart and who knows, you may even receive a sweet discount code 😊

Maybe later