How to customize the display of tagged products

Mageplaza Size Chart

Mageplaza Instagram Feed

Mageplaza Google Shopping Feed

1-how-to-connect-a-google-account.md

2-how-to-create-feed-and-sync-feed-on-your-gmc.md

3-how-to-manage-product-feed.md

4-how-to-view-google-error-report-and-manage-products-in-feed.md

5-how-to-configure-settings.md

6-how-to-use-dashboard.md

7-information-center.md

8-privacy-policy.md

9-faqs.md

Mageplaza TikTok Feed

1-how-to-connect-a-tiktok-account.md

2-how-to-create-and-display-tiktok-feeds-on-your-store.md

3-how-to-manage-tiktok-feed.md

4-how-to-set-up-preferences.md

5-information-center.md

6-faqs.md

Mageplaza Digital Downloads

1-how-to-create-a-new-digital-product.md

2-how-to-manage-digital-products.md

3-how-to-manage-files.md

4-how-to-manage-orders.md

5-how-to-customize-the-download-email-template-to-match-my-brand.md

6-how-to-customize-the-thank-you-page-to-match-my-brand.md

7-how-to-add-our-block-to-thank-you-page.md

faqs.md

Mageplaza Product Quiz

1-how-do-I-create-and-manage-quizzes.md

10-how-do-i-link-product-and-collections-to-quiz-answers.md

2-what-is-the-quiz-creation-process.md

3-what-question-types-can-I-use-in-my-quiz.md

4-how-do-I-customize-the-design-of-my-quiz.md

5-how-do-I-publish-my-quiz-to-my-store.md

6-how-do-I-view-customer-responses-to-my-quiz.md

7-what-advanced-features-are-available-for-managing-my-quizzes.md

91-faqs.md

Mageplaza Hide Price & Access Control

0-how-to-create-an-access-control-rule.md

1-how-to-create-a-hide-price-rule.md

91-faqs.md

How to customize the display of tagged products

With MP Instagram Feed, you can tag products directly on your Instagram or TikTok posts and fully customize how those products appear on your storefront. This helps you create an engaging, shoppable feed that blends seamlessly with your store design.

Go to Product Tags > Product tagging posts > Set up to get started.

General settings

Show price: Show product price when a product is tagged.
Show product reviews and rating: Show the review and rating number of tagged products. To enable this feature, you need to set up the integration with the Air Reviews app first by clicking the “Integrations” button.

Apply Mobile Settings for Desktop

There are 2 settings for Mobile and Desktop, then check the configuration for respectively.
Tick this checkbox if you want the desktop display to use the same settings as your mobile layout (no need for separate customization).
Once selected, all styling and layout configurations from the mobile tab will be automatically applied to the desktop view.

Product block presets: Choose how your products are displayed within the feed using preset layouts. You can select from:

Vertical layout
- Structure: Image on top, followed by product name, rating, price, and “Add to cart” button.
- Best for: Compact displays like mobile view or narrow feed sections.
Horizontal layout
- Structure: Image on the left, and product info (name, rating, price, button) on the right.
- Best for: Wider screens or sections where images need to stay large without stacking.

General settings

Background color: Set the background color of your section or component.
Border radius: Adjust the corner roundness of the box.
Border: This checkbox enables or disables the border. When checked (as shown), a border will be displayed around the component.
Border color: Customize the border color.

Product info

Product name:
- Text size: Adjust the font size of the product name.
- Font weight: Choose how bold the text looks. Options include:
  - Regular – Default text thickness; clean and easy to read.
  - Medium – Slightly thicker than regular; adds mild emphasis.
  - Semi-bold – Noticeably bold; great for drawing attention without overpowering.
  - Bold – Strongest emphasis; ideal for headings or important info like prices or product names.
- Text color: Click the color dot or enter a hex code to set the text color.
Price:
- Text size: Same functionality as above, but for the price text.
- Font weight: Choose how the price stands out
- Text color: Set a color to make the price pop or blend, based on your store’s design.

Add to cart button: Enable the add to cart button

Text settings
- Content: Fill in the title/subtitle text of the button.
- Text size: Set up the text size of the button.
- Font weight: Set up the font weight of the button.
- Border radius: Adjust the border radius of the button.
Color:
- Text color: Select the text color to fit your theme.
- Background color - Default: Select the background color of the button.

Featured product title: Enable to show the featured product title

Content: Fill in the title text.
Text size: Set up the text size for the featured product title.
Font weight: Set up the font weight for the featured product title.
Text color: Select the text color for the featured product title.

Preview

This feature allows merchants to preview the results on both desktop and mobile, which are shown on the right side immediately after adjusting the settings on the left.

Wrap up

By customizing the display of tagged products, you can make your Instagram/TikTok feed not only engaging but also shoppable, driving more conversions directly from your storefront.