Skip to main content

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: Customize posts fetched from your Instagram account

  • To update bulk posts, click on the Select all checkbox > choose Show all or Hide all.

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

Show a post

Hide a post

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

  • To tag products into a post, follow the steps:
    • Click the 'Tag Product' button to open a media popup.
    • Add products in different positions for each media.
    • Click 'Confirm' to save the product after each addition.
    • The number of products added will be displayed next to the 'Tag Product' button.

  • With the Rearrange products feature, you can drag and drop each media to adjust the positioning and display sequence of your media content.

Note: Typically, during the data synchronization process, media is organized in chronological order based on your posting timeline within the app.

Drag and drop

Step 3: Select the Next button at the top right corner to save the information.

II. Customize feed settings​

Before going to the detailed instructions, please note that you can preview settings on each device type to ensure the feeds display correctly as desired.

  • Desktop: Display the desktop illustration.

Desktop

  • Mobile: Display the mobile illustration

Now, let’s start the configuration!

Step 1: Layout type:

Select the layout type 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 media shows one main image, with the others arranged in order after it.

Arrange the posts in your layout

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

  • On post click action: Allow customers to reach Instagram posts directly.

    • Do nothing: Do not show anything when customers click on any images.
    • Open post pop-up: Open the popup showing the posts when customers click on any images.
    • Redirect to Instagram: Redirect customers to an Instagram post when they click on an image.

  • Columns: Number of post columns on the feed (available on Grid and Slider).

  • Rows: Number of post rows on the feed (only in Grid).

  • Auto slide: Automatically move to the next slide after a few seconds.
  • Time duration: Set the amount of time before moving to the next slide (from 1 to 20 seconds).

Note: These features only appear when you choose the Slider layout type.

Customize the button to show more posts

  • Content: Change the text of the button to see more posts.
  • Border radius: Change the roundness of the button.
  • Background color: Change the background color of the button.
  • Text color: Change the text color of the button.

Step 2: Heading & subheading:

Both heading and subheading fields are similar as follows:

  • Text box: Enter the heading & subheading text.
  • Text size: Update the heading & subheading size* by entering the numbers or using up and down arrows.
  • Font: select the font for the heading & subheading.
  • Text color: Select the text color on the palette or enter the color code.
  • Checkbox: Tick the checkbox to show/hide the heading & subheading.

Available value: 10/11/12/13/14/15/16/20/24/32/36/40/48/64/96

Step 3: Spacing:

  • 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.

Step 4: Advanced settings:

You can set up an advanced layout meeting your specific needs for the Instagram feed by adding CSS content in this section.

Click the Save button to save the feed customization.

Then, a popup will show the feed information. Kindly copy the Feed ID to customize the media position and click on Preview on theme to add the feed to your storefront.

How to show Instagram feeds on your store​

I. OS 2.0 theme​

In the Shopify App embeds, active Mageplaza Instagram Feed application if you haven't done it before.

On the theme, choose a destination to place the Instagram feed and paste the feed ID. You can add many feeds on the theme.

Click on the Save button to save the Instagram feed.

Enter Feed ID

Check the result on the storefront.

II. OS 1.0 theme and other themes​

Besides the OS 2.0 theme, the Mageplaza Instagram Feed app is compatible with other various themes.

Step-by-step Guide:

  • Follow the instructions displayed in the popup window.
  • Copy the HTML code provided.
  • Navigate to your theme settings.
  • Paste the copied HTML code into the designated area.

Add HTML code

Note: Please note that you should insert the code under the head section and within the body section.

Key takeaway: After configuring Feed, Layout, and Advanced settings, you have successfully finished creating and showing Instagram feeds on the store. Remember to fill out each field carefully for a perfect outcome.