商品詳細ページ(PDP)をダイナミックカルーセルで強化する方法をご紹介します。
ダイナミックカルーセルの埋め込み方法
- Fireworkの管理画面にアクセスし、PDP に表示したいプレイリストを選択します。
- 動画ページ右上の 「サイトに追加」 ボタンをクリックします。
- 左側のオプションから 「商品詳細ページ」 を選択し、Shopifyサイト用の Firework埋め込みアプリ を有効化するオプションを見つけます。
- このオプションをクリックすると Shopifyダッシュボード にリダイレクトされます。
Shopifyのテーマカスタマイザーで、Fireworkの埋め込み設定を オン に切り替え、「保存」をクリックして変更を適用します。その後、管理画面を更新して、すべてが最新であることを確認します。
5.次に、Shopify のテーマカスタマイザーに移動し、「テンプレート」セクションの中で「ブロックを追加」をクリックします(「カートに追加」ボタンのすぐ下にダイナミックカルーセルを配置したい場合)。その後、「アプリ」タブから Firework 埋め込み オプションを選択します。次に、提供された Channel ID を見つけて、Firework 埋め込み設定内の該当フィールドに貼り付けてください。
6.「外観(Appearance)」セクションで「ダイナミックカルーセル」レイアウトを選択し、「保存」をクリックします。
7.あるいは、ページのさらに下部にダイナミックカルーセルを表示したい場合は、テーマカスタマイザーで任意のセクションを選択し、「アプリ」タブから Firework 埋め込み オプションを選んでください。その後、提供された Channel ID を Firework 埋め込み設定内の該当フィールドに貼り付けることで、カルーセルを追加できます。
8.商品に対応する動画を選択してください。(動画は、該当する商品とマッチしている場合にのみ商品ページに表示されます。「保存」ボタンをクリックしてください。)
9.「商品」タブで動画と商品をマッチさせることで、並び替えや非表示の設定も可能です。
注意事項:
・画像は 静的なポスター画像 として表示され、クリックするとフルスクリーンで表示されます。・ダイナミックカルーセルは、閲覧者のブラウザウィンドウの幅に応じてレイアウトが変化します。
「小型/中型カルーセルの実装方法を学ぶ」― 商品詳細ページ(PDP)への小型/中型カルーセル実装のためのガイド