Notice: End-of-Life Announcement for all Shopify themes by Barrel > Read More

Close

How to Configure the Instagram Module

In the Mosaic theme, you can choose to feature an Instagram feed on your homepage. The instructions differ depending on what version of the theme you have. ​You can check which version of the theme you have by going to Customize Theme and then clicking on where it says “Mosaic” at the top, with the little down arrow next to it.

 


 

Version 1.1.0 and Up

In Versions 1.1.0 and up, our Mosaic theme allows you to showcases up to 10 of your most recent posts.

1. Go to https://instagram.com/developer. Make sure you are logged in to your Instagram account. (If you don’t have an Instagram account, you’ll need to create one.)

2. Click on the button that says Register your Application.

3. Then click on Register a New Client.

4. Fill out the Application Name, Description, Website URL, Valid redirect URL, and Contact Email fields. Here are some tips:

  • Application Name: This can be whatever name will help you remember what this Client ID is for, for example “Instagram Feed for my Shopify store.” It doesn’t really matter what you name it.
  • Description: Again, this is mostly to help you remember. Write whatever you like here.
  • Website URL: This should be the URL of your store.
  • Valid redirect URL: This should be the URL of your store as well.
  • Contact Email: Your email address, in case Instagram needs to email you about this Client ID.

5. Then click on the tab that says Security. Make sure that the options that say “Enforce signed requests” and “Disable implicit OAuth” are both unchecked.

6. Now click on the Register button! You should now see a screen like this:

Screen Shot 2017-02-28 at 10.25.33

7. Now you’re going to open a new tab in your browser and enter the following URL. You’ll need to replace “CLIENT_ID” with the Client ID that you see in Instagram, and “REDIRECT_URI” with the URL you entered in for your store.

https://instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&response_type=token

8. Once you’ve pressed enter, you should see a page like this:

Screen Shot 2017-02-28 at 10.28.56

Click on the “Authorize” button.

9. Once the page refreshes, you should see something like this in your browser URL field:

2017-02-28_1030

Copy the string of numbers and letters that appear after the equal sign.

9. This string of numbers and letters is your access token. Make sure you save it in a safe place.

10. And last but not least, input this access token into your theme using the “Instagram access token” setting. Save your settings!

 

That’s it!

 


 

Version 1.0.4 and Below

As of February 3, 2016, Instagram is updating its API. They will be rolling out changes over the next few months. As a result:

  • Mosaic version 1.0.5 (released on Feb. 5, 2016) does NOT include the Instagram module, due to the changes that Instagram is making. Later versions of the theme will also not include the Instagram module, until Instagram has finished rolling out all of its code changes.
  • Mosaic versions 1.0.4 and earlier included the Instagram module, but these will eventually stop working as the code becomes deprecated.

Once Instagram’s code changes are complete, we will release a new version of theme that includes an updated Instagram module. Any store owners that would like to have a functioning Instagram module in the Mosaic theme will need to update to this version of the theme.

In the Mosaic theme, you can choose to feature an Instagram feed on your homepage. You can choose to display images based on a hashtag or an Instagram account. Note that our theme will show the 5 most recent images from the hashtag or user account that you have chosen.

Displaying Content Based on a Hashtag

To display images tagged with a hashtag, you’ll need 2 things: the hashtag, and the Instagram Client ID.

1. Go to https://instagram.com/developer. Make sure you are logged in to your Instagram account. (If you don’t have an Instagram account, you’ll need to create one.)

2. Click on the button that says Register your Application.

3. Then click on Register a New Client.

4. Fill out the Application Name, Description, Website URL, Valid redirect URL, and Contact Email fields. Here are some tips:

  • Application Name: This can be whatever name will help you remember what this Client ID is for, for example “Instagram Feed for my Shopify store.” It doesn’t really matter what you name it.
  • Description: Again, this is mostly to help you remember. Write whatever you like here.
  • Website URL: This should be the URL of your store.
  • Valid redirect URL: This should be the URL of your store as well.
  • Contact Email: Your email address, in case Instagram needs to email you about this Client ID.
  • Make sure to fill in the captcha at the bottom as well.

Here’s an example of what this page might look like once you’ve filled in all these fields:

5. Now click on the tab that says Security. It should bring you to a screen that looks like this:

Make sure that the option that says “Enforce signed requests” is unchecked. If this option is checked, no images will appear in your store. As for the option that says “Disable implicit OAuth”: It shouldn’t matter whether this option is checked or unchecked.

6. Now click on the Register button. You should now see a box with a bunch of information in it. You want the field called Client ID. Here’s a screenshot:

2015-10-30_1507

Copy this number string of numbers and letters, and paste it into the “Instagram Client ID” field. This field can be found by going to your theme settings and then Homepage – Instagram Feed > Hashtag Requirements > Instagram Client ID.

7. Enter in the hashtag you’d like to use in the field called Instagram Hashtag. Don’t include the # sign!

8. Make sure you’ve chosen to display images based on “Hashtag.” This can be done in this same section of the theme settings near the top, under Display Options.

Voila! That should do it!

NOTE: If you ever need to change the hashtag, you can simply change the hashtag. You don’t need to change the Instagram Client ID. 🙂

Displaying Content Based on a User Account

To display images from a specific account, you’ll need 3 things: the username of the account, the user ID for that account, and an Instagram Access Token. (Note that you do not need to have personal access to an account in order to display content from it.)

1. Go to your theme settings, and then Homepage – Instagram Feed > User Requirements.

2. In the field called Instagram Username, enter the username for the Instagram account you’d like to show content from.

3. Now let’s enter the user ID for this account. To find the user ID, go to this site and enter the username. Copy and paste this number into the field called Instagram User ID.

4. Now let’s enter the Instagram Access Token. Go to this site and generate an access token. Copy that token into the field called Instagram Access Token.

5. Finally, make sure you’ve chosen to display images based on “User.” This can be done in this same section of the theme settings near the top, under Display Options.

Voila! You should be all set!

NOTE: If you ever need to change the account that you are pulling content from, all you need to do is change the Username and the User ID. You don’t need to change the Instagram Access Token. 🙂