1. Help Center
  2. Get Started with Firework
  3. Upload Short Videos into Firework and Embed

Embedding Videos Within the Product Detail Page

Learn how to dynamically add videos to your product page.

Organize videos in a playlist on the search results or product details pages by passing in the SKUs for the videos – by only adding one line of code to the embed code.

  1. Navigate to the Firework Business Portal.
  2. Under the Channels header in the navigation menu on the left-hand side of the page, click the channel where the playlist that you want to embed is located.
  3. Click on your desired playlist in the navigation menu on the left-hand side of the Videos page.
    • Note: This feature works for all of the layouts.
    • You’ll want to ensure that all of the videos in your playlist are hashtagged accordingly.
  4. Click the "Add to Site" button in the top right corner of the Videos page.
    Select add to playlist
  5. Make your selection for the layout of the playlist and click Copy Code.
    Embed playlist v2
  6. You’ll see a message that the code has been copied to your clipboard. Click OK.
  7. The line items will vary based on your OMS. When inserting the Product ID in the code for say Shopify, be sure you're grabbing the Product ID and not the Variant ID.New-1
  8. Go to your webpage editor where you want to embed the code. Paste the code into your webpage editor.
  9. Remove the ‘playlist’ variable and replace it with the ‘skus’ variable.
      • React: skus={‘${item.skuid}’}
      • Shopify: skus={product.id}

    11. Publish your changes.

    The playlist will populate when a user is on your product landing page or searches for the products that match the SKUs in the embedded playlist code.