Configuration
To configure the Instagram Shop, on the Admin sidebar, go to Store > Configuration > Magenest > Instagram Shop
Configurations in General, Instagram Stories and Create Sample Widget sections are editable in Default Scope and can be shared between all scopes. Other configurations are specific to each website and only viewable when switching to a Website Scope.
Get Photos on your Instagram Account section:
Switch scope to your preferred website, then click on the Get Photos Now button to get all photos from the Instagram account connected to that scope.
General
- Add Gallery Link to 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.
- Hover Effect: Choose the effect when hovering on photos in the gallery.
- 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 the Product page.
- Button Title: The title of the button under the Instagram Slider.
- Button CSS: Flexible to change the button style with CSS.
- Featured Product Display Option: There are 2 options for the display: Product Name & Product Name with Image.
- Display Instagram Collection Block on Product Detail Page: Choose Yes to show related Instagram Photos on the product page
- Hashtag on Block: The hashtag linked with an 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.
Get Hashtagged Photos from your Instagram Account: Pull specific photos using specified hashtags from your connected Instagram account to Magento 2 store.
- Hashtag: Tags should be separated by commas.
Remember to Save Configuration before get tagged photos
Get Hashtagged Photos from Public Instagram Accounts: Pull top photos using specified hashtags from all public Instagram accounts to your Magento 2 store.
- Hashtag: 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 their 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 the Stories Carousel at a time. If the number of stories exceeds this amount, the Carousel will scroll automatically 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
All Photos pulled from Instagram are accessible in separate Photos Grid for each type:
Instagram Photos
Instagram Hashtagged Photos
Instagram Top Photos
Each Grid can manage photos from all Scopes, and allow updating photos on all websites or specific ones.
Manage (Personal) Photos
On Magento backend, go to Instagram Shop > Instagram Photo to see all personal photos pulled from connected Instagram accounts.
You can choose Actions to delete image(s); show or hide the selected image(s) in the Instagram Widget/Gallery page.
To prioritize a photo in sliders, click on its entry in the grid, and modify the Position on Slider column. Photos with a higher position number will be displayed first.
Add featured product hotspots to a photo
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.
- Use the Product in Category section to search and attach Products to the Photo:
- To enable a product, tick the checkbox at the leftmost of the table, and set position at the rightmost column from 1 to 5.
- Click on Add Product button to confirm and save the hotspot configuration.
- If you want to add the featured products to the photos without hotspots, only add Product SKU and DO NOT drag the hotspot into the photo.
Manage Hashtagged Photos
- To manage your personal photos with matched hashtags, go to Instagram Shop > Instagram Hashtagged Photo
- On the hashtagged grid, you can use mass Actions to delete the selected image(s) or toggle its visibility in the Instagram Gallery page.
Manage Top Photos
- Instagram Shop > Instagram Top Photo to manage top public photos from Instagram that matched the hashtags you’ve specified.
- With the Top Photos grid, you can use mass actions to delete the selected image(s) or toggle its visibility in all Instagram Widgets.
Manage Stories
- Go to Instagram Shop > Instagram Story to see all the stories pulled from your Instagram account.
- Similar to Photos Grid, Story grid displays stories from all scope and can pull the latest stories from all scopes/specific scope.
- You can choose Actions to delete, show, or hide the selected image(s) displayed in the Instagram widget/gallery page.
Photos Indexer
All Photos pulled from Instagram are scheduled to be downloaded and resized locally using Indexer. Photos that haven't been downloaded are full-size and accessible using Facebook URL instead.
By default, Indexer will periodically process fetched Photos in the background. If you require downloading and resizing Photos right after it was fetched, visit System > Index Management and set our Indexer mode to Update On Save instead of Update By Schedule.
Note: - Update On Save mode will slow down the Update Photos process significantly. We recommend using Update By Schedule mode for the best experience. - Update By Schedule mode requires Magento crontab installed on the system. |
---|