Player Embed Guidance and Sharing
      Back to home
      1. Help Center
      2. Business Portal 101
      3. Player Embed Guidance and Sharing

      Displaying a Dynamic Carousel on a Product Detail Page

      Learn how to enhance your Product Detail Page (PDP) with the Dynamic Carousel

      We will eventually leverage a choice from the HTML layout selector. This is the current method today. 

      How to Embed a Dynamic Carousel

      1. From the Firework Business Portal, navigate to the playlist that you want to display on your PDP.
      2. Click the Add to Site button in the top right corner of the Videos page.
      3. Next, select the Carousel option and then proceed to Copy Code.  (Note: This player display works only for carousel)
      4. Next, paste the HTML code to your desired section on your PDP. We recommend directly underneath the main product image or under the right hand side of the details. 
        1. If on Shopify, use the custom liquid option to paste this code.
      5. To showcase the video as a PDP carousal, simply include thumbnail_style="dynamic" in the HTML code. As written in the example below: 
        <script async type="text/javascript" src="//asset.fwcdn3.com/js/embed-feed.js"></script> 

        <fw-embed-feed channel="firework_depot" 
        playlist="5aZ0jo" 
        mode="row" 
        open_in="default" 
        max_videos="0" 
        placement="middle" 
        player_placement="bottom-right"
        thumbnail_style="dynamic"     

        ></fw-embed-feed> 

      6. Small Sized Dynamic Carousel : This is specifically designed to be embedded below the Add to Cart button on the PDP pages. To implement this simply add attribute size="small" to the HTML code. 
        <script async type="text/javascript" src="//asset.fwcdn3.com/js/embed-feed.js"></script> 

        <fw-embed-feed channel="firework_depot" 
        playlist="oe8bX5" 
        mode="row" 
        open_in="default" 
        max_videos="0" 
        placement="middle" 
        player_placement="bottom-right"
        thumbnail_style="dynamic"   
        attribute size ="small"

        ></fw-embed-feed>

         


      Note:

      • Images display as a static posters that go full screen when clicked on.
      • The Dynamic Carousal will display based on the width of the browser window being used to view it.