Menu Close

Get Support From ShopWired Close

All systems fully operational

Subscribe To Updates
Prefer To Live Chat? Chat directly with ShopWired support Available 9.00am to 6.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 feed on your website which shows all of the posts you create in your Instagram account:

Follow the instructions below to connect your accounts and to place code in your live theme’s files in order to display the feed.

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.

Please note!

If you manage more than one Instagram account through the same Instagram login, you will not be able to select the account you want to display a feed from due to limitations in this functionality from Instagram (who have removed this feature for new accounts). Instead you should split the account into separate logins before proceeding so that you can connect the desired account to ShopWired.

• Connecting your Instagram account
• Display settings
• Adding the code to your live theme - Step 1
• Adding the code to your live theme - Step 2


Connecting your Instagram account

Once you have installed the app within your account select APPs > Instagram from the menu to connect your Instagram account to your ShopWired account.

In the ‘Connecting Your Instagram Account’ section select Connect to Instagram:

A new tab will then open where you should login to your Instagram account and select to allow the app access to your account.

You will then be redirected back to the app configuration page in your ShopWired account.


If, at any point, you would like to disconnect your Instagram account from the app, then open the 'Connecting Your Instagram Account' section and select disconnect.


Display settings

Use the ‘Display Settings’ section to customise certain aspects of the feed’s appearance on your website:

Your Embed ID is provided for use when adding code to your theme’s files. This is explained in detail in the next section of this guide.

Number of posts per row - use this setting to determine how many of your Instagram posts should be displayed on each row of the feed at any one time. The default setting is 5 with a maximum of 6 allowed.

Number of rows - use this setting to determine how many rows of images your Instagram feed should contain. The default is 2, but you can change it to however many you see fit.

When the number of posts exceeds the numbers set by the number of rows and number of posts in a row the feed will contain arrows for users to scroll between pages of rows so that all of the images on your Instagram account will be contained within the feed.

Please note!

When configuring these settings, please note that the total number of posts that can be displayed is limited to 3 pages.

Amount of spacing between posts (px) - Use this setting to determine how much space you would like there to be between posts in the feed. Each post in the Instagram feed is spaced out by a certain number of pixels (units of measurement in web design). Alter the number to create more space or to reduce the space between the posts. Posts can only be spaced out by a maximum of 30 pixels.


Adding the code to your live theme - Step 1

Warning!

Adding this code to a theme only works for the particular theme which you are editing. This means if you change your theme at any point, you would need to add this code to the new theme's files in order for it to work again.

Once you have connected your Instagram account you will need to add some code to your live theme in order for the feed to appear on your website. There are two steps to adding this code. The first step is universal, but the second step depends upon where you want the feed to appear on your website.

Helpful tip!

If you make a mistake while editing your theme's code, you can revert to a previous version of the file to undo all of the changes you made.


Step 1 - Adding code to the master.twig file

The first step to adding the code to your theme's files is to place some code in the master.twig file of your live theme. This code needs adding to your theme’s files no matter where on your website you want your Instagram feed to be displayed:

First, select Themes > Installed Themes from the menu.

Select Page Editor on your live theme to edit the theme’s files.

In the page editor’s menu select Views > Templates > master.twig.

Locate the closing </head> tag:

Enter a blank line on the line just above the closing </head> tag. Then paste the following code on that line according to which version theme you are using:

If you are using a version 3 or higher theme
<link rel="stylesheet" href="https://hq-apps-sw.s3.eu-west-1.amazonaws.com/instagram/v3/instagramApp.css">

If you are using a version 2 or lower theme
<link rel="stylesheet" href="https://hq-apps-sw.s3.eu-west-1.amazonaws.com/instagram/v2/instagramApp.css">

This should look something like this:

Next, locate within the code the closing </body> tag:

Enter a blank line just above this tag and then paste the following code there according to which version theme you are using:

If you are using a version 3 or higher theme
<script async src="//platform.instagram.com/en_US/embeds.js"></script> <script src="https://hq-apps-sw.s3.eu-west-1.amazonaws.com/instagram/v3/renderInstagramPosts.js"></script>

If you are using a version 2 or lower theme
<script async src="//platform.instagram.com/en_US/embeds.js"></script> <script src="https://hq-apps-sw.s3.eu-west-1.amazonaws.com/instagram/v2/renderInstagramPosts.js"></script>

This should look something like this:

Then save your changes.


Adding the code to your live theme - Step 2

Once you have completed step 1, where you will add the final code for step 2 will depend on where on your website you want your Instagram feed to display. If you want the feed to display on just your homepage, follow option 1. If you want the feed to display on all of the pages on your website, follow option 2:


Option 1: Adding the code to just your homepage

To add your Instagram feed to just the homepage of your website you will need to access the home.twig file of your theme’s code. To access this file in the page editor of your live theme select Views > Master Pages > home.twig.

Once you have accessed the file there are two steps of code to add:


Step 1

To display the feed the home.twig file will need to include a block InstagramFeed element. It is likely that this code will already exist towards the bottom of the file. To see if the code already exists, search through the code for a block that begins with {% block instagramFeed %} and ends with {% endblock %}.

If the code already exists in the file
If the code already exists in your theme's file, it is likely to contain other code between the opening and closing tags as in this example:

Remove any code that exists between {% block instagramFeed %} and {% endblock %} and replace it with this code:

<h2>The latest from Instagram</h2>
<div id="instagramContent" name="EMBED_ID_HERE​"></div>

If the code does not already exist in the file
If the block Instagramfeed element doesn't already exist within your theme's file, you will need to add it in yourself. Add the following code at the end of the file to ensure that you don't accidentally place it within an already existing element:

{% block instagramFeed %}
<h2>The latest from Instagram</h2>
<div id="instagramContent" name="EMBED_ID_HERE​"></div>
{% endblock %}

For whichever bit of code you have added to the file you can replace The latest from Instagram with the text that you want to appear above your Instagram feed. If you don't want this header to appear at all, remove the line of code from <h2> to </h2>

Additionally, EMBED_ID_HERE needs to be replaced with your own Embed ID which can be found in the ‘Display Settings’ section of the Instagram app page:

Once you have completed step 1 you should have a block of code within the file which looks like this:


Step 2

Once you have added the code in step 1 scroll to the top of the home.twig file and find the following code (the code in your file might not look exactly like this, but it will be similar):

Within the beginning <div id="content" class="content homepage"> and closing </div> tags enter the following code:

{{ block('instagramFeed') }}

Where within the <div> tags you should enter the code depends upon where on the page you want the feed to display. In the above example, if you wanted the feed to display between your featured categories and featured products, you would enter the code on a line between {{ block('featuredCategories') }} and {{ block('featuredProducts_2') }}, as in this example:


Once you have completed both steps above save your changes and check your website to make sure the feed is displaying as it should.


Option 2: Adding the code to all pages of your website

To add your Instagram feed to all of the pages on your website you will need to add some code to the footer.twig file of your theme’s code. This will place the feed at the bottom of every page.

To access the footer.twig file in the page editor of your live theme select Views > Partials > footer.twig.

The following code will need to be placed within the file:

<h2>The latest from Instagram</h2>
<div id="instagramContent" name="EMBED_ID_HERE​"></div>

(The above code assumes that you would like to have a text header appear above your Instagram feed. If you don't want this text header, remove the first line of code from <h2> to </h2>.)

Replace The latest from Instagram with the text that you want to appear above your Instagram feed.

EMBED_ID_HERE needs to be replaced with your own Embed ID which can be found in the ‘Display Settings’ section of the Instagram app page:

The code needs to be placed towards the beginning of the file, so that it appears above the actual footer of your website.

Locate the first <footer> tag:

Place the code directly after this tag, and before the first instance of <div> code:

Then save your changes and check your website to make sure the feed is displaying as it should.