You can add TikTok videos to Shopify product pages in three practical ways. For one public TikTok post, copy TikTok’s official embed code or use its iframe player inside a Custom Liquid section on the correct product template. If you own the original video file and only want a normal video in the product media gallery, upload it as Shopify product media. If you need several videos, automatic feed updates, different videos for different products, product tags, custom layouts, or video analytics, use a TikTok feed or shoppable-video app.
Before adding a video, confirm that it is public, matches the exact product, and is approved for commercial website use. Be careful when editing Shopify’s default product template: the same video can appear on every product that uses that template. For a small product group, create an alternate template. For a large catalog with unique videos, use app-level product assignment or a product metafield implementation.
A standard TikTok embed displays the post but does not automatically create Shopify product tags or add-to-cart actions. A shoppable-video widget connects the on-site video with Shopify product information or a buying action.
After publishing, test the page on mobile and desktop. Make sure the player fits the page, the product controls remain easy to use, the TikTok post still works, and page performance remains acceptable. Measure add-to-cart rate, conversion rate, revenue per session, and page speed—not only video views.
Choose the Right TikTok Video Method
Choose the lightest method that performs the job you need.
| Your need | Best starting method |
|---|---|
| Show one public TikTok with no automatic updates | Official TikTok embed |
| Put an original video file in the product gallery | Native Shopify product video |
| Show several videos in a carousel, grid, or feed | TikTok video-feed app |
| Display different videos on many product pages | App assignment or product metafields |
| Add product tags or buying actions to the video experience | Shoppable-video app |
| Keep full control if the TikTok post is deleted | Native Shopify product video, if you own the file |
Here is the main difference:
- A TikTok embed displays a live public TikTok post.
- A Shopify product video displays a video file as normal product media.
- A TikTok feed app manages several videos, layouts, product connections, and app-level analytics.
The official TikTok sales channel is different. It connects a Shopify catalog and orders with TikTok Shop. It does not automatically display TikTok videos on Shopify product pages. TikTok Pixel is also a separate tool: it sends storefront events for advertising measurement instead of adding videos to the storefront.
Before You Add a TikTok Video
Complete these checks before changing the product page:
- Open the TikTok in a signed-out browser to confirm that the post is public.
- Make sure the video features the exact product or an accurate variant.
- Check that its pricing, features, claims, and instructions are still current.
- Confirm that your store owns the content or has permission to use it commercially.
- Review the music, testimonial, disclosure, and advertising rights.
- Check whether the video can still be understood with sound off.
- Decide whether the video belongs on one product, a product group, or every product.
- Duplicate or preview the theme before changing a live store.
Do not select a product-page video only because it has many TikTok views. The better choice is the video that answers a buying question: what the product looks like, how it works, how it fits, what is included, how to use it, or what a real customer experienced.
If you are still planning the content rather than the Shopify placement, use the broader TikTok marketing guide first.
Method 1: Embed a TikTok Video on Shopify Without an App
Use a manual embed when you have one or a few stable, public posts and do not need automatic updates or product tags.
Step 1: Copy the Official TikTok Embed
Open the TikTok post in a desktop browser, select Share, and choose Embed when that option is available. Copy the complete code provided by TikTok.
TikTok’s standard embed normally includes the post, creator attribution, description, sound information, and a link to the original content. Use this format when the social context and attribution are valuable.
TikTok also provides an iframe player. Copy the numeric post ID that appears after /video/ in the TikTok URL, then use this format:
https://www.tiktok.com/player/v1/VIDEO_ID
For example, if the URL ends in /video/1234567890, replace VIDEO_ID with 1234567890.
Use the official TikTok embed documentation and iframe player documentation if TikTok changes its embed options.
Step 2: Open the Correct Shopify Product Template
In Shopify:
- Go to Online Store → Themes.
- Open the theme editor for the theme you want to change.
- Use the page selector to open Products.
- Select the template assigned to the target product.
Important: Editing the default product template changes every product that uses that template. If the TikTok belongs on only one product or one product group, create an alternate product template and assign it only to those products.
Do not paste a product-specific video into a global file such as theme.liquid. That can place the video on unrelated pages and makes future maintenance harder.
Step 3: Add a Custom Liquid Section
If the theme supports Custom Liquid:
- Add a Custom Liquid section or block.
- Paste the official TikTok embed code.
- Move the section to the position where the video supports the buying decision.
- Save the template.
- Open the storefront preview and test the target product.
The available section and block names depend on the Shopify theme and version. If Custom Liquid is unavailable, use product-description HTML as a simple fallback:
- Open the product in Shopify admin.
- Switch the product description to HTML view.
- Paste the embed where the video should appear.
- Save and preview the live product page.
This fallback is easy, but it limits placement to the description and becomes difficult to manage when many products have different videos.
Step 4: Make the TikTok Player Responsive
If the standard TikTok card conflicts with the theme or is cut off on mobile, use TikTok’s iframe player inside a responsive 9:16 container:
<div class="orichi-tiktok-video">
<iframe
src="https://www.tiktok.com/player/v1/VIDEO_ID"
title="TikTok product demonstration"
loading="lazy"
allow="fullscreen"
allowfullscreen>
</iframe>
</div>
<style>
.orichi-tiktok-video {
width: 100%;
max-width: 360px;
margin: 24px auto;
}
.orichi-tiktok-video iframe {
display: block;
width: 100%;
aspect-ratio: 9 / 16;
border: 0;
}
</style>
Replace VIDEO_ID and update the iframe title so it describes the video.
The fixed aspect ratio reserves space before the player loads and helps reduce layout movement. Use loading="lazy" for a video below the first screen. If the video is the main above-the-fold content, test both lazy and normal loading instead of assuming lazy loading is always better.
If the standard TikTok embed has an unwanted border or indentation, the theme may be styling every blockquote. Scope any CSS change to .tiktok-embed; do not change all blockquotes across the store.
Step 5: Test the Published Product Page
Do not stop after the embed appears in the theme editor. Test:
- The published or previewed storefront while signed out
- Desktop and mobile widths
- Chrome, Safari, and Edge
- Product variants and media controls
- Sticky add-to-cart behavior
- Cookie or consent banners
- The TikTok profile and source links
- Page movement while the embed loads
- Page performance before and after the change
The manual method is complete when the right video appears on the right products without blocking the shopping experience.
Method 2: Upload a Video as Shopify Product Media
Use native product media when your store owns or has licensed the original video file and does not need the live TikTok post, TikTok profile, caption, comments, or automatic account updates.
Shopify currently supports uploaded product videos in .mp4, .mov, and .webm formats, up to 10 minutes, 1 GB, and 4K resolution. Shopify also supports YouTube and Vimeo as external product video sources. It does not list a TikTok URL as a native external product media type.
To upload a file:
- Go to Products in Shopify admin.
- Select the product.
- In the media area, upload the original video file.
- Add alt text or other available media information.
- Arrange the video in the desired position.
- Save and preview the product page.
Native product video is often the better choice when:
- The video belongs in the normal media gallery.
- You need control over the asset even if a social post is removed.
- TikTok attribution and engagement context are not important.
- You want a standard product-media experience instead of a separate feed.
It is not the same as embedding a TikTok. Native media does not auto-sync new posts, preserve TikTok engagement, or create a multi-video shoppable carousel.
Do not download and reupload a creator’s TikTok simply to gain control or remove attribution. Obtain permission for the website use and the file itself.
Method 3: Use Madgic Tiktok Feed
Use an app when manual embedding creates too much work or does not provide the storefront experience you need.
When an App Is Worth Using
A feed or shoppable-video app is the better fit when you need:
- Several TikTok videos on one page
- A carousel, grid, or vertical feed
- New TikTok content to sync automatically
- Different video assignments for different products
- Product cards, product tags, or add-to-cart actions
- Layout and mobile customization
- Engagement or conversion reporting
- Content management without repeated theme edits
An app is unnecessary when you only need one stable public TikTok and can maintain it manually.
Add Videos With Madgic Tiktok Feed
Madgic Tiktok Feed is currently listed as a free Shopify app. Its App Store listing describes auto-synced TikTok content, shoppable feeds, custom layouts, product-page placement, mobile customization, and engagement and conversion tracking.
The exact button names can change, so follow the current in-app onboarding. The general workflow is:
- Install Madgic Tiktok Feed from the Shopify App Store.
- Add or connect the TikTok content source supported by the app.
- Create a feed or widget.
- Review the videos before publishing them.
- Connect relevant Shopify products when the feed needs shopping actions.
- Choose a layout and adjust its storefront design.
- Add the app block or use another placement method offered by the app.
- Open the correct product template.
- Preview desktop and mobile.
- Publish and review the available engagement and conversion data.
Confirm what the app counts as a “conversion” before using that metric in a report. An app-attributed order and a proven incremental order are not always the same thing.
Also review the app inside a test theme before placing it on a high-traffic product page. App blocks are more maintainable than direct theme-file edits, but their availability still depends on the theme, template, and section.
For more tools from the same ecosystem, see Orichi Shopify Apps.
Show Different Videos on Different Products
This is where many Shopify setups go wrong. The correct solution depends on catalog size and how often the videos change.
Use Alternate Product Templates for a Small Catalog
Create an alternate product template when one video belongs to one product or a small product group.
For example:
- Default product template: no TikTok video
- “Product demo” template: one brand demonstration
- “Creator review” template: one approved creator post
Assign each template only to the intended products.
This method is manageable for a few groups, but not for dozens of unique videos. Too many templates make theme management confusing.
Use Product Assignment Inside an App at Scale
Use app-level assignment when:
- Every product needs different videos.
- One product needs several clips.
- Videos change frequently.
- Products need to be tagged inside a video feed.
- A team needs one place to manage all content.
The app should control which videos appear for each product instead of requiring a separate theme template for every item.
Use Metafields for a Custom Theme
A developer can create a product metafield that stores a TikTok video ID or approved embed URL. A custom section can then read the current product’s value.
This approach is useful when:
- The store has development support.
- The team wants structured product-level control.
- The storefront needs a custom design.
- The store does not need an app’s feed, product tags, or analytics.
Do not paste untested Liquid into a production theme. Validate the section in a duplicate theme and confirm how it behaves when a product has no video value.
| Catalog situation | Recommended solution |
|---|---|
| One video on one product | Alternate template or product-description HTML |
| One video across a product family | Shared alternate template |
| Different video on every product | App assignment or metafield |
| Several videos per product | Feed or shoppable-video app |
| Frequently changing TikTok account feed | Auto-sync app |
How to Optimize TikTok Videos on Product Pages
Adding the player is only the technical first step. The video must also help the customer without weakening the rest of the page.
Make the Video Shoppable Only When It Helps
A standard TikTok embed lets shoppers watch the post and follow its TikTok link. It does not automatically know which Shopify product appears in the video, show the current price, or add the item to the cart.
A shoppable-video widget can connect the on-site video with:
- A Shopify product card
- A product link
- A product tag
- An add-to-cart action
- Video engagement or order attribution
The exact behavior depends on the app.
Do not confuse an on-site shoppable widget with a TikTok Shop video. A TikTok Shop video is shoppable inside TikTok. An on-site widget connects a video experience with products inside the Shopify storefront.
Place the Video Where It Answers a Buyer Question
| Video job | Suggested placement |
|---|---|
| Show appearance, fit, scale, or movement | Near the product gallery |
| Explain setup or use | Below the main product information |
| Answer a specific objection | Near the relevant copy or FAQ |
| Provide customer or creator proof | Near reviews |
| Show several use cases | Dedicated carousel below the buy box |
There is no universal best position. A short product demonstration can work near the gallery, while a customer testimonial may make more sense near the reviews.
Avoid placing several heavy players above the buy button. The video should support the purchase path, not compete with it.
Protect Mobile Speed and Layout
Third-party players, app scripts, and video files can affect page performance. The result depends on the theme, device, connection, placement, and number of videos.
Use these rules:
- Start with one or a small number of relevant videos.
- Reserve the player’s dimensions or aspect ratio.
- Lazy-load offscreen iframes where appropriate.
- Avoid autoplay with sound.
- Do not preload every video in a large carousel.
- Use a poster or click-to-load option when the app supports it.
- Remove duplicate players and unused app blocks.
- Check Shopify’s performance dashboard and PageSpeed Insights before and after publishing.
Watch Largest Contentful Paint, Interaction to Next Paint, Cumulative Layout Shift, third-party requests, and the time until product controls become usable.
Do not claim that a TikTok embed has zero speed impact or that video always improves SEO or conversion. Test the exact product template.
Review Rights, Privacy, and Accessibility
A public TikTok is technically available to view, but that does not automatically give a merchant unlimited commercial reuse rights.
For brand, customer, or creator content:
- Record who granted permission.
- Record which post or file the permission covers.
- Confirm where the content can appear.
- Confirm how long the permission lasts.
- Preserve attribution when required.
- Review music and advertising claims separately.
- Remove the content if permission expires or is withdrawn.
A TikTok player also loads third-party content. Review how the embed or app works with the store’s privacy and consent settings in the regions you serve.
For accessibility:
- Use captions.
- Do not rely on sound alone.
- Keep important product information in page text.
- Give iframes descriptive titles.
- Avoid forced autoplay with sound.
- Confirm that video and carousel controls work with a keyboard.
- Check that captions and controls remain readable on a phone.
An embedded TikTok does not automatically qualify the product page for a Google video rich result. Focus on helping shoppers first.
Troubleshooting TikTok Videos on Shopify
| Problem | What to check |
|---|---|
| Video does not appear | Confirm the post is public, the full code or correct video ID was used, the section was saved, the correct theme is published, and consent or browser tools are not blocking TikTok. |
| Video appears on every product | The embed was probably added to a shared default template. Move it to an alternate template or use product-level assignment. |
| Embed is cut off on mobile | Remove fixed pixel widths, check parent-container overflow, use a 9:16 responsive wrapper, and inspect theme styles applied to blockquote. |
| TikTok card has unwanted borders | Scope CSS to .tiktok-embed or use the official iframe player. Do not change every blockquote sitewide. |
| Video loads slowly | Reduce the number of players, move nonessential videos lower, lazy-load offscreen iframes, and consider a poster or native product video. |
| App block is unavailable | Confirm that the theme uses compatible Online Store 2.0 templates, the section supports app blocks, and any required app embed is enabled. |
| Video is visible but not shoppable | A standard embed is only a player. Add a nearby Shopify buying path or use a shoppable-video app. |
| Video was deleted or made private | Replace the post or use an approved merchant-controlled file. A live embed cannot display an unavailable source. |
| Wrong video appears on a product | Check the assigned product template, app product mapping, or product metafield value. |
If the player works in the theme editor but not on the storefront, test while signed out and inspect the published theme. Preview data and live customer behavior can differ.
Measure the Results
Do not keep a product-page video only because shoppers played it. The purpose is to improve product understanding and business results.
Record a baseline before publishing:
- Product-page sessions
- Add-to-cart rate
- Reached-checkout rate
- Purchase conversion rate
- Revenue per session
- Average order value
- Return or refund rate
- Mobile performance
- Common product questions
After publishing, compare the same metrics and add video-specific data when available:
| Metric | What it tells you |
|---|---|
| Video impressions | How often the player was visible |
| Play rate | Whether shoppers chose to watch |
| Completion or watch depth | Whether the content held attention |
| Product-tag clicks | Whether the buying path was used |
| Add-to-cart rate | Whether more product visitors started a cart |
| Purchase conversion rate | Whether more product visitors bought |
| Revenue per session | Whether the page created more revenue from its traffic |
| Return rate | Whether the video set accurate expectations |
| Page performance | Whether the experience became slower or less stable |
Use one product or a small, comparable product group first. Avoid changing the price, promotion, copy, theme, and video at the same time. Otherwise, you will not know what caused the result.
Pause, move, or remove the video when:
- Mobile layout breaks.
- The player blocks product controls.
- Page speed becomes materially worse.
- The source post becomes unavailable.
- Permission expires or is withdrawn.
- Product information becomes inaccurate.
- Add-to-cart or conversion declines without another useful outcome.
- Shoppers leave for TikTok instead of continuing to buy.
Video-assisted attribution from an app can be useful, but it does not prove that every attributed order was caused by the video. Compare the full product-page outcome.
Final Recommendation
Use an official TikTok embed when you only need one stable public post. Add it to a Custom Liquid section on the correct product template, then test the live page on mobile and desktop.
Upload the original file as Shopify product media when you own the asset, want it in the normal gallery, and do not need the live TikTok context.
Use a feed or shoppable-video app when you need multiple videos, automatic updates, product-level assignment, custom layouts, product tags, or video analytics. Madgic Tiktok Feed is the relevant Orichi option for this larger workflow.
Whichever method you choose, confirm permission, protect page speed, and measure store outcomes. The right video is not the one with the most TikTok views. It is the one that helps the shopper understand the product and complete the purchase without making the page harder to use.
FAQs
Can You Add TikTok Videos to Shopify?
Yes. You can embed a public TikTok post, upload an original video file as Shopify product media, or use a TikTok feed or shoppable-video app.
How Do I Embed a TikTok Video on Shopify Without an App?
Copy TikTok’s official embed code, open the correct Shopify product template, add a Custom Liquid section, paste the code, and test the live page. Product-description HTML is a simpler fallback with less placement control.
Can I Paste a TikTok Link Into Shopify Product Media?
No. Shopify’s native external-video product media supports YouTube and Vimeo links, not TikTok links. Use a TikTok embed or app, or upload the original supported video file if you own it.
Why Does the Same TikTok Video Appear on Every Product?
The embed was probably added to Shopify’s default product template. Every product using that template inherits the same section. Create and assign an alternate template, use app-level product assignment, or use a product metafield.
Can I Show a Different TikTok Video on Every Product?
Yes. For a small catalog, use alternate templates. For many products, use a video app with product assignment or a developer-built section connected to product metafields.
Does a TikTok Embed Let Customers Add the Product to Their Cart?
Not by itself. A standard embed displays the TikTok post. Use a nearby Shopify product button, a shoppable-video app, or a custom implementation to connect the video with a buying action.
Does TikTok Shop Add Videos to Shopify Product Pages?
No. TikTok Shop connects Shopify products and orders with the shopping experience on TikTok. Displaying TikTok content on a Shopify storefront requires an embed, native video, or a storefront video app.
Can I Embed Someone Else’s TikTok on My Store?
The embed may work technically if the post is public, but commercial website use can involve copyright, creator permission, music, testimonial, and advertising issues. Obtain and document appropriate permission before using customer or creator content.
Do TikTok Videos Slow Down Shopify?
They can. A third-party player or app adds resources to the page. The effect depends on the number of videos, player, placement, theme, device, and loading behavior. Compare the same product template before and after publishing.
What Happens if the Original TikTok Is Deleted?
The embed can stop working because it depends on the public source post. Replace it with another approved post or use a merchant-controlled video file when you have the necessary rights.
