Gallery Widget – gallery of photos from Instagram

This application allows you to present a gallery of photos and videos from your Instagram account.

In this article you will learn about:


Application requirements

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

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

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

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


Application installation

Go to Add-ons > + Apps

Search for the Gallery Widget application and install it.

Next click 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 by using the hashtags 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.

Colours

Here you can choose the colours of your gallery.

You can select the colours 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.

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

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 email: onlinestore@sumup.com

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

Exit the application and go to Layout > click the 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, for example, 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 the 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 allows the pinning of 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 a different Instagram account

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

Was this article helpful?

Was this article helpful?

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

Contact