Instagram Feed

Introduction

The Instagram Feed Extension allows sellers to integrate their Instagram feed directly into their online store. With this integration, sellers can display their Instagram posts, videos and reels on their websites.

---

Steps to set up Instagram Feed Extension

1. Go to Extensions in Fynd Platform.

   

   Figure 1: Opening Extension
   

2. Click Instagram Feed.

   

   Figure 2: Clicking Instagram Feed
   

note

Once you have installed this extension, it will be available in the list here.

3. Select desired sales channel. Here we have selected 'shubham'.

   

   Figure 3: Selecting Sales Channel
   

4. Click Instagram Sign-in to connect your Instagram account.

   

   Figure 4: Logging into Instagram Account
   

5. Click Allow.

   

   Figure 5: Giving Permission
   

Your Instagram account is connected successfully. In the next sections, you'll learn to configure the appearance of the Instagram feed on the website.

Post/Videos

Figure 6: Clicking Post/Videos

Global Setting

Arrangement:

Figure 7: Configuring Arrangement

1. Square Arrangement: This option displays your Instagram feed in a clear and square layout, creating a cohesive and visually striking composition.
2. Random Arrangement: This option displays your Instagram feed in a clean and random grid layout, giving it a balanced and harmonious look.
3. Gallery Arrangement: This option displays your Instagram feed in a stunning photo gallery layout, showcasing your images in a sophisticated and elegant way.
4. Social Arrangement: This option displays your Instagram feed in an organized and equal-sized rectangular layout, providing a clean and structured design.

Layout Template:

1. Select a suitable layout from Grid or Carousel.

   

   Figure 8: Configuring Global Seetings 1
   

2. Configure Rows & Columns: Select the desired number of rows and columns you want to keep in your Instagram feed section in the given space.

   

   Figure 9: Configuring Global Seetings 2
   

3. Heading: Toggle on "Heading" to add a suitable title for your Instagram feed section.

4. Subheading: Toggle on "Sub Heading" to add a suitable subtitle for your Instagram feed section.

5. Text Alignment: Select the suitable text alignment from the given option.

6. Spacing: Select the suitable spacing you want to provide between the post.

7. Include videos: Add video posts also to your Instagram feed section by checking it.

Click Save.

Hover Effects

Figure 10: Configuring Hover Effects

1. Overlay Theme:

   1. Light: Selecting it will lighten the image with a semi-transparent layer on hover.
   2. Dark: Selecting it will darken the image with a semi-transparent layer on hover.

2. Overlay Elements:

   1. Show Caption: Displays the caption associated with the post/video when hovering over it.
   2. Show Instagram Icon: Displays the Instagram icon when hovering over the post/video.
   3. None: Hovering will darken the image with a semi-transparent layer on hover.

Click Save.

On-Click Action

Figure 11: Configuring On-click Action

1. Open in Popup: Clicking on a Post/Video opens in a pop-up window.
2. Open on Instagram: Clicking on a post/video redirects the user to the corresponding post/video on Instagram.
3. None: Clicking on the post/video will not redirect anywhere.

Click Save.

Reels

Figure 12: Clicking Reels

Global Settings

Figure 13: Configuring Reels Global Seetings

1. Layout Template: Select a suitable layout from Grid or Carousel..
2. Heading: Toggle on the heading option to enable the heading and provide a suitable heading for your Instagram feed section in the given space.
3. Subheading: Toggle on "Sub Heading" to add a suitable subtitle for your Instagram feed section.
4. Text Alignment: Select the suitable alignment from the given option.
5. Spacing: Select the suitable spacing you want to provide between the post.

Click Save.

On-click Action

Figure 14: Configuring Reels On-click Action

1. Open in popup: Reel opens in a pop-up window on click.
2. See on Instagram: Reel opens on Instagram on click.

Click Save.

note

Reels will auto-play on mute on your storefront.

Adding Instagram Feed Extension in Theme Editor

Figure 15: Locating Theme Editor

1. Click your desired Sales Channel. Here we have selcted shubham.

2. Click Appearance.

3. Click Themes.

4. Click Edit to open the theme editor.

5. Click Add Section in the Sections tab.

   

   Figure 16: Clicking Add Section
   

6. Click Add on Extensions.

Figure 17: Clicking Add button

7. Click on the "+" icon in Extension Position.

Figure 18: Adding Extension

8. Select Instagram Feed extension from the dropdown.

Figure 19: Selecting Extension

9. Choose your desired Wrapper - Post/Videos or Reel.

Figure 20: Selecting Wrapper

10. Click Save.

Figure 21: Clicking Save

Activating/Deactivating & Reconnect Instagram Feed Extension

Figure 22: Additional Configuration

• To activate the Instagram Feed Extension, open the extension and toggle the button to ON on the features page after selecting the sales channel.
• To deactivate the extension, select sales channel > Instagram Feed > toggle the button to OFF.
• Click Reconnect Instagram to sign out of your current account and add a new Instagram account to the extension.

---

Final Output

Visit the sales channel and you will see that the Instagram feed is visible on your website.

Figure 23: Final Output