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

Three ways to get TikTok onto Shopify

TikTok's developer documentation describes the Display API as three endpoints (user info, video list and video query) that let you "display a TikTok user's profile and videos on your platform", with the user granting `user.info.basic` and `video.list` through Login Kit. That makes it a good fit for your brand account and a poor fit for gathering other creators' content, which is where hashtag import and rights requests come in (see TikTok UGC strategy for ecommerce).

Step by step with Idukki

Product Page UGC is the block to prioritise. It passes the current product's ID to the widget, so each product page shows only the videos tagged to that product, with no per-product setup. When Idukki has recorded that a product has nothing tagged, the block skips rendering entirely rather than showing an empty frame. Shoppable Video Reels is the homepage and landing-page format. Both blocks have a Widget ID setting (leave it empty for your default widget) and a lazy-load setting that is on by default.

If your theme is a vintage (pre-2.0) theme, app blocks won't appear: Shopify requires JSON templates and sections that accept `@app` blocks. Upgrade the theme, or paste the embed code into a custom Liquid section and own it from then on.

Tagging video so it sells

A video tag should match what the viewer can see at that moment. For a try-on haul, tag each item when it is on screen rather than listing every product at the start. Keep it to the products actually shown; a panel of eight products under a 15-second clip reads as an advert. For the mechanics of making short-form video shoppable, see making Reels and TikToks shoppable on Shopify and the shoppable video overview.

Performance: the step that decides whether it helps or hurts

A ten-video carousel where every video preloads can download many megabytes before the shopper has scrolled, which hurts Largest Contentful Paint on mobile. The fix is simple in principle: an HTML video element with `preload="none"` tells the browser not to download it in advance (MDN notes it is a hint, which browsers generally follow). Idukki's widget follows that rule by layout: in carousel and reel layouts only the active slide (and its neighbours) get `preload="auto"`, grid tiles get `preload="none"`, and video opened in the full-screen modal loads fully.

Check it yourself in two minutes. Open a product page in Chrome, open DevTools, and run `document.querySelectorAll('video[preload="auto"]').length` in the Console. A small number (a handful at most) means off-screen videos are waiting. Then open the Network panel, filter to Media, reload, and confirm you aren't downloading videos you can't see. Repeat PageSpeed Insights on three product pages and compare with your pre-install baseline. Core Web Vitals and UGC widgets explains what to look for in the report.

Layout shift is the other risk. A reels carousel that appears late and pushes the buy box down is worse than no carousel. Reserve the carousel's height in the section settings or with the block's custom CSS class, and keep lazy loading on for anything below the fold.

Troubleshooting