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?
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
| Posts to display
Note: Post display limit cannot be exceeded the number set in feed settings. Note that excessive posts may harm your page performance. |
 |
| 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:
|
 |
| 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
| Post to Display
Note: Post display limit cannot be exceeded in feed settings. Note that excessive posts may harm your page performance. |
 |
| 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 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 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?
You can use this code in the HTML/liquid element to add your VIBE feeds to any position on the page.
If you are using PageFly page builder app, you can add a VIBE element to the page as normal, since VIBE is integrated with PageFly. For more information, please refer to this article.
