What is product widget and how to create it

  • 28/08/2023
  • 228
  • 0

In this post, you will learn what product widget is and how to create it in NestWidget. Let’s get started now! 

What is product widget?

Product widget is a feed that includes media with tagged products. It typically displays on product details pages.

Create product widget

To create product widget, you first need to tag products to TikTok posts in media source. Follow the instructions below to tag product: 

  1. Go to Media sources section > Click Edit icon in a media source 

If you have no existing media source, create a new one.

  1. Click on Product button in a specific post 
NestWidget - create product widget
  1. Click on Add products button 
  1. Search product by name > Select it > Click Save button

*Note: You can tag up to 3 products in each post 

NestWidget - create product widget - tag product

Customize product widget 

  1. Go to My Widgets section > Click on Product Widget 
  2. Customize the design of product widget 

General Configuration

Title heading 

  • Heading text: Maximum character is 50
  • Heading text color: Enter color code or pick one from color chart

Subheading 

  • Subheading text: Maximum character is 150
  • Subheading text color: Enter color code or pick one from color chart
  • Subheading font size

Post settings 

  • Maximum post shown on widget: Maximum is 60 posts/widget
  • Corner radius (px)

Desktop layout

Customize the appearance of your widget on desktop 

  • Width (%)
  • Item spacing
  • Layout type: Select from Grid or Carousel 
  • Columns
  • Rows
  • “Show more” button
  • ‘Show less” button

Mobile layout

Customize the appearance of your widget on mobile

  • Columns
  • Rows
  • Item spacing (px)
  • “Show more” button
  • ‘Show less” button

Interaction 

Button text 

You can preview how your widget looks on mobile and desktop in Preview section

NestWidget - create product widget - customize widget
  1. Click Save button to save all your settings 

Install product widget on storefront

Product widget typical displays on product detail pages that coincide with products tagged in the widget. 

For example: On the “Jukita dress” product page, the product widget will show up only posts with Jukita dress product tagged inside.

Follow the instructions below to install product widget:

  1. Go to My Widgets > Live Widgets
  2. At the Action column, click on
NestWidget - create product widget - install widget
  1. Choose Edit widget on the widget that you want to select
  2. Navigate to Embed widget tab, click on Shopify theme editor page 
NestWidget - create product widget - install widget
  1. In theme editor page, switch to Product page > click on Add section > select Product Feed (NestWidget – TikTok Feed)
NestWidget - create product widget - install widget
  1. Click Save button in the upper right corner

That’s done! Your product widget is installed on product page successfully! Here’s how the product widget displays in real-time. 

NestWidget - create product widget - install widget

>>> Read more: How to tag product


Need more help? 

Please contact our support team via live chat or email at [email protected] 

We are happy to help you as soon as possible!

Helpful?

Featured articles

Tag Product

In this post, you will learn how to tag product in the widget. Let’s get started now! What is tagging

Can’t Find What You Need? 🤔


Article Outline