# 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. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/1.png) Figure 1: Opening Extension 2. Click **Instagram Feed**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/2.png) Figure 2: Clicking Instagram Feed Once you have installed this extension, it will be available in the list here. 1. Select desired sales channel. Here we have selected **'shubham'**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/3.png) Figure 3: Selecting Sales Channel 2. Click **Instagram Sign-in** to connect your Instagram account. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/4.png) Figure 4: Logging into Instagram Account 3. Click **Allow.** ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/5.png) 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 ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/6.png) center em Figure 6: Clicking Post/Videos br #### Global Setting **Arrangement:** ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/7.png) center em Figure 7: Configuring Arrangement br 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**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/8.png) 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. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/9.png) 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 ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/10.png) center em Figure 10: Configuring Hover Effects br 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 ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/11.png) center em Figure 11: Configuring On-click Action br 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 ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/12.png) center em Figure 12: Clicking Reels br #### Global Settings ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/13.png) center em Figure 13: Configuring Reels Global Seetings br 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 ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/14.png) center em Figure 14: Configuring Reels On-click Action br 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.** Reels will auto-play on mute on your storefront. ## Adding Instagram Feed Extension in Theme Editor ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/15.png) center em Figure 15: Locating Theme Editor br 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. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/16.png) Figure 16: Clicking Add Section 6. Click **Add** on Extensions. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/17.png) center em Figure 17: Clicking Add button br 1. Click on the **"+"** icon in Extension Position. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/18.png) center em Figure 18: Adding Extension br 1. Select **Instagram Feed** extension from the dropdown. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/19.png) center em Figure 19: Selecting Extension br 1. Choose your desired Wrapper - **Post/Videos** or **Reel**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/20.png) center em Figure 20: Selecting Wrapper br 1. Click **Save**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/21.png) center em Figure 21: Clicking Save br ## Activating/Deactivating & Reconnect Instagram Feed Extension ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/22.png) center em Figure 22: Additional Configuration br * 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. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/Instagram-feed/23.png) center em Figure 23: Final Output br