VA: Instagram Slider & Feed

Welcome to VA: Instagram Slider & Feed app

Congratulations on your installation of VA: Instagram Slider & Feed! This documentation consists of several parts and describes the installation, creation, and setting up of the VA: Instagram Slider & Feed app process.

We did our greatest to create this manual info to be presented in a very straightforward, simple manner. But if you have any questions that are beyond the scope of this documentation, please feel free to contact us via our email address: contact@etssoft.net

What is VA: Instagram Slider & Feed?

VA: Instagram Slider & Feed is a simple but effective solution to showcase all your Instagram photos and videos on your Shopify store. No coding knowledge is required, super easy to set up, this app can help you increase social engagement, therefore, raise your brand awareness.

Discover our app features through this introduction video:

VA: Instagram Slider & Feed gives your online store a stylist and modern Instagram section for people to explore your best products. With the shopping feature, you can tag featured products on your photos and videos and let people discover your items from everywhere on your Shopify store.

Our app can also help you effortlessly integrate your Instagram account into Shopify store. Within a few clicks, you can display an eye-catching Instagram photo and video block on your store to inspire your visitors and turn them into customers with your stunning Instagram photos & videos.

Get started

The first thing you need to do is connecting your Instagram account with your Shopify online store. You will need to enter a string of Instagram Access Token.

Move to the next step to learn how to get your Instagram Access Token.

After getting and entering your Instagram Access Token, please enter your Instagram display name and Instagram profile URL. Click “Save” to finish.

That’s all! Your Instagram account is now successfully connected with the Shopify store.

How to get Instagram Access Token

Starting in March 2020, Facebook requires users to create a Facebook app with Instagram Basic Display API to get a long-live Instagram Access Token. Follow our instructions on this section to get your own Instagram Access Token and paste it back on the VA: Instagram Slider & Feed app back-end configuration page.

You will need:

A Facebook account.
An Instagram account with media.

Step 1: Go to developers.facebook.com and log in with your Facebook account. Then click on “My Apps” link >> “Create app” button.

On “Create an app” screen, select “Other” option then click “Next“:

Select “Consumer” app type then click “Next“:

ALWAYS select the “Consumer” option even if you’re having an Instagram Business account. If you select “Business” option, you will not find “Instagram Basic Display” feature.

Enter your app name, then click on “Create App” button.

Complete the security check then click on “Submit” button.

Step 2: On “Add products to your app” page, find “Instagram Basic Display” and then click on “Set Up” button.

Scroll down and click on “Settings” link to be navigated to the “Basic settings” page.

Step 3:

(1) Enter the required information fields: app display name, namespace, app domain, the privacy policy URL, and terms of service URL.

(2) Upload your app icon, select a category for your app, and select “Yourself or your own business” app purpose.

(3) Click on “Save changes” button.

(4) Scroll down and click on “Add platform” button.

(5) Select “Website” platform.

(6) Enter your website URL then click on “Save changes” button.

Step 4:

(1) Navigate to “Instagram Basic Display” > “Basic Display” page. Click on “Create New App” button.

(2) Enter the display name you want. Click on “Create App” button.

(3) Enter your site URL into “Client OAuth Settings” and “Deauthorize” fields. Enter your privacy policy URL into “Data Seletion Requests” field. Click on “Save changes” button.

Step 5:

(1) Navigate to “App roles” > “Roles” page. Find and click on “Add People” button.

(2) Enter your Instagram username into the popup then click on “Add” button.

Step 6:

(1) Open a new web browser tab, go to www.instagram.com and sign in to your Instagram account that you just invited.

(2) Navigate to your “Profile” page > Click on the cogwheel icon next to “Edit Profile” button > select “Apps and Websites”

(3) Open “Tester Invites” tab > Find your newly created app and click on “Accept” button. Your Instagram account is now eligible to be accessed by your Facebook app while it is in Development Mode.

Step 7:

(1) Go back to the Facebook developer page. Navigate to “Instagram Basic Display” > “Basic Display” page. Scroll down and find the “User Token Generator” section. Click on “Generate token” button.

(2) Log in with your Instagram account.

(3) Click on “Allow” button.

(4) Click on “I understand” checkbox then copy your Instagram Access Token.

Paste your Instagram Access Token on VA: Instagram Slider & Feed app configuration page.

Long-lived tokens are valid for 60 days and our app will refresh your token automatically before they expiring. You will not have to manually regenerate your access token.

You can watch the instruction video here:

Display Instagram photos and videos on online store

VA: Instagram Slider & Feed is a simple but effective solution to showcase all your Instagram photos and videos on your Shopify store. This app gives your storefront a stylist and modern Instagram section for people to explore your best products.

In order to display Instagram photos/videos to your online store, VA: Instagram Slider & Feed offers you 2 selections: Instagram section and embedded code.

By default, this app will create an Instagram section on your online store homepage:

But if you want to display the photos/videos to a position on your online store but the position is not supported by the Instagram section, Embedded code is useful for you.

In this section, we will guide you on how to customize Instagram section and how to customize and use embedded code on your Shopify online store.

A. Customize Instagram section

Navigate to “Online store“ > “Themes” page. Click on “Customize” button to open the settings editor page where you can change the appearance and content of the theme.

Find and select “Instagram” section on the left sidebar.

You will find the following options to customize the Instagram section:

General settings

a. You can adjust Instagram section title and select which type of photos/videos to display.

Display “Featured only” photos/videos and display “tagged with products only” photos/videos options are available after you marking featured photos/videos and tagging products onto photos/videos.

To read more about how to mark featured photos/videos, please navigate to “Featured photos/videos” section.

To read more about how to tag products onto photos/videos, please navigate to “Shopping feature” section.

b. Layout type: VA: Instagram Slider & Feed app supports 2 layout types for the Instagram section: grid and carousel slider.

Grid layout settings: you can set up the number of initial photos displayed and the maximum number of photos displayed. You can also display or hide “Load more” button.

By default, when you select grid layout type, the Instagram section on mobile devices will be displayed on a grid layout. If you enable “Force carousel slider on mobile” option, the Instagram section on mobile devices will be displayed on the carousel slider layout even though the layout type on the desktop is grid layout.

Carousel slider layout settings: you can set up the number of photos displayed, enable/disable auto-play carousel slider, set up slider playing speed (in millisecond), and enable/disable infinite loop slider.

c. Photo filter effects: VA: Instagram Slider & Feed supports 9 beautiful photo filter effects to make your Instagram photos/videos more attractive. You may select the preferred filter effect for initial photos and when hovers mouse pointer over photos.

Here is an example:

d. Redirect to shopping cart page when clicking on “Add to cart” button

When customers view a photo/video and want to purchase any product, they can click on “Add to cart” button to add that product to the shopping cart. You may redirect customers to shopping cart page or keep them staying on the current page.

e. Display ‘Shop now’ & ‘View photo/video’ button

When you hover the mouse pointer over a photo/video, a shopping cart button will appear if you enable “Display “Shop now” & “View photo/video” button” option.

Store visitors can click on this button to open the full-screen Instagram photo slider using Fancybox 3.

Display settings

You can modify the following settings:

Number of photos per row on desktop
Number of photos per row on tablet
Number of photos per row on mobile
Section padding (px): the spacing value between the Instagram section and other sections
Photo spacing (px): the spacing value between each photo on the Instagram section

Follow button settings

You can modify “Follow” button label and its design, such as button background color, background color when mouse pointer hover, button border color, etc.

Shopping cart button settings

You can change the button title of the shopping cart button on specific cases and change the button design.

Remember to click “Save” to apply your settings.

B. Display Instagram section anywhere you want with embedded code

In order to display Instagram photos/videos to your online store, normally you should use Instagram section. In case you want to display the photos/videos to a position on your online store but the position is not supported by the Instagram section, Embedded code is useful for you.

On the app configuration page, just select your preferred settings in the form of “Embedded code generator” tab then click “Generate” button to get embedded code.

How to use your embedded code

After getting the embed code for the Instagram section as instructed above, you can paste it into any template .liquid file you want to display Instagram section. Here are some examples of using embed code on the product description area, on a .liquid file, and a blog post page.

Embed code on the product description area

STEP 1: On your Shopify admin, navigate to Products page. Click on a product you want to display Instagram section on the product description area.

STEP 2: On “Description” field, click on “Show HTML” button. Paste the embed code on “Description” field. Click “Save“.

STEP 3: And we’re done! Open your product detail page and see the change!

To remove the Instagram section out of the product description area, just delete the embed code on “Description” field.

Embed code on a .liquid file

STEP 1: Navigate to “Online store“ > “Themes” page. Click on “Actions” dropdown menu. Select “Edit code“.

STEP 2: Scroll down and select blog.liquid file. Paste the embed code. Click “Save“.

STEP 3: Open your blog page and see the change.

Similar to blog page, you can add an Instagram section to any place you prefer by inserting embed code to the respective .liquid file. If you want to remove the Instagram section from your web page, just delete the embed code on .liquid file.

Embedded code on a blog post page

STEP 1: Navigate to Online Store > Blog posts > Add blog post

STEP 2: Enter blog post title, upload featured image, etc.

STEP 3: Click on “Show HTML” button above “Content” field. Paste embedded code into “Content” field.

STEP 4: Set your blog post visibility to “Visible“. Click “Save” to publish your post.

Now you have a separate page to showcase all your Instagram photos/videos.

Shopping feature

VA: Instagram Slider & Feed allows your customers to add to cart and buy the preferred items directly from photos/videos on your Shopify store without additional searching. In this section, we will guide you on how to tag related products onto your Instagram photo/video.

Tag a product to Instagram photo

Step 1: Open VA: Instagram Slider & Feed app configuration page > Navigate to “Photos and videos” tab

Step 2: Click on a photo you want to tag product to open it.

Step 3: Click anywhere on the photo to tag products related to this photo > a product mark will appear. You can search for a product by product ID or name. You can drag and drop products to sort their order.

Tag a product to Instagram video

Step 1: Click on a video you want to tag product to open it.

Step 2: You can search for a product by product ID or name. Drag and drop product names to sort their order.

After you make any change on the app configuration page, VA: Instagram Slider & Feed will automatically clear cache and update your online store after 5 seconds.

And we’re done! Now open your online store, refresh it and see the change!

NOTE: The system automatically saves any configurations and update your front store after 5 seconds. If you do not see any change in your store, please click “Clear cache” button or wait for a few seconds and reload your front store.

You can view all photos/videos tagged with products on “Tagged with products” sub-tab. You can also drag and drop photos/videos to sort their order.

With the products that are tagged into Instagram photos/videos, when you open their product detail page on the storefront, you will find an Instagram section that contains all Instagram photos/videos tagged with these products.

You can also customize how the Instagram section will appear on the product detail page:

1. Navigate to Online store > Themes section. Click on “Customize” button to open the settings editor page where you can change the appearance and content of the theme

2. Select Product pages > Select “Instagram” section. You will find the following options to customize the Instagram section:

Featured photos/videos

VA: Instagram Slider & Feed allows you to display featured photos/videos only so that you can inspire customers with highlight Instagram photos/videos on your Shopify online store. You may select “Featured photos/videos only” when setting up the type of photo/video to display on Instagram section or when configure the Instagram section before generating embedded code.

In this section, we will guide you on how to mark a photo/video as a featured photo/video.

Step 1: Open VA: Instagram Slider & Feed app configuration page > Navigate to “Photos and videos” tab

Step 2: Hover your mouse pointer over a photo/video you want to mark as featured.

Step 3: Click on the grey triangle to mark photo/video > Featured photo/video will have a purple triangle.

Unmark featured photo/video

To unmark a featured photo/video, click on the purple triangle on the top–right of that photo/video.

After you make any change on the app configuration page, VA: Instagram Slider & Feed will automatically clear cache and update your online store after 5 seconds.

You can see all featured photos/videos on the “Featured” sub-tab. You can also drag and drop photos/videos to sort their order.

Note: The system automatically saves any configuration and updates your front store after 5 seconds. If you do not see any change in your store, please click on “Clear cache” button or wait for a few seconds and press Ctrl+F5 to reload your front store.

Change app pricing plan

Instagram Shopping & Feed offers competitive 2 pricing plans to help you find one that fits your needs and budget: free plan and premium plan.

If you are unsure which pricing plan to choose, you may use the free plan to see how VA: Instagram Slider & Feed‘s features can help you to sell your products directly through Instagram photos/videos. You can always upgrade your plan to add new features and functionality to your store.

To change the pricing plan, please follow the instruction below:

– On the app configuration page, click on “Your plan” tab sidebar.

– Select a plan suitable for you:

Uninstall app

You can remove VA: Instagram Slider & Feed from your store from the Apps page in Shopify admin. Please follow the instruction below:

From your Shopify admin, go to Apps > Locate VA: Instagram Slider & Feed > Click “Delete”

Remove code left after uninstall

Installation of our VA: Instagram Slider & Feed automatically injects certain code snippets into your Shopify theme in order to make the installation process fully automatic and make our app work fast and smoothly. Moreover, during your usage, some embedded code may be pasted into the .liquid file to display Instagram section on specific positions.

Unfortunately, when you uninstall VA: Instagram Slider & Feed we lose programmatic access to your store, thus we cannot remove the code snippets that we injected automatically and the embedded code you pasted into .liquid file.

Although these code snippets that we add do not harm your store even after the uninstallation process, you might want to remove them anyway, the following guide will walk you through this process.

Step 1: Go to Online store in your Shopify Admin Panel > On your ‘Current theme‘ select “Actions” -> “Edit Code”

REMOVE CODE SNIPPETS

Step 2: In the theme.liquid file:

Remove the code that contains {% include ‘ets_instagram_shopping_slider_css’ %}
Remove the {% include ‘ets_instagram_shopping_slider_js’ %}, which is used to load our JS library

Step 3: In the Sections folder: delete “ets_instagram_shopping_slider.liquid” file

Step 4: In the Snippets folder: delete “ets_instagram_shopping_slider_css.liquid” file and “ets_instagram_shopping_slider_js.liquid” file

Step 5: In the Assets folder: delete “ets_instagram_shopping_slider_css.liquid” file and “ets_instagram_shopping_slider_js.liquid” file

REMOVE EMBEDDED CODE

In the Templates folder:

Open the .liquid file which contains embedded code you used to add.
Remove the embedded code.