Get help with Shoplo products

Gallery Widget – gallery of photos from Instagram


The application allows you to present a gallery of photos and videos from Instagram.

In this article:


How to update to the new version of the application

From February 20th, 2020, the Instagram application will be replaced by the Gallery Widget application.

You will find it in section Add-ons.

This change will happen automatically, however you will have to re-authorize. The new version requires logging in using a Facebook account (check requirements)

Until you authorize your Facebook account, we will continue to display existing galleries on the storefront, but they will not be updated.

What should you do?

Go to: Add-ons > Gallery widget > Login with Facebook. After correct authorization, all your galleries will be automatically transferred to the new application.

If there were changes in the code regarding the layout of the gallery, then the new gallery code will have to be placed manually in the store theme. Please contact us for this purpose.


Application requirements

At the moment you can authorise the app only via Facebook.

You can use the app only if your Instagram profile has the status of Professional Account or Creator Account. The account must be also connected to your Facebook page.

Check out how you can connect Facebook and Instagram accounts from Facebook level or from Instagram level.

If your Instagram account is not connected to Facebook now, we suggest to connect them using Instagram app on your mobile device. Check how to do this.


Application installation

Go to Add-ons > + Apps

Search for the Gallery Widget application and install it.

Next click on  Login with Facebook

Select the account with which you want to connect

Then select the Instagram Business Account you want to use

and FanPage, which is linked to this account

After returning to the application panel, select the Facebook page that is linked to the Instagram account from which you want to display pictures on your store.

Creating a gallery and changing the layout

Go to the application by clicking the tab Add-Ons > Gallery Widget > + Gallery.

General settings

After clicking the Add gallery button, fill in the information that will appear in the gallery title and description.

Then choose whether to display photos from your account. You can also exclude pictures you don’t want to show using the hashtag (#) and tagged account names.

Here you can also choose the language in which the gallery will be displayed.

Layout

In the Layout tab, you will be able to specify the gallery width, as well as defining how many columns and rows it should consist of.

Colors

Here you can choose the colors of your gallery.

You can select the colors by choosing them directly from the palette or by entering the hex number.

Others

Here you can choose how subsequent photos will be viewed in your gallery and what information will appear when you hover over the photo.

Save changes and it’s ready!


How to edit an existing gallery?

Go to: Add-ons > Gallery Widget and click on the gallery you want to edit. You can make exactly the same changes as when creating a new gallery.


Placing the gallery on the website


For themes created after February 2019

For templates created after 20.02.2020, the first created gallery will be automatically added in place of “plug”

Make sure you have added a plug for the Gallery Widget in the place where you want it to be displayed

If you don’t have it, you can add it. Go to Layout > Change layout next to the theme on which you want to add the Instagram widget. (More information about changing the theme layout)

When editing the layout, select Instagram and add the item where you want to view the photos.

Then save changes.


Old themes

You can place the gallery widget on your store website yourself, using the tips below. However, if you need help, contact us via the contact form.

Go to Gallery Widget > three dots > copy the HTML code

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

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

for example.:

a) If you want it to appear on all subpages of your store

go to Layout and then base.tpl:

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

shoplo-instagram-page-content.png

Example of pasted code:

shoplo-instagram-przyklad-kodu.png

Save Changes. Go to preview – the gallery will appear above the footer on each subpage of your store.

b) If you want the gallery to appear only on your store’s home page:

Go to Templates, and then home.tpl:

Paste the previously copied code in the right place. For example, place it at the end of the file or above the newsletter subscription field (if you have one). Save Changes. The gallery will only appear on your store’s home page.


Deleting gallery

If you delete the displayed gallery in the application, remember to remove its code from the theme. Please contact us if need help with that.


Pinning products on photos

The app enables pinning products to photos.If you want your visitors to know, which of your products are in a given picture – pin it, thus making it easier for customers to shop in your store.

Select a photo from the gallery preview, then click + Product next to the photo. Then start entering the product name, select a product from the list and click Add.

If you want to use the product marking functionality provided by Instagram, use these instructions.


Connecting other Instagram account

If you want to connect other Instagram account to the app, simply uninstall the app, install it back again and login with different credentials.

Was this article helpful?

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

Contact us
Team