Add Instagram feed to Shopify vintage theme and page builder

Overview

This article provides a guide on how to set up and install VIBE’s feeds on your Shopify vintage theme (OS 1.0) or a page builder app (Gempages, Shogun, Ecomposer, Beae,...). You will learn how to obtain the feed embed code and integrate it into your chosen theme or application.

Users will be able to seamlessly integrate VIBE’s Instagram feeds into their vintage theme or page builder, enhancing their site’s visual content and engagement.

Where Can I Set Up And Get The Feed Embed Code?

To access the settings and get feed embed code, go to Instagram feeds > click on the feed you want to install on theme or page builder > hit Install feed.

Configuration

Step 1: Choose Post click action

There are 3 options for you to choose:

Open post pop up

Open Instagram post page

None

Step 2: Choose layout type and set up parameters

There are 2 types: Grid and Slideshow. Both types have their own unique settings parameters, allowing you to customize the display according to your preferences and needs.

Grid

- Items per loading: Note: Loading items must be equal or less than Posts to display.



- Item per row for desktop and mobile: The Item per row for the desktop device screen can be selected from 3 to 6. For mobile, this range is from 1 to 3.



- Item spacing for desktop and mobile: The spacing for the desktop device and mobile screen can be selected from 0px to 100px.



- Loading mode: There are 2 type of loading mode that you can choose:

None

Load more



- Post Display: You can also change the Post CTA and Post with products CTA. Remember to choose the Post ratio. You can choose from Square, 4:5 or 9:16.

Slideshow

- Item per show for desktop and mobile: The Item per show for the desktop device screen can be selected from 3 to 6. For mobile, this range is from 1 to 3.


- Item spacing for desktop and mobile: The spacing for the desktop device and mobile screen can be selected from 0px to 100px.



- Post Display: You can also change the Post CTA and Post with products CTA. Remember to choose the Post ratio. You can choose from Square, 4:5 or 9:16.

Get Code

Once you finish settings for the content of the post on the left, the feed embed code on the right will automatically change according to the changes you made. To get the code, click on the Copy code button to copy and use it on themes or page builders.

How To Use Vibe Feed On Vintage Themes?

After copying the feed embed code in VIBE, please follow these steps to use it on a vintage theme (an OS 1.0 theme):

Step 1: Access Theme's Code File

Access Online Store > Themes > Current theme > Actions > Edit code.

Step 2: Access Liquid Template File

Access the template liquid file that you want to add to the feed. In this example, to add a feed to the homepage, search for “index" > click on index.liquid to open the file

Step 3: Paste Feed Embed Code

In the index.liquid file, paste the code wherever you'd like to see your feed. Then hit the Save button in the top right.

How To Use Vibe Feed On A Page Builder?

If you are using a page builder like Gempages, Shogun or Ecomposer, you can use the VIBE Instagram Feed embed code in the page builder's HTML/liquid element to add your VIBE feeds to any position on the page.

Common Cases

Setting Up VIBE Feed for a New Product Launch: If you're launching a new product, you can create a dedicated feed that showcases posts related to the launch. Follow the steps to obtain the feed embed code and configure the layout to highlight specific product images. Use the "Load more" feature to engage users further.

Troubleshooting Display Issues: If the feed does not display correctly, double-check the embed code placement. Ensure that you’ve saved changes in the theme code. If issues persist, try clearing your browser cache or refreshing the page.

Frequently Asked Questions

Where can I get the feed embed code?

You can obtain the embed code in the Instagram feeds section after setting up your preferences.

What should I do if I encounter issues pasting the code into my theme?

Double-check the placement of the code and ensure that you save the file after making changes.

Can I adjust the feed settings after installation?

Yes, you can return to the VIBE settings to modify any parameters as needed.

Updated on: 16/04/2025