Display Instagram photos and videos on online store

Instagram Shopping & 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, Instagram Shopping & 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.

On this section, we will guide you 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 section. Click on "Customize" button to open the settings editor page where you can change the appearance and content of the theme

Go to the Sections tab > Select "Instagram" section. You will find the following options to customize Instagram section:

 

General settings

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

 

Note: 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: Instagram Shopping & Feed app supports 2 layout types for Instagram section: grid and carousel slider. 

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

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

Carousel slider layout settings: you can set up 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: Instagram Shopping & Feed supports 9 beautiful photo filter effects to make your Instagram photos/videos more attractive. You may select preferred filter effect for initial photos and when mouse pointer hovers over photos.

Here is an example:

 

d. Redirect to shopping cart page when click 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 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

If you enable this option, when you hover mouse pointer over a photo/video a shopping cart button will appear. You can click on this button to open Instagram photo slider using Fancybox 3.

 

f. Display Instagram comments

If you enable this option, Instagram Shopping & Feed will display all comments posted on Instagram related to your photo/video. 

 

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 Instagram section and other sections
• Photo spacing (px): the spacing value between each photo on 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 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.

Just select your preferred settings in the form on "Embedded code generator" tab then click "Generate" button to get embedded code. Copy and paste the embedded code to blog page, product description, template .liquid files, etc. where you want to display Instagram photos/videos.

How to use your embedded code

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

 

Embed code on product description area

Embed code on a .liquid file

Similar to blog page, you can add Instagram section to any place you prefer by inserting embed code to the respective .liquid file. If you want to remove Instagram section out of 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 > Create 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.