How to install Instagram feed in theme editor

In this article, you will learn about VIBE Shoppable Instagram feed app block and how to install its feed in the Theme editor.

VIBE app provides you with grid feed app blocks which help you showcase your Instagram feed in the grid view. It can be added to all page types such as homepage, product pages, collection pages, blog post pages, etc.

You can also add, remove, and reorder VIBE app blocks. Check the GIF below for more information:

Step 1: Add VIBE app block into Theme editor

• From a Theme editor, click on “Add section“

• There are 2 app blocks for layout options of the feed for you to choose: Grid or Slideshow

Grid:

Slideshow:

Step 2: Set up VIBE app block

Once you finish adding the app block into the Theme editor, click on the app block, then its settings will appear

1. Set up the feed content

First of all, you need to paste the ID of the feed you created on VIBE app.

You can get the feed ID by going to that feed > Feed ID > and click on icon “Copy”.

Or you can get the feed ID when you click Install feed > For OS 2.0 themes > copy the code and paste it in Instagram feed ID in app block. Please refer to this article for alternative methods to get the feed ID.

Next, you need to choose a Post click action out of 3 actions: Open post pop-up, Open Instagram post page, or None. If you want to edit the pop-up, you can go to pop-up preferences with the help text below.

2. Set up feed display

Grid

Post 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: None Load more

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.

3. Set up post display

• At the first place, you are required to put the text for the post CTA and Post with products CTA if you already set the Post click action to Open post pop-up or Open Instagram post page.
• Lastly, post ratio needs to be chosen out of 3 options: Square, 4:5, 9:16.

4. Set up heading and description

• Heading: If you want to add a short heading for your feed, please fill in the Heading field, otherwise leave it blank.

Heading text size can be adjusted for both desktop and mobile.

• Description: Similar to heading, you can input the description or leave it blank, the description text size can be adjusted for both desktop and mobile.

• Text alignment: Text can be positioned Center, Left, or Right.

• Spacing between section text and posts: control the spacing between section’s texts (headings and descriptions) and the posts list.

You can customize the spacing for both desktop and mobile screens separately.

5. Set up Feed section padding

This section allows you to customize the spacing around VIBE sections. You can control the top and bottom padding of a section independently, creating space between it and the previous and next sections.

6. Advanced CSS

Custom CSS allows users to override the default styles of a website or application. By providing users with the ability to add their own CSS code, they can customize the appearance of the site to their liking.

Once you are done with all steps, hit Save to check the live feed on your store!