How to create and display Instagram feeds on your store

After connecting your Instagram account with Mageplaza Instagram Feed, you need to create and display the feed on your storefront. Here’s how to do it.

In Mageplaza Instagram Feed, access Manage feed > Create new feed to add a feed.

How to create Instagram feeds

I. Choose and arrange posts

Step 1: Configure feed information

• Feed name: Add a name for the feed

• Feed status: Set the feed status by clicking on the switch button.

Step 2: Choose and adjust posts from your Instagram account

• Filter: You can select multiple options to filter your Instagram posts

  • Post type:

    • Image: Posts include images only.

    • Video: Posts include video only.

    • Multiple: Posts include both images and videos.

  • Post creator:

    • Owner: Posts from the main account manager.

    • Collaborators: Posts from guest contributors or team members.

  • Hashtags: Search hashtags to find posts related to specific topics.

• Mass action: To update bulk posts, click on Mass action > Tick on the total post number.

  • Pin to top: Pin all products to the top.

  • Hide all: Hide all posts.

• Icons & action:

  • To pin a product to the top, hit the Pin to top icon at the post you want.

  • To show/hide a specific post, click on the eye icon on this post.

  • Rearrange products: Drag and drop posts to rearrange their positioning.

• Tag product:

  • Click the Tag Product button to open a post popup.

  • Select a position on the post to tag products.

  • Click on the trash icon to remove any product.

  • Select Hide white dots on the storefront to hide the tagging dots.

  • With the Rearrange products feature, you can drag and drop each post to adjust the position and display your Instagram content.

  • Click Confirm to save the update.

  • The number of tagged products is displayed next to the Tag product button.

  • Tip: Tag products to create shoppable feeds and showcase reviews or ratings. Go to Product tags to set up.

II. Customize feed settings

You can customize the feed depending on your demand:

• There are 2 settings for Mobile and Desktop, then please check the configuration respectively.

• Tick Apply mobile settings for desktop to apply all mobile settings to the desktop (no need for separate customization).

Here are 4 main sections to customize the feed:

• Layout type: Select the layout type for your Instagram feed.

• Heading: Set up the feed heading.

• Spacing: Set up the feed spacing.

• Advance settings: Customize the feeds with advanced settings.

Screenshot

1. Layout type

Select the layout types to show the Instagram posts on your store:

• Grid: Images will be displayed in rows and columns.

• Slider: Images will be displayed in a horizontal slider.

• Highlight: The posts show one main image, with the others arranged in order after it.

Screenshot

Layout settings

• Number of posts: Set the number of images/posts you want to display on the feed (up to 50 posts).

• Columns: Choose the number of columns to display in the feed (available for both Grid and Slider layouts).

• Rows: Set the number of rows to display in the feed.

Post settings

• On post click action: Choose what happens when customers click on an image.

  • Do nothing: No action will be taken when customers click on an image.

  • Open post pop-up: A pop-up will open showing the full post when customers click an image.

  • Redirect to Instagram: Customers will be redirected to the corresponding Instagram post when they click an image.

• Show like and comment counts: Show the like and comment number of your posts.

• Show caption: Show the caption of your posts.

• Post ratio: You can select the post size (1:1, 4:5 and 9:16)

• Post border radius: Adjust the border radius of images by percentage to round the corners.

Button (available on Grid layout)

• Content: Change the text for the button.

• Border radius: Adjust the border radius for the button.

• Text color: Select the color for the button text.

• Background color: Select the color for the button background.

Screenshot

2. Heading

Heading type:

• Custom text: In Custom text section, title and subtitle have the same settings.

  • Title/Subtitle: Tick/untick the box to show/hide the title/subtitle.

  • Content: Fill in the title/subtitle text.

  • Text size: Set up the text size.

  • Font weight: Set up the font weight to make the text bolder or lighter.

  • Text color: Select the text color to fit your theme.

Screenshot

Screenshot

• Instagram account information: Show information relevant to your Instagram account.

  • Show avatar: Display the Instagram profile picture.

  • Show account name: Show the Instagram account’s name.

  • Show “Follow” button: Add a “Follow” button to let customers follow directly from the feed.

  • Show number of followers: Display the total number of followers to build social proof.

  • Show number of posts: Show the total number of posts to highlight content activity.

3. Spacing

• Spacing between section text and posts: Distance unit (px) you want to custom between section text and posts.

• Post spacing: Distance unit (px) you want to custom among posts.

• Top padding: Distance unit (px) you want to custom between your feed and the above content section.

• Bottom padding: Distance unit (px) you want to custom between your feed and the below content section.

4. Advanced Settings

Background for feed

• Transparent: Set the feed background to transparent, which blends with the page background.

• Background color: Choose a color for the feed background.

Video autoplay

• None: No autoplay

• When posts appear: Automatically play videos when posts appear.

• When hovering over a post: Automatically play a video when customers hover over a post.

Media overlay: Choose display effect when hovering over a post

• Show Instagram logo: Tick the box to show the Instagram logo

• Show content: Tick the box to show the content you want customers to see. You can set up the Content settings to adjust the content.

  • Text: Fill in the text of the media overlay.

  • Text size: Set up the text size.

  • Font weight: Set up the font weight to make the text bolder or lighter.

  • Text style: Select the text style olor to fit your theme.

  • Text color: Select the text color to fit your theme.

Custom CSS: Set up an advanced layout that meets your specific needs for the Instagram feed by adding CSS content to this section.

Click the Save button to save the feed customization.

Then, a popup will show the feed information. Kindly select your theme type > copy Feed ID > Preview on theme to add the feed to your theme.

How to show Instagram feeds on your store

I. On homepage and other pages

1. OS 2.0 theme

Add App section to a destination > Mageplaza Instagram Feed block > paste feed ID on the Feed ID section > Save.

Check the result on the storefront.

2. OS 1.0 theme and other themes

Add the block Custom Liquid or Custom HTML > paste the feed ID to HTML content > Save.

II. On product pages

Mageplaza Instagram Feed allows you to showcase relevant Instagram posts on product pages by tagging products and helping customers discover related content. This enhances the shopping experience and builds stronger engagement with your brand.

To begin displaying content, go to Show posts on product pages.