1.0 Introduction
Embed Instagram image galleries anywhere on your eCommerce store and showcase a list of mapped site products with those images using Knowband’s Magento 2 Instagram Shop Gallery Extension. This is one best way to increase conversion rates directly by integrating Instagram tagged images. Instagram Shop module adds a well-known interface for the visitors which compels them to buy the related products immediately.
1.1 Striking Features of Magento 2 Instagram Shop Gallery Extension
The Magento 2 Instagram Shop Gallery Extension offers you multiple customizable features which are easy to implement for your eCommerce website. Admin can implement and configure any feature for their store without using any coding knowledge. Let us quickly take an overview of striking features by this Magento 2 Instagram product tag feed module.
1. Magento 2 Instagram Shop Gallery Extension helps e-merchants to embed Instagram gallery to their website front.
2. Magento 2 Instagram Shop Extension fetches and displays Instagram photos based on the tags specified by the admin at the backend.
3. Magento 2 Instagram Integration Extension lets admin integrate Instagram Shop gallery page to the website showing all the fetched Instagram images under different Instagram galleries.
4. Admin can enable or disable the complete working of Magento 2 Shoppable Instagram Module for their store.
5. With Magento 2 Instagram Shop Gallery Extension, admin can show the likes and comments for the fetched Instagram image.
6. The main Instagram page can be enabled or disabled from the backend of this Magento 2 extension.
7. Using Magento 2 Instagram Shop Gallery Extension, Admin can show or hide the Instagram Page link in the top menu navigation bar of the website.
8. Insta Shoppable Gallery Module for Magento 2 allows admin to set the title for the Instagram Shop Gallery Page.
9. Using Magento 2 Shoppable Instagram Module, admin can show the images of the selected type on the main Instagram page. They can show all the photos, approved ones, having related images or having both approved and related images.
10. Magento 2 Instagram Shop Extension allows admin to set a limit on the maximum number of images that can be shown on this Instagram Shop page.
11. Admin can set a URL page key for this Instagram Shop page.
12. Magento 2 Instagram product tag feed module gives the flexibility to create as many Instagram gallery for the website which can be edited or deleted as per needs. They can be separately enabled or disabled if required.
13. Magento 2 Instagram Shop Extension allows admin to select the store view in which they want to include this gallery.
14. With Magento 2 Instagram Shop Gallery Extension, the store merchant can set the gallery title, image limit and image visibility for the particular gallery.
15. Admin gets an option to show or hide the selected image gallery on the main Instagram Shop page.
16. Using Magento 2 Instagram product tag feed module, admin can set the gallery visibility on different pages of the website at different positions.
17. The eCommerce store admin can add as many images for a particular gallery which can be edited or deleted anytime.
18. Admin has to specify Instagram Hashtag in order to fetch a new image. They can select any of the images out from the fetched images whose preview is available on the same interface.
19. Admin can use the toggle button to enable or disable a particular image.
20. Insta Shoppable Gallery Module for Magento 2 also allows admin to set a sort order for the images in a category.
21. Magento 2 Shoppable Instagram Module gives an option to map desired products for the Instagram image.
2.0 Installation Guide of Magento 2 Shoppable Instagram Module
1. Once after purchasing Magento 2 Instagram Shop Gallery Extension from the Knowband store, you will get the following files on your registered email:
- Source code file of Magento 2 Instagram Shop Extension in zipped file format.
- User Manual of Instagram Shop Gallery Extension
2. Unzip the extension package.
3. Create folder{Magentoroot}/app/code/Knowband/Instagramshopgallery
4. Upload the extracted content in the above folder via FTP manager (like Filezilla or WinSCP – download here: https://filezilla-project.org/).
5. Now run below commands to install the plugin:
php -f bin/magento module:enable –clear-static-content Knowband_Instagramshopgallery
php -f bin/magento setup:upgrade
php -f bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
The Magento 2 Instagram Shop Gallery Extension is now installed and ready to use.
3.0 Admin Interface of Insta Shoppable Gallery Module for Magento 2
Just after successful installation of Magento 2 Shoppable Instagram Module on your website, you can display as many Instagram feeds on different pages of your store as per business requirements. In order to configure this Magento 2 Instagram module, navigate the settings in the given order: Admin Panel > Knowband > Instagram Shop Gallery
The simple to understand admin interface of Magento 2 Instagram product tag feed plugin has been divided into two broad sections:
1. Configuration
2. Gallery
3. Tags
4. Images
Each of these sections of Magento 2 Instagram Shop Gallery Extension has been discussed in detail below.
3.1 Configuration Settings
The configuration settings of Magento 2 Instagram Shop Extension is further divided into two sections as:
1. General Settings
2. Instagram Page Settings
3. Instagram Account Settings
4. Instagram Look and Feel Settings
Each of these settings has been discussed in the next section.
3.1.1 General Settings
Under the general settings of Instagram Shop Gallery for Magento 2, you have the following configuration options:
- Enable: On toggling this button, you can enable or disable the complete functionality of this Magento 2 Shoppable Instagram Module for your store.
- Show Likes/Comments: Enable or disable this option to show likes and comments on the Instagram feed. If enabled, the likes and comments for the particular post will be shown on the frontend to the customers.
- Enable View on the Instagram button: With the help of this option, you can enable or disable the “View on Instagram” button on the Instagram image popup.
- Enable Videos: This option allows you to enable or disable Instagram videos on the frontend.
- Display Tagged Products: With this option, you can show/hide the tagged products alongside Instagram photo.
- Display Shop Now Button: By enabling this option, you can display the Shop Now button with every Instagram photo.
- Instagram Thumbnail Photo Size: Using this option, you can set the size or resolution for Instagram photos.
3.1.2 Instagram Page Settings
Under this section of Magento 2 Instagram Integration Extension, you can make various settings for the Instagram Page.
- Enable: This option allows you to enable or disable the complete Instagram feed page whose link is shown on the menu bar of the website.
- Top Navigation: You can show or hide the Instagram page link in the top navigation menu of the website. If enabled, the Insta shoppable gallery link is shown at the menu navigation bar.
- Page Title: This option lets you set a custom title for the Instagram Shop Gallery Page.
- Image Visibility: This option decides which category of images will be shown on the Instagram page. You can set any image type out of these four options:
a. Show all photos
b. Only approved
c. Have related product
d. Approved and related product
Note: The total images can be managed from the “Gallery Settings” discussed in the next section 3.2 - Image Limit: This option will set the maximum number of images to be shown on this Instagram Gallery page.
- Page Url Key: Using this option, you can set a desired URL key for the Instagram Shop Gallery Page.
- Meta Title: This option allows you to set your own meta title for Instagram shop page.
- Meta Description: This option allows you to set the desired meta description for Instagram shop page.
- Meta Keywords: This option allows you to set your meta keywords for Instagram shop page.
- Show Follow Us Link: Using this option, you can show/hide a Follow Us link on the image popup.
3.1.3 Instagram Account Settings
- Enable Search from Account: This option will enable or disable the Instagram image search using the account.
- Access Token: Set the generated access token using this option.
- Instagram Display Name: With this option, you can set the display name for the Instagram page.
- Instagram Profile URL: With this option, you can set the desired Instagram profile URL.
3.1.4 Instagram Look and Feel Settings
- Set “Follow” button title: This option helps you to set the title for the Follow button.
- Set “Follow” button text color: This option sets the font color for the Follow button.
- Set “Follow” button background color: This option sets the background color for the Follow button.
- Set “Follow” button border color: This option sets the border color for the Follow button.
- Set “Follow” button text hover color: This option sets the text hover color for the Follow button.
- Set “Follow” button hover color: This option sets the hover color for the Follow button.
- Set “Follow” button hover border color: Using this option, you can set the hover border color of Follow button.
3.2 Gallery Settings
The Instagram images that will be fetched and shown on the website can be configured under this section of back-office. You can create multiple Instagram Shop galleries for your website and can even edit the settings of the existing gallery. You can show as many images in each of the Instagram gallery using relevant hashtags and show related products for those images.
The below interface shows a list of existing Instagram Gallery which can be edited or deleted. You can edit the existing images or you can add new images to the Instagram gallery.
From this interface, you can perform the following sequence of actions:
3.2.1 Add a New Gallery
To add a new gallery, click on “Add New” button at the top right corner of the screen.
- Enable/Disable: Toggle this button to enable or disable the Instagram gallery.
- Store View: With this option, select the store views where you want to include this gallery.
- Gallery Title: This option allows you to set a title for the gallery.
- Image Visibility: With this option, the images of the selected type will be shown on the frontend.
- Image Limit: Using this option, set the maximum number of images for this gallery.
- Display Follow Us button: This option allows you to show Follow Us button for the selected gallery.
- Include in Main Page: You can enable this toggle field if you want this gallery to be added on the Instagram main page at the front.
- Layout Type: With this option, you can set the gallery layout type as a carousel or grid view type.
- Auto Play: Enable this option if you want auto play for the carousel.
- Page Visibility: With this option, you can set visibility of Instagram gallery on various pages. Simply Click on Add button to display this gallery on different pages.
3.2.2 Edit the Existing Gallery Settings
You can easily edit the existing settings of the gallery by clicking on the “Edit” button corresponding to the gallery you want to configure.
- Enable/Disable: Toggle this button to enable or disable the Instagram gallery.
- Store View: With this option, select the store views where you want to include this gallery.
- Gallery Title: This option allows you to set a title for the gallery.
- Image Visibility: With this option, the images of the selected type will be shown on the frontend.
- Image Limit: Using this option, set the maximum number of images for this gallery.
- Include in Main Page: You can enable this toggle field if you want this gallery to be added on the Instagram main page at the front.
- Page Visibility: With this option, you can set visibility of Instagram gallery on various pages. Simply Click on Add button to display this gallery on different pages.
3.2.3 Add and Edit Images
Now once you have created a gallery, you can add multiple images to it by clicking on the “Images” button corresponding to the gallery.
The above screen shows you a list of existing Instagram gallery. You can add new images, modify or delete the existing images.
Note: Deleting an image is easy, you just have to click the “Delete” button corresponding to the image.
3.2.3.1 Add New Image
In order to fetch and add images to a particular Instagram gallery, there are three ways you can prefer.
- Enter the relevant tag of your choice and search those tagged photos from the whole of Instagram. Select “Instagram” and click on “Fetch” button.
- The other option is that you can select “Saved Photos” option. This will fetch all the images that have been already added to any Instagram Gallery.
- The option “From Account” fetches images and videos from a particular Instagram profile or account which you have set from backend.
3.2.3.2 Edit an existing image
- Image: This option lets you check the preview for the fetched Instagram image.
- Approve: With this option, you can approve or disapprove the image.
- Map Gallery: This option allows you to select the gallery in which you want to show that particular image.
- Add Tags: Using this option, you can select the tag or category under which the image will be shown.
- Sort Order: This option lets you set the sort order of image.
- Related Products: This option allows you to select the related products that you want to show for that image. For this, you have to click on “Click on the image to tag related products” text shown in green color. This will allow you to pin unlimited site products to that image.
3.2.4 Delete the Existing Gallery
Deleting a gallery is simple, you just have to click the “Delete” button corresponding to the desired Instagram gallery.
3.3 Tags Settings
From this interface, you can perform 3 actions as:
- Add a new tag
- Enable/Disable: This option allows you to enable or disable the selected tag.
- Store View: Using this option, select the store view in which you want to include the tag.
- Page Title: This option allows you to set the title for the tag page.
- Meta Title: This option allows you to set the meta title for the tag page.
- Meta Description: This option allows you to set the meta description for the tag page.
- Page URL Key: This option sets a unique page URL.
- Meta Keywords: With this option, you can set the meta keywords for the tag page.
- Max Number of Photos Displayed: This option sets the maximum photo limit for a particular tag.
- Display Follow Us Link: This option allows you to show/hide Follow Us link on tag page.
- Load More Type: Using this option, select the Load More type as:
- Click on Load More button
- Auto (when scroll down)
- Load More Button Text Color: This option lets you set the text color for the Load More button.
- Load More Button Background Color: This option lets you set the background color for the Load More button.
2. Edit existing tag
You will see the same configuration options when you edit the existing tag.
3. Delete existing tag
You can simply click on the Delete button corresponding to a particular tag.
3.4 Images Settings
From this interface, you can easily manage the total images fetched and added for various Instagram Gallery. You can add a new image, edit the existing one or delete them.
4.0 Front Interface of Insta Shoppable Gallery Module for Magento 2
A) Instagram Shop Page
Customers will see this Instagram Gallery option on the top menu bar.
Upon clicking the tab, they will be redirected to the Instagram Shop Page with URL key as “https://ma2testing.knowband.com/ma215/instagramgallery/”. This URL can be defined as per your own site needs. The Instagram Shop Gallery looks like in the image below:
B) Likes and Comments for Instagram Image
C) Show Instagram Gallery on Homepage
D) Show Instagram Gallery on Product Pages
E) Show Instagram Gallery on Category Pages
On clicking any of the images, customers will see the following image popup.
