カルーセルのPDP実装

Last updated:
September 25, 2025

小型・中型ダイナミックカルーセル

商品詳細ページ(PDP)の「カートに追加」ボタンの下に、SKUベースまたはプレイリストベースのいずれかの連携方法でダイナミックカルーセルを埋め込むことができます。
このガイドでは、両方の方法について説明します。

小型ダイナミックカルーセル(カスタムコード — SKUまたはプレイリスト)

このカルーセルはPDPに最適で、HTMLコードから直接埋め込めます。商品SKU、または固定のプレイリストのいずれかを使って実装できます。

オプション1:SKUベースの連携

この方法では、表示されている商品のSKUに基づいて動画を動的に表示します。

動画に商品SKUが正しくタグ付けされている場合のみ機能します。

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

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

</fw-embed-feed>

  • sku={‌{product.id}‌}:PDP上の商品IDを、タグ付けされた動画と動的に照合します
  • ui_asset_product_tag="none":サムネイルから商品アイコンを非表示にし、すっきりとした見た目にします
  • attribute size="small":「カートに追加」ボタンの下に収まるよう、表示サイズを小さくします

オプション2:プレイリストベースの連携

  • この方法では固定のプレイリストを使用し、すべてのPDPで同じ動画を表示します。

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

pdp implement

中型ダイナミックカルーセル

こちらはShopifyテーマカスタマイザーから直接追加できます。
Firework Embedの設定から希望のカルーセルのレイアウトとサイズを選択するだけで、埋め込みコードを手動で挿入する必要はありません。

pdp implement1

小型・中型カルーセル

小型カルーセル

HTMLコード内でsize="small"を指定すると、カルーセルのサイズを小さくできます。

オプション1:SKUベースの連携

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

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

オプション2:プレイリストベースの連携

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

small pdp

中型カルーセル

こちらはShopifyテーマカスタマイザーから直接追加できます。
Firework Embedの設定から希望のカルーセルのレイアウトとサイズを選択するだけで、埋め込みコードを手動で挿入する必要はありません。

pdp medium