Configuration
In order to configure the Instagram Shop, on the Admin sidebar, go to Store > Configuration > Magenest > Instagram Shop
Get Photos on your Instagram Account section: Click on the Get Photos Now button to get all photos of your Instagram account.
General
- Add Link to Gallery in frontend Main Menu: Add the Instagram Gallery category to the top menu bar.
- Gallery Layout: Select the layout to display the Instagram photos on the gallery page.
- Gallery Effect: Select a suitable effect for the gallery page, according to the selected layout above.
- Gallery Effect Option: Select an additional effect for Gallery page, based on the selected Gallery Effect above.
- Media Type pulled from Instagram: You can choose to pull Only Image or Both Image and Video.
- If you choose to fetch Only Image, note that the video pulled from Instagram will be displayed with only the thumbnail of that video.
- If you choose to fetch Both Image and Video, you should set up and run the Cron Job for your server to update the video links. Otherwise, you’ll have to update the links manually by clicking on the Get Photos Now button above.
- Hotspot Style: Choose the style of hotspots that will be displayed in the popup.
- Enable Button View Gallery: Display a button under the Instagram Slider and Instagram Collection on Product page.
- Button Title: The title of the button under the Instagram Slider.
- Button CSS: Flexible to change the button style with CSS.
- Display product view: There are 2 options for the display: Product Name & Product Name with Image.
- Display Instagram Collection In Product Detail: Choose Yes to show the Instagram collection on the product page
- Hashtag: The hashtag linked with Instagram hashtag, displayed in the Instagram block on the product detail page.
- Block title: The title of the Instagram block on the product detail page.
- Block content: The content of the Instagram block on the product detail page.
Remember to save the configuration.
Fetch Hashtagged Photos: Pull specific photos using hashtags from your Instagram to your Magento 2 store.
- Tags: Tags should be separated by commas.
Remember to Save Configuration before get tagged photos
IG Hashtag Search: Pull top photos on Instagram using hashtags from public account Instagram to your Magento 2 store.
- Tags: Tags should be separated by commas.
Instagram Stories: Pull the latest photo stories from your personal Instagram account to your Magento 2 store (Video stories not supported currently).
- Keep Expired Stories: Choose “Yes” to keep stories from being deleted after 24 hours. Undeleted stories are saved on your Magento 2 sites and can be viewed regardless of its availability on Instagram.
- Show Instagram Stories in Gallery: Choose to display Instagram Stories on the Gallery page or not.
- Story Quantity Limit: Choose the maximum number of story items displayed in Stories Carousel at a time. If the number of stories exceeds this amount, Carousel will display automatically in order to display extra items.
Create an Instagram Widget
Admin can add the Instagram widget by going to Content > Widget > Add Widget
On the widget page
- Type: Choose an Instagram Slider
- Design Package/Theme: Select the current theme that is activated on your site
- Then click on Save and Continue Edit.
On the Storefront Properties section
- Widget Title: Enter the title of the Instagram widget that will be shown on the front-end.
- Then assign the widget to the Store view you need
- Sort Order: Set the order of the widget that will appear in the same container
- Layout Updates: Choose the page/position to display the widget as your wish. You can choose 1 of 4 widget layout Templates: Single row, 3x3, 4x3 and 4 + 1 with 1 bigger photo.
On the Widget Options section
- Title: Enter the title of the Instagram widget to be displayed on the front-end store.
- Select Photo Source: Choose Instagram Photos or Instagram Top Photos.
- Image Resolution: sets the image resolution based on the size of photo.
- Display Instagram Stories: Choose whether to display Instagram stories in this slider or not.
- Photo Quantity Limit: Enter the maximum number of carousel items that could be visible. If this field is left blank, the default setting is All existing carousels.
- Sort Photos By: You can select to sort photos from the Newest, Oldest, Most Liked, and Most Commented.
- Items/1 slide (desktop): Enter the number of items per slide on desktop view
- Items/1 slider (tablet): Enter the number of items per slide on tablet view
- Items/1 slider (mobile): Enter the number of items per slide on mobile view
- Slides to Scroll: Enter the number of slides that will be displayed in one scroll
- Animation loop: Choose Yes to make the slider into an infinitive loop instead of ending at the final image.
- Animation Dots: Choose Yes to turn the slider page using animation dot icon
- Animation Arrows: Choose Yes to turn the slider page using the animation arrow icon
- Center Mode: Choose Yes to display the first image at the center of the slider
- Center Padding: If you choose Yes in Center Mode, you’ll be able to set the distance between the center image and the rest of the same slide.
- Lazy Load: Choose Yes if you want to enable the lazy load and optimize the slider speed
- Autoplay: Choose Yes if you want the slider to scroll automatically
- Autoplay Speed: Set the speed for the slider display automatically
- RTL: Choose Yes if you want the slider to scroll from right to left and vice versa
Manage Photos
On Magento backend, you can go to Instagram Shop > Instagram Photo to see all of the photos pulled from your Instagram account.
You can choose Actions to delete, show, or hide the selected image(s) displayed in the Instagram widget.
Manage Tagged Photos
In order to managed all tagged photos, go to Instagram Shop > Instagram Tagged Photos
Add hotspot(s) to featured products
In order to create the hotspots to pin on the featured products on Instagram photos (which is displayed in the Instagram Gallery on Magento Store), go to Instagram Shop > Instagram Photo. You will see the option to Create/Edit Hotspot for each photo in the grid table.
On the Hotspot page
- You can add up to 5 hotspots to an Instagram photo by drag and drop each hotspot to the item in the photo.
- Fill in the hotspot field the SKU of the corresponding product to redirect the user to the correct product page.
- If you want to add the featured products to the photos without hotspots, enter the SKUs in the Hotspot (1/2/3/4/5) Product SKU and DO NOT drag the hotspot into the photo.
Manage Stories
- Go to Instagram Shop > Instagram Story to see all the stories pulled from your Instagram account.
- You can choose Actions to delete, show, or hide the selected image(s) displayed in the Instagram widget/gallery page.