Instagram gallery in your store

With our Instagram app, you can display Instagram pictures gallery directly in your online store.  Here we will discuss:

 

App Installation

1. From your Shoplo Dashboard, go to our App Store and find the Instagram App. Choose the app and click the “Install application” button, located on the right side of the description.


2. After the installation, you will be redirected to the application. Connect your store to your Instagram account by clicking on “Connect”.

3. Login using your Instagram account details

4. Now it’s time to create your first gallery

 

5. In the Instagram sources field type in the handles whose content you want to appear in galleries (i.e @accountname). You can also display images associated with a specific hashtag (i.e. #hashtagexample)

 

 

In the Blocked content field, type in all the accounts and hashtags (using the same rules as above) whose content you want to block from displaying in galleries.

 

6. When complete, click the Download images button. Images will appear on the bottom of the page, just under the button:

 

 

Gallery design settings

You decide how will the gallery (widget) looks on your website.

 

1. Go to the Gallery size tab:

 

2. Determine the size of your gallery - if you want the widget to automatically match the website’s size, continue with the default options. If you want to set your own values, unselect the default options and enter your desired size in pixels

3. In the next field, specify the number of columns and rows in which the images will appear. You can also decide if there should be any spacing between images. You can find sample values below:

4. Edit your header and description content that will appear above the gallery in your web store.  

5. Now go to the Gallery specs tab. Mark the checkboxes next to the elements you want to include in your gallery. Find the sample settings below: 

 

6. And the final step of the gallery design configuration - picking the right colours. You can easily change them by clicking the square next to the colour you want to edit.

 

7. Save the changes and... it's done!

 

 

Placing the gallery in your Shoplo store

The following will guide you through placing your gallery in your store. If at any point you need any help with this, contact our support at help@shoplo.com

1. Go to the gallery list view and click the icon selected below and copy the code that will appear on the screen.

 

2. Leave the application. Go to the Layout tab and choose HTML Editor.

 

3. What we do now depends on where you want to place the gallery in your store. For instance:

 

a) If you want it to appear on every page of your store, go to Layout tab and then choose base.tpl

Now paste the copied code between website content and footer. Find the code part that includes: {$page_content} phrase and paste the code in the line below it. 

 

 

Save the changes. Go to the preview mode - the gallery will appear above the footer on every subpage of your store.

 

b) If you want the gallery to display only on your store's homepage:

Go to the templates tab and choose home.tpl

 

Paste the code that you've copied where you would like it. For instance, above the newsletter box. Find this code part:  <div class="newsletter-widget-1"> and place the code above it. 

Save the changes. Go to the preview mode - the gallery should appear only on your store's homepage.

 

Pinning products to images 

To inform customers which products are featured in an Instagram image, we use pins. Pins identify the products in an image and put a link to the product page on the right-hand side of the image. 

1. Go to the Instagram app and click on the Pin products tab.

 

2. Click on the Pin products button next to the gallery.

3. Once again click on the pin products button next to the images you want to pin products to. Now, start typing the name of the product in your store that you would like to pin. Choose the products from the suggestions and click the 'add' button.

Click save and that's it! Your customers will see something similar to this: