Setting up the Shoppable Instagram Feed app

Having an online business means having an online presence, and what better way to engage your customers if not through your Instagram account. Sure, you can have links or buttons with your social media accounts, but what about a whole section just for your Instagram posts to catch your visitor's attention and even allow them to purchase the promoted products easily?

With an ever-growing number of people joining social media platforms like Instagram, it has definitely become a household name. Your customers will get a chance to see your Instagram posts and easily connect with you or choose to shop for some products that caught their eye.

Connecting to an Instagram account 🌐

The first thing first is to connect your Instagram account to the app's settings. This can be done in two ways, depending on how you like your account to be connected:

1. Directly using your Instagram account

• • Simple and quick connection
  • Number of Likes and Comments will not be available.
  • Your avatar should be manually uploaded.

2. Using Facebook Business Manager

• • Needs your Instagram account to be connected first to a Facebook Page
  • Number of Likes and Comments will be available
  • Avatar is displayed automatically.

Connecting an account managed by someone else

Vitals connects the Instagram account currently logged in in your browser. To connect a business, family, or coworker account, log out of your current Instagram account at instagram.com, or use a private/incognito window. Then log in to the Instagram account you want to connect.

In the Vitals admin, go to Instagram Feed → Settings. If an account is already connected, click Disconnect under Connected Instagram Account. Under Connect with, click Connect with Instagram. Only one Instagram account can be connected at a time.

If the account is an Instagram professional (Business) account connected to a Facebook Page, you can instead use Connect with Facebook through a Facebook profile that manages that Page. If Facebook selects the wrong account, use the Instagram connection method instead.

Checking that your feed is connected and displayed

In Instagram Feed → Settings, check Connected Instagram Account to make sure your account is connected and is not asking you to Reconnect.

Check the Position settings to see whether the feed is enabled on your home page or product pages. On Online Store 2.0 themes, the feed may have been added manually through Display manually → Go to Shopify Editor. Visit the relevant live storefront page to confirm that the feed is visible and includes recent posts.

If posts are missing, check the Posts tab: posts may be hidden, and new posts need to be shown manually when Auto publish new posts is turned off. New posts sync from Instagram about every 6 hours.

Customization

Here are a few ways you can customize the way your Shoppable Instagram Feed gallery looks:

1. Show the Instagram Feed on the Product Page - you can choose to show or hide the IG gallery from your product page and only have it visible on your homepage.

2. Show the Instagram Feed on the Homepage - This places the Instagram feed automatically near the end of the homepage.

   If you want a specific position on the page or you want to place it on other pages, use the editor instead.

3. Hide Like and Comment count - Enable this if you do not like the total count of the likes and comments to appear.
4. Feed Layout (individual for both Desktop and Mobile) - You can set the layout of your Instagram Feed differently between the Desktop layout and the Mobile layout for a more customized look.
5. Section Title & Subtitle - you can choose how your title and the text underneath it look to catch your visitors attention
6. Space Between Pictures - by default, there is no space between picture, but you can add some yourself if you wish your gallery to resemble the real Instagram one
7. Number of photos in total - you can choose how many posts (photos) are displayed in the gallery
8. Colors - you can customize the post hover color, as well as the title and subtitle colors to best match your store's design

Making the feed wider on desktop

In Instagram Feed → Settings, use the Feed maximum width slider in the Desktop layout card to set the feed width from 1000px to 2000px. Click Preview on the Desktop layout card to check the result.

If you do not see this slider, change Feed layout from Grid auto-layout to Grid (square), Grid (portrait), Slider (square), or Slider (portrait).

The feed cannot be wider than the section that contains it. If it is shown in the Vitals product end section, you can widen that section in Preferences → Custom code → Custom CSS with the following code. This changes the width of every Vitals widget in that section.

#vitals-end-section { max-width: 2000px !important; }

For a feed added as a theme editor app block, adjust the width in that theme section's settings. On mobile, the feed already fills its container width.