カルーセルのPDP実装
小型・中型ダイナミックカルーセル
商品詳細ページ(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>

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

小型・中型カルーセル
小型カルーセル
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>

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







