Menu Close

Get Support From ShopWired Close

All systems fully operational

Subscribe To Updates
Prefer To Live Chat? Chat directly with ShopWired support Available from 9.00am to 10.00pm Monday to Friday Quickest response time
Send A Message
Response within 24 hours

Menu Close

Menu

Instagram

ShopWired’s Instagram app allows you to connect your Instagram account to your ShopWired account and create a customisable feed of your Instagram posts that can then be displayed on your website.

To connect your accounts you will first need to install the app. To do this select APPs > Available APPs from the menu. Find and select the 'Instagram Widget' app and select INSTALL THIS APP.

• Connecting to Instagram
• Feed Configuration
• Adding code to your theme - Part 1
• Adding code to your theme - Part 2
• Product Tagging


Connecting to Instagram

In order to connect your Instagram account to the app you must be using an Instagram Business account. For more information about Instagram Business accounts and for instructions on how to convert your current Instagram account to an Instagram Business account click here.

To connect to Instagram, firstly, in the box under 'Facebook Page Name' enter the name of the Facebook Page that is associated with the Instagram account that you would like to connect to the app. Then select change.

Important!

The name you enter must be an exact match for the Facebook Page that is connected to the Instagram Business account. This includes adding any spaces that may exist in your Page name. Please be careful to not add a space to the end of your business page name as this will stop the app from allowing you to connect your accounts.

Once you have entered the name of the Facebook Page, select the log in with Facebook button. If you are not already logged into a Facebook account, you will be asked to log in. You should ensure that the Facebook account you log in to owns or has been granted access to manage both the Facebook Page and Instagram Business account that you are trying to connect.

Follow the prompts to grant the app permission to access the Facebook Page, Business and Instagram Business account that you want to connect.

Once you have followed the prompts within Facebook, you will be returned to the app page. If the app was able to connect to the Instagram account, you will see a success message as well as details about the connected account:

Once you have connected your account to the app, you can select to retrieve your posts. To do this select get posts. In the popup that appears, select if you want the app to retrieve all of the posts you have created or all of the posts that you have been tagged in on Instagram:

If you plan to use multiple feeds to display both types of posts, you should go through the process for each post type.

Depending on how many posts there are to retrieve, this process could take some time. You will receive an email to the email address registered with your ShopWired account once the process has been completed.


Feed Configuration

With the app you can display three different feeds of Instagram posts on your website. To configure the different feeds open the 'Feed Configuration' section and select either 'Instgram Feed 1', 'Instagram Feed 2' or 'Instgaram Feed 3'.

Then configure the following the settings:

Feed Title - If you would like a title to display above the feed on your website, then enter it here.

Feed Content - Use the dropdown to determine which type of posts you would like to display in the feed. Your choices are:
• All my posts - This will display all of your Instagram posts.
• Posts with specific hashtags - Use this option to display only your posts that have been tagged with specific hashtags. Once you have selected this option, you should enter the hashtags in the next field.
• Posts I have been tagged in on Instagram - This option will display the posts you have been tagged in on Instagram. This is a good option if your customers tag you in posts of them using/wearing your products.

Post Scroll Event - Select what you would like to happen when a visitor to your website scrolls over one of the posts in your feed. Your choices are:
• Do nothing
• Show number of likes
• Show post description
• Show number of likes and post description

Post Click Event - Select what you would like to happen when a visitor to your website clicks on one of the posts in your feed. Your choices are:
• Do nothing
• Open popup
• Go to Instagram

Post Spacing - Select how much spacing should show between the posts in your feed.

Post Layout - Select if you would like your posts to display in a grid or in a slider. Once you have chosen, you should then configure the settings for how many posts should appear in each column (and row if selecting grid) for different sized devices.


Adding code to your theme - Part 1

Please note!

The following instructions are suitable for every version 4 and version 5 theme except for Vivify Version 5. If you are using Vivify Version 5, please contact us.

If you are using an older version theme, we recommend you contact our coding partners, Codingmasters, for help.

Follow the steps below to add the code to your theme to display your feed on your website.

Step 1

Navigate to the page editor settings of your theme. This can be accessed by selecting Themes > Installed Themes from the left menu. Then select Page Editor for the theme that you want to add the code to (this is likely to be your live theme).

Step 2

Locate your master.twig file. For most themes this will be located in Views > Templates > master.twig.

Step 3

Within the master.twig file is a block of code that begins with <head> and ends with </head>. Locate the closing </head> tag. This will be towards the top of the file:

Create a new line above the </head> tag. On the new line paste the following code:

<link rel='stylesheet' href='https://hq-apps-sw.s3.eu-west-1.amazonaws.com/instagram-app/live/app.css'>

This should look like this:

Step 4

Within the same block of code, between <head> and </head>, find the line that says {% block stylesheets %}:

Within the {% block stylesheets %} block, find the following two lines of code:

{{ html.stylesheet('//cdn.jsdelivr.net/npm/slick-carousel@1.6.0/slick/slick.css') }}
{{ html.stylesheet('//cdn.jsdelivr.net/npm/slick-carousel@1.6.0/slick/slick-theme.min.css') }}

Replace those two lines of code with the following code:

{{ html.stylesheet('//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css') }} 
{{ html.stylesheet('//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css') }}

This should look like this:

Step 5

Still within the master.twig file, find the block of code that begins with {% block scripts %} (this will be located within the <body> and </body> tags).

Within this block find the line that begins with {{ html.script('//cdn.jsdelivr.net/combine/npm/.... This is usually located on the line directly after {% block scripts %}:

Within this line find this short bit of code slick-carousel@1.6.0,npm (the numbers after the @ sign might be different in your file, but this would still be the correct bit of code):

Replace this bit of code with the following:

slick-carousel@1.8.1/slick/slick.js,npm

This should now look like this:

Step 6

At the bottom of the master.twig file, locate the closing </body> tag:

Create a new line before this tag. The code you should paste here will look like this:

<script src='https://hq-apps-sw.s3.eu-west-1.amazonaws.com/instagram-app/live/app.js' data-business-id='XXX' data-ig-feed-id='YYY' data-ig-feed-container-id='ZZZ'></script>

However, wherever you see 'XXX', 'YYY' or 'ZZZ' above you will need to replace these with the appropriate information for the feed you wish to use.

XXX should be replaced with the data business ID that is unique to your account and is assigned when you install the app. This can be obtained on the app configuration page in the 'Live Theme Codes' section:

YYY should be replaced with one of the following, depending on which feed you want to use: igfeed_01, igfeed_02 or igfeed_03.

ZZZ should be replaced with one of the following, depending on which feed you want to use: instagramPostsFeedOne, instagramPostsFeedTwo or instagramPostsFeedThree.

Step 7

Save your changes to the master.twig file.


Adding code to your theme - Part 2

Where you place the code for this step will depend on what version theme you are using and where on your website you want the feed to display. The code you should use is one of the following, depending on which feed you want to use:

<div id="instagramPostsFeedOne"></div>,
<div id="instagramPostsFeedTwo"></div> or
<div id="instagramPostsFeedThree"></div>


Footer of website - Version 4 and Version 5 instructions

These instructions will place the feed in the footer of your website, so that the feed is then visible on all pages of your website.

Step 1

Within the page editor for the same theme that you were editing in Part 1 of these instructions, locate the footer.twig file. For most themes this can be found in Views > Partials > footer.twig.

Step 2

Within the file, locate the <footer> tag (this might also look like this <footer class="...">):

Paste the above code that is related to the feed you want to use. This should look something like this:

Step 3

Save your changes to the footer.twig file.


In a section - Version 5 themes only

If you are using a version 5 theme, you can place your feed almost anywhere on your website through the use of a drag-and-drop section.

Within the theme editor, first navigate to where you want the feed to display. If you place the feed on a product or category page, be aware that this would place the feed on every product and category page. Once you have navigated to the correct page, select Add a new section from the left menu of the editor. From the options select 'Custom HTML'. In the box paste the code from above for the feed that you want to use.


Product Tagging

Using the 'Product Tagging' section of the app, you can tag your products on your Instagram posts so that users can be taken directly from your Instagram post to your website to purchase the product.

The list of products that can be added to your posts is retrieved from the Facebook Catalogue that is associated with the connected Facebook Page. To learn how to upload your products to your Facebook Catalogue click here.

In order to use this functionality, your Instagram Business account must have an Instagram Shop set up and be eligible for product tagging. In the 'Instagram Account' section of the app configuration page, you can see if your account is eligible for product tagging. To learn more about Instagram Shopping click here.

Important!

Eligibility for product tagging is determined by Instagram. The ShopWired support team cannot change your eligibility status.

In the 'Product Tagging' section you will see a list of your posts:

Select the tag icon under 'Tag Products' for the post you want to tag a product on. In the popup that appears search for the product by name or SKU code:

Place a tick in the box beside the product you want to tag and then select add. You will see a success message telling you the product has been added: