How to display the Instagram feed

This article will walk you through the steps to add an Instagram Feed to your page in minutes with our Image Gallery section.


As of March 31, 2020, the Instagram platform will not use its API. Each Instagram section will be affected by this, as the access token depends on this system to connect. As a result, GemPages temporarily stopped providing the Instagram section. You can use the Image Gallery section instead, designed the same as Instagram.

Add the Image Gallery section to your page

Step 1: From the EcomSolid Dashboard, head to the Theme Editor or Page Editor.

Step 2:  Access the Library from the top bar of the Editor Page.

 

 

Next, navigate to Sections > Instagram.  Select your preferred Image Gallery section and hit “Insert” to add it to your Editor. 

 

 

Configure the Section settings

After that, you will find the Image Gallery section added at the bottom of your page. Click on the section to start configuring the settings.

General Settings

You can control the layout of your Image Gallery at this point.

Number of columns: Adjust the slider or enter the number into the box for the number of columns.

Spacing of items: Adjust the slider or enter the number into the box for the spacing between your images.

You might see this setting is marked with a Desktop icon. That means you will be able to control the layout of your Image Gallery among different devices by clicking on the respective icon at the top of your Editor.

 

Click on “More General Settings,” you will see more options to customize your Image Gallery section, including: 

  • Change background color/ image.
  • Add the Hover effect for the Image Gallery.
  • Add animation for the Image Gallery.
  • Adjust the Margin/ Padding for the section.

Atoms

You will see a list of atoms included in the Image Gallery section. Hover over the atom, click on the Eye icon to hide/show the atom then.

 

 

Image Items: Each Image item represents one image on your layout. Click on the Trash bin icon to remove the image. Hit the Duplicate icon to add more image items to the layout. 

 

 

Click on the Atom to reveal its configuration on the left sidebar. 

1. Image

You can choose the images to show on your Image Gallery. There are two options for you to upload your image in this section:

  • Browse from your computer: Hover the image and click on the Pencil icon. This option lets you choose an image from your computer to upload.
  • Browse Gallery: You can pick one from the gallery which contains all of your uploaded images.

 

Under the URL section, hit “Pick link” to send customers to other pages after clicking the Image. The link picker window will appear to select the link to add. There are two options for you at this point: enter the link to the “Custom URL” field or choose from the list.

Please note that the custom URL should include “https://” for the link to function correctly.

 

Image Alt Text: Input the alt text for your image for SEO purposes.

Size: Toggle on the Image Ratio switch, you will see all the image ratio options you can choose from. 

 

 

Animation: Choose animation for your image from the drop-down menu. Hit the “Preview” button to see how it looks on the live page. 

 

 

2. Icon

Select and control the display of the icon on the image. The default icon is the Instagram icon; however, feel free to upload the icon you prefer by hitting the “Choose icon.”

 

 

Recommended third-party apps

If the Image Gallery doesn’t meet your expecting requirements, please consider using the third-party apps below to showcase your Instagram galleries:

  • Instagram Feed: https://apps.shopify.com/instafeed
  • Shoppable Instagram Feed: https://apps.shopify.com/instagram-shop-by-allfetch

That's it! If you run into any problems when editing, please get in touch with our Customer Support via email or live chat.


Was this helpful?