How to use VIBE Instagram feed in vintage theme and page builder

If you want to use VIBE’s feeds on your vintage theme (theme OS 1.0) or a page builder app, you will need to set up and install VIBE by copying feed embed code.

In this article, you will learn how to set up and get the feed feed embed code then install it on Vintage theme and page builder apps.

Note: if you use the OS 2.0 theme like Dawn theme, please check here for full details.

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

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.

ConfigurationClick to copy

Step 1: Choose Post Click ActionClick to copy

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 ParametersClick to copy

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.

GridClick to copy
Items per loading

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.

SlideshowClick to copy
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 CodeClick to copy

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?Click to copy

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

Step 1: Access Theme’s Code FileClick to copy

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

Step 2: Access Liquid Template FileClick to copy

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 CodeClick to copy

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?Click to copy

If you are using a page builder like PageFly, you can use this code in the HTML/liquid element to add your VIBE feeds to any position on the page or add VIBE Instagram element on to PageFly page.

Can't find what you’re looking for?

Chat with us