Get help with Shoplo products

How to Install and display an Instagram gallery on your store


How you to display your Instagram gallery pictures directly from your online store.  

In this article you will learn about:


 Installing and connecting the Instagram app

Go to this page and click the “INSTALL ADD-ON” button, located on the bottom-right side of the description. 

If you are not logged in, you will have to do so at this time. After you’re logging in, click on Install.

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

Login using your Instagram account details and authorize Shoplo by clicking on “Authorize”.

Creating a gallery and changing its layout

Now it’s time to create your first gallery.

Go to integration: Add-ons> Instagram> Create gallery.

 

At Shoplo, you can only display photos from your own Instagram account. To do this, select Add images from your Instagram account

You can also block specific photos related to a certain hashtag (by typing #example)

Once you have completed these fields, click the Download images button. 

Now, go to the Gallery size tab:

Set 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.

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:

Here you can also edit your header and description content that will appear in your web store, above the gallery.

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:

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.

Save the changes and… you’re done!


Displaying the gallery in your store


For themes created after 13.02.2019

You can place yourself the gallery widget in your store.

Make sure that you have an Instagram plug inserted in your theme, exactly in the place where you want to place the gallery.

If you don’t have it yet, you can add it. Go to the store’s layout and select Customize next to the theme you want to add the Instagram widget to. (More information about changing the theme layout) (Więcej informacji o zmianie układu szablonu)

When you are on edit mode, click on the Instagram icon and add the item to the place where you want to display the gallery.

Then save the changes.

The next step is to add the appropriate code in the theme. You can copy the Instagram gallery code and send it to us or put it yourself.

How do you add the code yourself?

First, you need to copy the code. Go to Add-ons > Instagram and click on the link icon.

shoplo-instagram-link.png

Copy the code.

Go to Store Layout> next to the selected theme click on the three dots> HTML editor

If you added the Instagram plug on your home page, go to Themplates> home.tpl and find the section with Instagram.

Remove the code between the markers and paste the code copied from the application in this place.

Save Changes.

Important!
Remember not to delete the tags in the code.


For old themes
The following will guide you on how to display your gallery in your store. If at any point you need any help with this, contact our support.

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

Exit the application and go to the Layout > three dots > HTML editor:

The next step depends on where you want to place the Instagram gallery.

a) If you want it to appear on all subpages of your store, go to the Template tab, and then click on base.tpl:

Paste the copied code, e.g. between the content and the page footer. Find the code snippet:  {$ page_content}and put your code in the line below it:

Example of pasted code:

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 appear only on the main page of your store, go to the Templates tab and then home.tpl:

Paste the code that you’ve copied where you would like it to appear. For instance,  if you want it above the newsletter box – Find this code snippet:  <div class=”newsletter-widget-1″> and place the code above it. 

After pasting, save the changes and go to the preview mode – the gallery should appear only on your store’s homepage.


Pinning products to images

Below we describe the “pinning” of products to images in the widget displayed on the store, i.e. in the integration with Instagram created by Shoplo. If you want to use the product marking functionality provided by Instagram, please use this user guide.

If you want customers to know which of your products is in a given photo – mark it on it, and thus make it easier for customers to shop.

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

Click on the Pin products button next to the gallery.

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:

Was this article helpful?

Still can’t find what you’re looking for?

Contact us
Team