Installation



Filter on Product Page

Backend Configuration (Admin side)

Instagram Account Configuration steps

Before setting up admin configurations, it is required to create and configure developer account on Instagram. Follow below steps to configure developer account.

  1. Open url https://www.instagram.com/developer/.
  2. From top menu bar, select Manage Clients.
  3. Click on Register a New Client to create an Instagram client account.
  4. After creating a client Account, click on Manage link.
  5. Copy Valid redirect URI from Admin Configuration and enter into Valid redirect URIs text box under Security Tab.
  6. Client Id and Client Secret key are then available in Instagram developer account.

Instagram Connect Configurations

Go to Admin Control Panel > Instagram Connect > Settings

  • Client ID: Copy from Instagram developer account and paste it here.
  • Client Secret: Copy from Instagram developer account and paste it here.
  • Authorize: Click the button to authorize the client store details configured in developer account. It will automatically fetch below 2 fields -

    • It will automatically fetch below 2 fields - Account ID and Access Token.

  • Valid redirect URI: On installing the module it will automatically add the redirect URI (Copy URI from here and paste it in Instagram configuration settings.
  • Enable Instagram Link in Top Link: Display a link of Instagram gallery in header of the page.
  • Instagram Gallery Link Slug: Add a slug / URL key for the Instagram gallery page. It will create page URL using the slug provided.
  • Instagram Gallery Link Label: Add label of the Instagram gallery page.
  • Show Image on CMS Page: Select "yes" to display Instagram gallery image on CMS page. Copy and paste the given code (below the text field) on CMS page and also set how many images should get displayed.
  • Show Image on Product Page: Select "yes" to display Instagram gallery image on product page.
  • Filter on Product Page: Select whether to display images by filtering using Hash tags or Associated products.
    • Filter by Hashtags: Display Instagram images on a product page with the same hashtags on Instagram posts.
    • Filter by Associated Products: Display Instagram image on all associated product pages on frontend i.e. products which are assigned to the markers on the image.
  • No. of Images to show on Product Page: set number of Instagram images to be display on product page on frontend.
  • Get Account Photo Gallery: Get all the images from Instagram account to admin panel under Instagram Images grid.

Instagram Auto Import

  • Enable Instagram Auto Import: Set Yes to enable auto importing Instagram gallery to your store admin panel. All images will be stored in a separate grid and admin will be able to manage them all.
  • Default Instagram Image Status: On importing the images, set the default status of each image. The images with approved status will get displayed on frontend under the dedicated page of Instagram Gallery.
  • CRON JOB Frequency: Select frequency to fetch the Instagram gallery images automatically daily, weekly or monthly.
  • CRON JOB Start Time: Set the time to run the CRON job to import the images from Instagram account.


Backend Functionality

Go to Instagram Connect > Instagram Images and find the grid containing all images from connected Instagram account as display below.

Instagram Images

  • View and manage list of Instagram images in admin. click on Select dropdown from Action column to add the marker, assign products and sort the product order.
  • Change the status of the image(s) from using Actions dropdown. Please note that only images with "Approved" status will get displayed on frontend.

Instagram Image Settings

  • Sort Order: Set number from zero (0). It will sort the Instagram images on dedicated gallery page on front-end.
  • Description: Write description for image. It will get displayed on front-end.
  • Position Top: On drag and drop marker image the coordinate of top position will be fetched automatically.
  • Position Left: On drag and drop marker image the coordinate of left position will be fetched automatically.
  • Product One: Set the product id to assign to the marker. The name of the product will get displayed on the front-end where marker image has been placed.

It is mandatory to first click on "Save Markers" button before saving the other settings. Maximum 4 products can be assigned to one Instagram image. Follow the same process to assign 2nd, 3rd and 4th images as described above for 1st image.

Image Hashtags

Go to catalog > Products and select the product for which hashtags are to be assigned then go to Instagram tab to select the hashtags.

  • Instagram Hashtag: Select the hashtags and save the product. Products which have been assigned to Instagram images with the same hashtags will have all images displayed on product detail page on front-end.


Frontend Functionality

Instagram Gallery Page

  • Instagram images which are approved will get displayed on a dedicated page. On click of image, a popup will get displayed as shown in below image.

Instagram Image Popup

  • Markers which have been placed on the image with the products associated (from admin panel) will get displayed on front-end with product name over it and the products will also be visible on the popup. Users can click on the product and visit the product detail page to make process.

Instagram Image on Product Detail Page

  • Click on the Instagram gallery image will open a popup as shown in Instagram image popup.


Demo

Click here to visit frontend.

Click here to visit backend admin panel.


Sample Data



FAQs

Click here to visit FAQs.


Support

Click here to raise a support ticket using your MageDelight account.


Additional Services

Click here to get the customized solution for this extension.


Thank you for choosing MageDelight!