How to Embed a TikTok Feed on BigCommerce (Step-by-Step)

Official TikTok options, and where a feed tool fits

TikTok offers embed code for individual videos, which you can paste into a Page Builder HTML widget. That works for one or two videos on a landing page; each embed loads TikTok's own player, and there are no product tags. For developers, TikTok's Display API has three endpoints (user info, video list and video query) that let you "display a TikTok user's profile and videos on your platform". It requires a TikTok developer app, Login Kit and the `user.info.basic` and `video.list` scopes granted by the account owner, so it suits your brand account rather than content other creators posted about you.

A shoppable video tool sits on top: it imports videos (your own, or creator content you have permission to use), lets you tag products to them, and renders them in a player it controls. That last point is what lets it keep off-screen video from downloading. For the strategy side of TikTok content, see TikTok UGC strategy for ecommerce.

Page Builder or Script Manager for video?

If you do use Script Manager, three settings matter. Location: BigCommerce's "Storefront pages" option covers every page except checkout and order confirmation; "All pages" adds checkout, order confirmation and cart. A video feed has no business on checkout, so choose Storefront pages. Script category: BigCommerce describes Functional scripts as ones that "enable enhanced functionality, such as videos and live chat", which fits a video feed; shoppers who decline that category won't see it, and that's the point of consent. Load method: Defer runs scripts in order after parsing, so it doesn't block the page from rendering.

Step by step with Idukki

The access token is shown once when you create the API account, so copy it before closing the dialog. If products don't appear when you tag, check they're in Idukki's product catalogue; the Products area can import a CSV or a product feed URL. For a product page, open the product from the BigCommerce product list's action menu with View in Page Builder and place the widget in a region on that page. Watch for regions labelled "-- Global" in the Layers menu: anything there appears on every page.

Performance: confirm video only loads when it's watched

The HTML video `preload` attribute is how a player tells the browser whether to download video in advance: `none` means don't preload, `auto` means the whole file may be fetched (MDN notes it is a hint the browser may override). Idukki's widget sets it by layout: in carousel and reel layouts only the active slide and its neighbours get `preload="auto"`, grid tiles get `none`, and video opened full-screen loads fully. For feeds below the fold, add `data-ugc-lazy="1"` to the placeholder element in the embed code so the widget doesn't mount until it's close to the viewport.

1. 1Open a product page with the feed in Chrome and open DevTools.
2. 2In the Console, run `document.querySelectorAll('video[preload="auto"]').length`. A handful at most is healthy.
3. 3In the Network panel, filter to Media and reload. You shouldn't see downloads for videos you can't see.
4. 4Run PageSpeed Insights on three pages and compare with your pre-install baseline, paying attention to Largest Contentful Paint and Cumulative Layout Shift.
5. 5Reserve the carousel's height (a wrapping `div` with a `min-height` in the HTML widget) so it doesn't push content down; Google's good CLS threshold is 0.1 or less.

Core Web Vitals and UGC widgets explains how to read the results, and shoppable video covers the formats that work on product pages.

Troubleshooting