Skip to main content

How to create and display TikTok feeds on your store

After connecting your TikTok account with Mageplaza TikTok Feed, you can display the lively TikTok images and videos on your store. Follow this detailed guide to create and show TikTok feeds.

How to create TikTok feeds​

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

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 (There are two options: On or Off status).
  • Feed ID: This field is generated only when you successfully create and save the feed.

Feed settings on Theme 2.0

Feed settings on Vintage theme

Step 2: Customize posts fetched from your TikTok account

To update bulk or all posts, click on the Select all checkbox > choose Show media or Hide media. In this section, if you select just one box, our app will appear mass action for you, too: Show media or Hide media.

  • To show/hide a specific post, click on the eye icon on that 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.

  • To rearrange posts, 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.

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

Step 2: Heading & subheading:

  • Text box: Enter the heading text.
  • Font size: Update the heading size by entering the numbers or using up and down arrows.
  • Font: Select the font for the heading.
  • Align: Choose how the text looks in 3 types of alignment, including Left, Center, and Right
  • Text color: Select the text color on the palette or enter the color code.
  • Checkbox: Tick the checkbox to show/hide the heading.
  • Spacing between text and post sections: Customize the distance unit (px) you want to custom between the heading text and the post section

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

Step 3: Feed display

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

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

    • Show post pop-up: Open the popup showing the posts when customers click on any videos.

    • Redirect to TikTok: Redirect customers to a TikTok post when they click on a video.

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

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

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

  • Button text: Change the content 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 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.

[]

Finally, 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 OS 2.0 theme to check the feed on your shop.

In the Shopify App embeds, activate the Mageplaza TikTok Feed app and save the change.

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

Click on the Save button to save the TikTok feed and check the result on the storefront.

After configuring all settings, you have successfully finished creating and showing TikTok feeds on the store. You’ll receive a popup congratulating you on your first feed creation like this:

How to show TikTok feeds on your store​

I. OS 2.0 theme​

In the Shopify App embeds, active Mageplaza TikTok 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 and check the result on the storefront.

II. OS 1.0 theme and other themes​

Besides the OS 2.0 theme, the Mageplaza TikTok 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.

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.

Key takeaway: After configuring your feed layout and settings, you have successfully finished creating and showing TikTok feeds on the store. Remember to fill out each section carefully for a perfect outcome.