Add TikTok videos to different products

Show different TikTok videos on different product pages by assigning each product its own Shopify template with a dedicated video widget.

By default, one video widget appears on all product pages. This guide shows how to display different videos for different products.

How it works: In Shopify, each product page uses a template. If you assign a dedicated template to a product, you can add a separate widget to it, with its own videos.

Step 1: Create a new template in Shopify

1. Go to Online Store → Themes and click Customize.

2. Open the Template dropdown at the top and click + Create template.

3. Give your template a unique name.

4. Choose an existing template to base it on and click Create template.

Repeat for each group of products that needs different videos.

Step 2: Assign a product to the new template

1. Go to Products and open a product.

2. Scroll to Theme template and select your new template from the dropdown.

3. Click Save.

Repeat for every product that should use this template.

Step 3: Add a widget to the template

1. In the app, create a new widget and connect it to a YouTube channel or playlist.

2. When choosing where to place the widget, select your new template, not the default one.

3. Select the Content # in the widget settings (The number is the position in the app's content list).

4. Save.

The widget will now appear only on product pages that use this template.

---

Method 2: Product metafields

1. Create the metafield. Settings > Custom data > Products > Add definition

• Name: TikTok content index

• Namespace and key: custom.tt_index

• Type: Integer (or Single line text, either works)

1. Fill the value per product. Products > select all > Bulk edit > Columns > tick the new metafield. Paste a column of numbers. Product A gets 1, Product B gets 7, and so on. The number is the position in the app's content list. Leave it empty for products that shouldn't show a carousel.

1. Replace the hardcoded widget with Custom Liquid

First, remove the existing Reputon TikTok app block from the product template, otherwise you'll get two widgets. Then add a Custom Liquid block in the same spot and paste:

{%- assign tt_index = product.metafields.custom.tt_index.value -%}

{%- if tt_index != blank -%}
  <script type="text/javascript"
    src="https://cdn.ttw.reputon.com/assets/widget.js?shop=skatespott.myshopify.com"
    defer></script>

  <div class="reputon-tiktok-widget"
       data-content-index="{{ tt_index }}"
       data-autoscroll="true"
       data-autoplay="off"
       data-type="carousel"
       data-theme="light"
       data-show-header="true"
       data-player-mode="centered">
    &nbsp;
    <style>
      .reputon-tiktok-widget[data-type="carousel"] {
        min-height: 450px;
        @media (max-width: 450px) {
          min-height: 250px;
        }
      }
    </style>
  </div>
{%- endif -%}

The code above is for the carousel widget. If you want another widget, you can copy its code by clicking "Add widget" > "Add code manually." Make sure to use data-content-index="{{tt_index }}" instead of data-content-index="1".

That's the whole change. data-content-index="1" became data-content-index="{{ tt_index }}". One template. Fifty different carousels. Products with an empty metafield render nothing at all, not even an empty container.

Have questions or need help with widgets? Contact us at [e-mail] or live chat