How to create and display Instagram/TikTok feeds on your store

After connecting your Instagram or TikTok account with Mageplaza Instagram Feed, if you skip the onboarding steps, you can still create and display your feed by going to Manage Feeds. Here’s how to do it.

How to create Instagram/TikTok feeds

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

I. Choose and arrange posts

Choose the source

From the Source dropdown, select either Instagram or TikTok to start creating your feed.

If you haven’t connected any Instagram or TikTok account yet, the screen will look like the one below. At this point, simply click the Connect button to link your account.

If you have connected with your Instagram/TikTok account, you can pick an account under Active accounts to pull media from (up to 50 posts).

If an account shows a fail to connect due to invalid token message:

• Click Reconnect to reauthorize access.
• Once successful, the account will move to the Active accounts section and can be selected.

Configure feed information

• Feed name: Edit the feed name if you don’t want to use the default one.
• Feed status: Set the feed status by clicking on the switch button.

Choose and adjust posts from your Instagram/TikTok account

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

• Post type:
  • Image: Posts include images only.
  • Video: Posts include video only.
  • Mixed-type: Posts include both images and videos.
• Story type:
  • Image: Stories include images only.
  • Video: Stories include video only.
• Post creator:
  • Owner: Posts from the main account manager.
  • Collaborators include two types of media: collab posts and tagged posts.
    • Collab posts: Posts from guest contributors or team members.
    • Tagged posts: Posts where the guest’s account has been tagged.

• 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 one or more media to the top.
  • Hide all: Hide one or more media.

• Icons & action:

• To pin a media to the top, hit the Pin to top icon at the post you want.
• To show/hide a specific media, 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 on each media, and a modal will appear where you can tag available products from your store.
• Select a position on the post to tag products.
• Click on the trash icon to remove any product.
• With the Rearrange products feature, you can drag the dots on the left to change their positions.
• Click Confirm to save the update.
• The number of tagged products is displayed next to the Tag product button.

Note: After tagging products, customize how they appear in your store by heading to the @Product tagging posts@ section. Click the @Product tags@ button to adjust the display style to best fit your needs and design preferences.

• Auto-tagging products

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 for 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 Instafeed.
• Heading: Set up the feed heading.
• Spacing: Set up the feed spacing.
• Advanced settings: Customize the feeds with advanced settings (Setup Background color, Video auto play, Setup layout for stories, Media overlay and Custom CSS).

1. Layout type

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

• Grid: Images/videos will be displayed in rows and columns.
• Slider: Images/videos will be displayed in a horizontal slider.
• Highlight: The posts show one main image, with the others arranged in order after it.
• Coverflow: Display your images and videos in an interactive, 3D-style carousel. The center post is emphasized while others smoothly flow to the sides.

Layout settings

For the Grid and Highlight layout

• Number of media: 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.
• Rows: Set the number of rows to display in the feed (available on Grid and Highlight).

For Slider layout

• Number of media: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.
• Auto slide: Enable auto-scrolling through posts in the slider.

For Coverflow layout

• Number of media
• Columns
• 3D image rotation: Adjust the rotation angle of images to enhance the 3D effect.
• Auto slide:

Media settings

• On media click action: Choose what happens when customers click on an image.
  • Do nothing: No action will be taken when customers click on an image.
  • Show media full information: When customers click an image, a pop-up will open showing the full post.
  • Show media only: A pop-up will open showing only the media (image or video), without captions, tags, or product info. (This action will only appear if you select Instagram as the source; it is not available when TikTok is selected.)
  • Redirect to Instagram/TikTok: Customers will be redirected to the corresponding Instagram post when they click an image.
• Show like and comment counts (Instagram only): Display the number of likes and comments on your Instagram posts. (Note: This feature is only supported for Instagram feeds. TikTok feeds do not display like or comment counts.)
• Show caption: Show the caption of your media.
• Post ratio: You can select the post size (1:1, 4:5 and 9:16)
• Post border radius: Adjust the border radius of media by percentage to round the corners.

Button (available on Grid and Highlight 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.

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.

• Instagram account information (for creating Instagram feed): 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.

• TikTok account information (for creating TikTok feed): Show information relevant to your TikTok account.
  • Show avatar: Display the TikTok profile picture.
  • Show account name: Show the TikTok account’s name.
  • Show “Follow” button: Add a “Follow” button to let customers follow directly from the feed.

3. Spacing

• Spacing between section text and posts: Adjust the gap between the section heading/subheading and the media feed.
• Post spacing: Control the space between each individual post (image or video).
• Top padding: Add space above the entire feed section.
• Bottom padding: Add space below the feed section.

4. Advanced settings

Background for feed

• Transparent: Keeps the feed background see-through, blending with your page.
• Background color: Allows you to choose a solid color for the feed background.

Video autoplay (for mobile)

• When posts appear: Automatically play videos as soon as they enter the viewport.

Video autoplay (for desktop)

• None: Videos will not play automatically. Users must click to play.
• When posts appear: Automatically play videos as soon as they enter the viewport.
• When hovering over a post: Videos will only autoplay when a user hovers their mouse over the specific post.

Note: The video autoplay feature is not supported on TikTok feed.

Separate stories and regular posts

• Show stories carousel at top: Displays your Instagram Stories in a dedicated carousel above the regular feed posts.

Note: The Separate stories and regular posts feature is not supported on the TikTok feed.

Media overlay (for desktop only)

This setting allows you to display additional information or branding over each media post when users view the feed on desktop.

• Show Instagram logo: Display the Instagram icon overlay on each post to indicate the source.
• Show content: Display the post caption, description, or other content overlay when users hover over the media.

Custom CSS

• Add your own custom styling here (e.g., .className { background-color: red; }).
• Ideal for advanced users who want more design flexibility.

How to show Instagram/TikTok feeds on your store

Here, we will divide it into two cases:

#Case 1: For users creating a feed for the first time

#Case 2: For users who have completed the onboarding steps or have already created a feed.

Case 1: For users creating a feed for the first time

After clicking Save button to complete the creation feed process, a modal will appear as shown in the screenshot below:

You just need to click “Preview on theme” to move to the store theme — there’s no need to copy or paste the feed ID on the store theme like in Case 2.

Case 2: For users who have completed the onboarding steps or have already created a feed.

After clicking Save button to complete the creation feed process, a modal will appear as shown in the screenshot below:

Please copy the feed ID and click Preview on theme to move the store themes.

I. On homepage and other pages

1. OS 2.0 theme

Ensure that you have embedded Mageplaza Instagram Feed on your themes and click Save.

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

Then, check the result on the storefront.

2. OS 1.0 theme and other themes

Add the block Custom Liquid or Custom HTML > paste the snippet code into HTML content > Save.

Then, check the result on your storefront.

II. On product pages

Mageplaza Instagram Feed enables you to showcase relevant Instagram posts on product pages by tagging products. This makes it easier for customers to discover related content, enhancing the shopping experience and building stronger engagement with your brand.

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