Usage Docs

Getting Started

Your Instagram feed will be created as an HTML tag that can be inserted anywhere in your Shopify store's theme. This post will walk you through the steps to get your Instagram feed up and running on your store.

In order to add a feed to your store you will need some working knowledge of HTML, and an account that gives you access to edit your Shopify pages and theme.

Get An Instagram Token

In order to connect your Instagram account to your Shopify store, you will need to generate an access token to grant Instagram Multifeeder access to your account. The access token will be used to grab your Instagram feed and display it on your site. Each Instagram feed you would like to include on your store will need its own Instagram access token. Follow the steps below to generate an Instagram access token to include on your store:

1. Sign into your Instagram account as a developer

To generate an access token, you must first register as an Instagram developer. Create an account or log into your Instagram account with your regular username and password through the Instagram developer page. Fill out the Developer Signup form with your website, phone number, and what you want to build with the API. You can use your shopify store URL here, and say that you want to put your Instagram feed on your website. Accept the API Terms of Use and Brand Guidelines, and click the 'Sign up' button. You will be redirected to the Developer Documentation page.

2. Register a new Client ID

On the Developer Documentation page, click the 'Register Your Application' button. You will be taken to the Manage Clients page, where you should click the 'Register a New Client' button. You will be asked to fill out a form for the new client ID, with your Application Name, description, Website URL, and valid redirect URI. Choose any appropriate name for your app, such as 'My Store Feed', and any short description. We use elfsight to create Instagram tokens, so the website URL and valid redirect URI must be https://elfsight.com/service/generate-instagram-access-token/. Click the Register button once you have finished filling out the form, and you will be redirected to a page which will show you your Client ID and Client Secret.

3. Generate Instagram Access Token using your Client ID and Client Secret

Copy the Client ID and Client Secret that you have registered and paste it in this online Instagram Access Token generator, here. Click the ‘Get Instagram Access Token’ button and you will be taken to a page where you will Authorize your app to access your profile photos.

On the next page, copy the Instagram access token that has been generated for you. You are now ready to add your Instagram feed for your store!

Note: Your instagram access token only allows the Instagram Multifeed app to access and display your photos. It does not grant any access to your personal data or allow for making any action in your name.

Adding a Feed

To create your first feed, click on the '+ Add Feed' button on the app's main page.

IMAGE HERE

Enter the name of your feed, a description, and the Instagram access token and click the 'Create Feed' button. The name and description of your feed will not be displayed in your store, rather it is simply for you to be able to differentiate between feeds.

Once you have created a feed, you will be redirected to the Edit Feed page.

Editing a Feed

From the Edit Feed page, you can change the instagram access token, see the feed's HTML tag to copy and insert in your Shopify store theme, and configure your feed.

[photo of Edit feed UI here]

Make sure you click the 'Enable' button for your feed to show on your store, as all feeds are disabled by default.

You may also wish to include an exclusion hashtag. Posts marked with these hashtags will not be shown in the feed on your store.

Visual Settings

You can customize the appearance of your feed in the Visual Settings section on the Edit Feeds page.

[photo of Visual settings UI here]

Section padding determines how much space your feed puts between it and other content in your store, also in pixels. A smaller section padding value indicates less space between other content and the feed, with zero being no space at all, and a larger section padding value indicates more space. Likewise, the Image Padding parameter determines how much space there is between respective photos in your feed.

You can also change the background color of your feed, which will show behind your photos and extend to the minimum section height you've specified. The default background color for feeds is transparent. You may choose a color from the color picker by clicking the field and dragging the slider to the color you desire, or you may paste an rgba value into the field.

The slider at the bottom of the Visual Settings section determines how many pictures from your feed to show, from two to twelve. Pictures will be shown in chronological order, as they appear on your profile on Instagram.

Once you have configured the settings of the feed to your liking, click the Save button to update your feed. To return to the main page of the app, click 'Feeds' in the top left hand corner. You will now see a list of your feeds. If you wish to edit or delete your feed at any time, navigate to the Feed List page and click the 'Edit' button next to the feed you wish to edit or delete.

Paste the HTML Tag

Either you or your developer should open up your store's theme code and paste the HTML tag associated with your feed found on the Edit Feed page. The HTML tag can be placed anywhere within your code. Each instagram feed will have its own unique HTML tag, allowing you to add as many as you like in your store.

To add the HTML tag to your shop theme, log into your development store. On the sidebar, click ‘Online Store’ under the ‘Sales Channels’ section and select ‘Themes’. This will bring you to your store’s theme page, and show you the current theme. Click the ‘Customize’ button to open up the theme customization menu.

In the customize theme menu you will see a preview of your shop’s theme and customization options. Press the ‘Theme actions’ button in the bottom of the sidebar. Select Edit code, which will bring you to the theme’s code editor.

Create a new section in ‘Sections’ in the sidebar. Give it a name, and copy your feed’s HTML tag into it, along with any theme-specific code used to include it in your theme. For example, your section file might look like this:


                            <div id="feed-37d5fa80-75a3-11e9-ba60-05aa453c3271" class="instafeed-wrapper"></div>
                            
                            {% schema %}
                                {
                                    "name": "Section name",
                                    "settings": []
                                }
                            {% endschema %}
                            {% stylesheet %}
                            {% endstylesheet %}
                            {% javascript %}
                            {% endjavascript %}

Be sure to save when you are done, and then go to your theme.liquid under ‘Layouts’ in the sidebar. You may insert your instagram-tester.liquid reference anywhere in your theme. In the example below, the Instagram feed will appear just below the header:

Save your theme.liquid after you’ve placed your Instagram feed in the location of your choosing.

Congratulations! You should now see your Instagram feed(s) on your store.