PDP implementation for Small/Medium Carousel

Small Sized and Medium Dynamic Carousel

You can embed a dynamic carousel below the Add to Cart button on your Product Detail Pages (PDPs) using either SKU-based or playlist-based integration. This guide walks you through both options.

Small dynamic carousel - (Custom Code – SKU or Playlist)

This carousel is ideal for PDPs and can be embedded directly via HTML code. You can implement it using either product SKUs or a fixed playlist.

Option 1: SKU-Based Integration

This method dynamically displays videos based on the SKU of the product being viewed.

<script async type="text/javascript" src="//asset.fwcdn3.com/js/embed-feed.js"></script> 

<fw-embed-feed 
channel="firework_depot"
skus={‌{product.id}‌}
placement="middle" 
player_placement="bottom-right"
thumbnail_style="dynamic" 
attribute size ="small" 
ui_asset_product_tag="none" 
>

</fw-embed-feed>

• skus={‌{product.id}‌}: Dynamically matches product ID on PDP with tagged videos

• ui_asset_product_tag="none": Hides product icon from thumbnails for a cleaner visual layout.

• attribute size="small": Reduces visual footprint to fit below the Add to Cart button

  Option 2: Playlist-Based Integration 

  This method uses a fixed playlist and shows the same videos across PDPs.

  <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>

   

Medium Dynamic Carousel

This can be added directly through the Shopify Theme Customizer. Simply select your desired carousel layout and size from the Firework Embed settings—no need to manually insert any embed code.

Small Sized and Medium Sized Carousel 

Small sized carousel 

You can adjust the size of the carousel to  small  by incorporating the size="small" for a small carousel into the HTML code.

Option 1: SKU-Based Integration

<script async type="text/javascript" src="//asset.fwcdn3.com/js/embed-feed.js"></script> 

<fw-embed-feed 
channel="firework_depot"
skus={‌{product.id}‌}
placement="middle" 
player_placement="bottom-right"
size ="small" 
ui_asset_product_tag="none" 
>

</fw-embed-feed>

Option 2: Playlist-Based Integration 

<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"
      size ="small"
      player_placement="bottom-right"                                         
    ></fw-embed-feed>

Medium Sized Carousel 

This can be added directly through the Shopify Theme Customizer. Simply select your desired carousel layout and size from the Firework Embed settings—no need to manually insert any embed code.