【徹底解説】Shopify アプリ「シンプル動画スライドショー｜お手軽動画カルーセル表示」でできること

ネットショップのトップページを開いたとき、最初に目に入る場所は「ファーストビュー」と呼ばれます。ここに静止画のバナーを 1 枚置くだけのストアは多いのですが、服の揺れ方、化粧品の質感、料理の湯気のように、写真では伝わりにくい魅力を持つ商品は少なくありません。そうした商品ほど、動画で見せたほうが早く伝わります。

「シンプル動画スライドショー｜お手軽動画カルーセル表示」は、Shopify のストアに動画を並べて自動で送る全幅のスライドショーを置くためのアプリです。Shopify にアップロードした動画や YouTube・Vimeo の動画を最大 5 本まで並べ、動画ごとに見出しとボタンを重ねられます。設定はすべてテーマエディタの中で終わり、テーマのコードには触りません。

この記事では、アプリの管理画面とテーマエディタの設定項目を 1 つずつ取り上げ、画面に出ていない仕様まで含めて解説します。手順だけを短く確認したい方は、unreact.jp で公開しているご利用ガイドもあわせてご覧ください。

シンプル動画スライドショーとは

「シンプル動画スライドショー」は、テーマに「アプリブロック」を 1 つ追加して使うアプリです。アプリストアでは英語名の UR: Video Slider & Carousel で掲載していて、開発は当社 UnReact です。

追加したブロックはテーマのセクションとして扱われるので、ホームページだけでなく、商品ページやコレクションページなど、テーマがセクションを置ける場所ならどこにでも配置できます。1 つのブロックの中に「動画1」〜「動画5」の 5 枚ぶんの枠があり、枠ごとに動画・見出し・ボタン・リンクを決めていきます。

動いているところは、デモストアでそのまま確認できます。PC で開くと横長の動画が全幅で流れ、スマホで開くと縦長の動画に切り替わります。

シンプル動画スライドショーのメリット

動画を何本も並べて、順番に見せられる

テーマに標準で入っている「動画」セクションは、基本的に 1 本の動画を置くためのものです。新作・定番・キャンペーンのように、見せたい動画が複数あるときは、セクションを縦に積むしかありません。このアプリなら 1 つの枠の中で最大 5 本を順番に送れるので、ファーストビューの面積を増やさずに見せる内容を増やせます。

動画が終わるまで待ってから次へ送る

多くのスライダーは「5 秒ごと」のように時間で切り替えます。動画でこれをやると、肝心のシーンの前に次のスライドへ流れてしまいます。このアプリは動画を最後まで再生してから次へ送るのが初期値です。長い動画だけ途中で切り上げたい場合は、上限の秒数を決められます。

PC とスマホで別の動画を出し分けられる

横長の動画をスマホで流すと、上下に大きな余白ができて動画が小さく映ります。このアプリはスライドごとに「スマホ用」の動画を別に設定でき、画面幅 750px 未満ではそちらを出します。縦長の動画を用意すれば、スマホでも画面いっぱいに映ります。

ページを重くしにくい

動画を 5 本並べても、再生するのは画面に出ている 1 本だけです。隠れているスライド、画面の外へスクロールしたとき、別のタブを見ているときは止まります。外部サービスの動画は、自分の順番が来るまで読み込みを始めません。

管理画面が日本語で、設定はテーマエディタで完結する

管理画面は日本語を含む 20 言語に対応しています。スライドの中身はすべてテーマエディタの右側の設定パネルで決めるので、Shopify のいつもの画面だけで作業が終わります。

シンプル動画スライドショーのデメリット

動画から音は出せない

このアプリの動画は、無音のまま繰り返し流れ、再生ボタンなどの操作部品も出ません。主要なブラウザは、音が鳴る動画を勝手に再生させない決まりになっていて、音を出すと自動で流れなくなってしまうためです。音声で伝えたい内容がある動画には向きません。テロップを入れた動画を用意するのがおすすめです。

1 つのブロックに並べられるのは 5 本まで

6 本以上の動画を 1 つのスライダーで回すことはできません。もっと並べたいときは、ブロックをもう 1 つ追加して、2 つ目のスライダーとして置きます。

YouTube の動画では、最初にタイトルが出る

YouTube のプレイヤーの仕様で、再生が始まってから約 6 秒間、動画のタイトルや操作ボタンが表示されます。繰り返しで先頭に戻るたびにも出ます。これはアプリからは消せません。気になる場合は、動画を Shopify にアップロードして使うと出なくなります。

設定はテーマごとに持つ

スライドショーの設定値はテーマのファイルに書き込まれます。そのためテーマを別のものに切り替えると、新しいテーマでもう一度ブロックを追加して設定し直す必要があります。テーマの乗り換えを予定しているストアは、その手間を見込んでおいてください。

料金プラン

料金は 1 プランです。

• 月額プラン: 月 $3.99
• 年額プラン: 年 $39.99（月額で 12 か月払うより約 2 か月分お得です）
• 無料体験: 7 日間

機能の制限はなく、どちらのプランでもすべての設定項目を使えます。Shopify App Store のページから、料金と最新の掲載内容を確認できます。

インストール

インストールの流れは、ほかの Shopify アプリと同じです。

1. ストアの管理画面を開き、左下に並んでいる歯車のアイコン（設定）をクリックします。

2. 設定メニューの中から「アプリと販売チャネル」を選び、アプリストアへ移動するボタンをクリックします。

3. アプリストアの検索窓に「動画スライドショー」などと入れて、このアプリの詳細ページを開き、インストールのボタンをクリックします。
4. アプリがアクセスする情報の一覧が表示されるので、確認して承認します。求められるのはテーマを読み取る権限だけで、管理画面でテーマの一覧を出すのに使われます。商品・顧客・注文のデータは読みません。

承認が済むとプランを選ぶ画面に切り替わります。どちらのプランを選んでも、はじめの 7 日間は請求されません。

アプリ管理画面の構成

このアプリが管理画面に持っているページは「設定」のひとつだけです。役割は、ブロックをテーマに追加する入口と、管理画面の表示言語の切り替えの 2 つです。動画や文言などスライドの中身は、管理画面ではなくテーマエディタで設定します。

各画面の説明

「設定」画面のテーマに動画スライドショー機能を追加

画面のいちばん上にあるカードです。ここで「どのテーマに、ブロックを追加するか」を決めます。

• テーマを選択 … 追加先のテーマを選ぶ欄です。初期状態では、いま公開中のテーマが「（公開中のテーマ）」付きで選ばれています。公開前のテーマで先に作り込みたいときは、ここでそのテーマに切り替えます。テーマのバージョンによっては選択欄が空になることがあり、その場合はテーマエディタから手動で追加します
• 「テーマに追加」ボタン … 選んだテーマのテーマエディタが別タブで立ち上がり、トップページの末尾近くにセクションがひとつ増えた状態になります。どのテーマを選んでも、追加される先はトップページです
• 「テーマをプレビュー」ボタン … 何も追加しないまま、選んだテーマの編集画面だけを別タブで開きます。すでに置いたスライドショーを見直したいときの近道として使えます

ここで気をつけたいのは、「テーマに追加」を押しても、テーマエディタで「保存」を押すまでは反映されないことです。追加しただけで画面を閉じると、お客様のストアには何も出ません。

「設定」画面の注意バナーと手動追加の案内

日本語で表示しているときだけ、「テーマに追加を押してもブロックが自動で追加されないことがある」という注意バナーが出ます。その下には、ホームページ以外のページに追加したいときの案内があります。

どちらも、テーマエディタの「セクションを追加」から手動で追加する方法へ誘導するものです。手順は後半の「テーマへの追加」で詳しく説明します。

「設定」画面の言語設定

画面のいちばん下にあるカードで、アプリの管理画面の表示言語を切り替えます。

• 言語を選択 … 日本語・英語・ドイツ語・フランス語など 20 言語から選べます
• 「変更する」ボタン … 押すと、選んだ言語に表示が切り替わります

言語の選択は、いま使っているブラウザにだけ記録されます。同じストアを別のパソコンで開いたスタッフの画面は変わりません。また、切り替わるのはアプリの管理画面だけで、テーマエディタの言語は Shopify アカウントの言語設定に従います。注意バナーと、右下に出る「ご利用ガイドはこちら」のリンクは、日本語で表示しているときだけ出ます。

テーマへの追加

管理画面の「テーマに追加」を押すと、テーマエディタが開いてホームページにブロックが追加されます。追加した直後の設定パネルはこのようになっています。

動画をまだ 1 本も入れていない間は、テーマエディタのプレビューにだけ「スライドに動画を設定すると、カルーセルが表示されます。」という案内の枠が出ます。お客様が見るストアには何も表示されないので、作業の途中で保存しても見た目が崩れることはありません。

テーマエディタの左側のパネルでは、追加したブロックがセクションの中に入っています。あとから設定を変えるときは、ここのブロック名か、プレビュー上の動画をクリックします。

トップページ以外に置くときは、テーマエディタの上部にあるページの切り替えで目的のページ（商品ページなど）を表示し、左パネルの「セクションを追加」をクリックします。

「アプリ」タブを開くと「シンプル動画スライドショー｜お手軽動画カルーセル表示」が並んでいるので、選んで追加し、右上の「保存」を押します。ひとつのページに複数のスライドショーを並べることもでき、それぞれ独立した設定を持てます。

ストアフロントの見た目を変える

設定パネルを上から順に見ると、見た目（スタイル）、送り方（アニメーション）、中身（動画）、すき間（余白）、上級者向け（追加設定）という並びになっています。先に「どう見せるか」を決めてから動画を入れていく並びです。ここからは、すべての項目を順に説明します。

スタイル設定

• 高さ（既定: 動画に合わせる）… 選択肢は「動画に合わせる／小／中／大」です。小は 420px、中は 560px、大は 720px で固定されます。「動画に合わせる」では、先頭のスライドの動画が持つ縦横の比率が全体の高さになり、YouTube・Vimeo の場合は横 16・縦 9 の比率とみなされます。縦横比の違う動画を混ぜると 2 枚目以降の上下や左右が切れることがあるので、高さを揃えたいときは小・中・大を選んでください
• 矢印の種類（既定: なし）… 左右の送り矢印です。「なし／スタイル1／スタイル2／スタイル3」から選びます。スタイル1 は細い山形、スタイル2 は塗りつぶしの三角、スタイル3 は丸で囲んだ矢印です
• ページネーションの種類（既定: ダッシュ）… 何枚目かを示す目印です。「なし」「ドット」「ダッシュ（動画に重ねる横棒）」「カウンター（1 / 3 の形）」「数字（1・2・3 のボタン）」「プログレスバー」の 6 種類から選びます。ダッシュは今の動画がどこまで再生されたかを棒の塗りで示し、プログレスバーは全体の何枚目まで進んだかを示します。ドット・カウンター・数字は動画の下に並ぶのでブロックが縦に伸び、ダッシュとプログレスバーは動画の上に重なります
• 矢印とページネーションの色（既定: #DDDDDD）… 矢印と目印の色です。初期の薄いグレーは動画の上に重なるダッシュ・プログレスバー・矢印には合いますが、動画の下に出るドット・カウンター・数字は白い背景だとほとんど見えません。これらを選んだら濃い色に変えてください
• 暗幕の濃さ（既定: 20%）… 動画の上にかける黒い幕の濃さで、0〜80% を 5% 刻みで選べます。暗幕は、小見出し・大見出し・アクセント・ボタンのどれかが入ったスライドにだけかかります。文字の無いスライドは動画がそのまま映ります
• 大見出しの文字サイズと小見出しの文字サイズ（既定はともに「中」）… 「小／中／大」から選びます。ブロック全体に効き、スライドごとには変えられません。文字は画面幅に合わせて伸び縮みし、たとえば大見出しの「中」はスマホで 30px、広い PC 画面で最大 84px になります

• 文字色（既定: #FFFFFF）… 小見出しと大見出しの色です
• アクセント色（既定: #C6F24E）… 「大見出しのアクセント」に入れた文字の色です。矢印・ページネーションの色とは別に決められます
• ボタンの背景色（既定: #FFFFFF）／ボタンの文字色（既定: #000000）… ボタンの色です。動画の色味に合わせて、ブランドカラーにすると統一感が出ます

アニメーション設定

• 1枚あたりの最長表示時間（秒）（既定は 0 秒）… 1 枚を見せ続ける時間の上限です。0 から 15 までの整数で決めます。0 のときは時間では送らず、動画が最後まで再生されたら次へ送ります。1 以上にすると、動画の途中でもその秒数で次へ送ります。30 秒の動画を 8 秒だけ見せたい、といった使い方です。動画の進み具合が取れない場合に備えて、15 秒で送る保険も入っています
• 切り替えにかける時間（秒）（既定: 0.4）… 次のスライドへ切り替わる動きの長さで、0.1〜3 秒を 0.1 秒刻みで選べます。最長表示時間を超える値を入れた場合は、最長表示時間と同じ長さに揃えられます
• 切り替え方（既定はスライド）… 「なし／スライド／フェード」から選びます。なしはパッと切り替わり、スライドは横に流れ、フェードはその場でふわっと入れ替わります。どれを選んでも、お客様は指やマウスで掴んで横に動かして切り替えられます

パソコンやスマホで「視差効果を減らす」「動きを減らす」の設定をオンにしているお客様には、自動では送りません。矢印・ページネーション・スワイプでの切り替えはそのまま使えます。

動画設定

スライドは「動画1」〜「動画5」の 5 枚ぶんの枠があり、どれも同じ項目が並んでいます。動画が 1 つも入っていない枠は自動で飛ばすので、3 本だけ使うなら 3 枠だけ埋めれば十分です。1 枚目と 4 枚目だけ、のような歯抜けでもかまいません。

• リンクを新しいタブで開く（既定はオフ）… オンにすると、スライドに付けたリンクの移動先が別のタブで開くようになります。5 枚すべてに共通の設定で、ボタンのリンクはこの設定に関係なく今のタブで移動します
• 動画1 … ストアの「ファイル」に入っている動画を「選択」から選びます。PC とスマホの両方で使う基本の動画です
• 動画1（スマホ用） … 画面の幅が 750px より狭い端末に限って流す動画です。空のときはスマホでも「動画1」を出し、スマホ用だけを入れたときは PC でもスマホ用を出します
• 動画1の URL（YouTube / Vimeo） … 外部サービスの動画を使うときに、その動画のページの URL を貼ります。「動画1」が空のときだけ使われ、アップロードした動画があればそちらが優先されます。PC とスマホで同じ動画が出ます
• 動画1のポスター画像 … 動画が再生されるまで表示する画像です。アップロードした動画は Shopify が作るサムネイルを自動で使うので空でもかまいませんが、YouTube・Vimeo の動画ではポスター画像を設定してください。外部の動画は読み込みに時間がかかり、画像が無いとその間は黒い画面になります

• 動画1のリンク先 … スライドのどこを押しても移動する先を決めます。動画のどこを押してもこのページへ移動します
• 小見出し1 … 大見出しの上に出る小さな文字です（例: NEW IN）
• 大見出し1 … 大きな見出しです（例: EVERY）
• 大見出しのアクセント1 … アクセント色で出す見出しです（例: DETAIL）。大見出しの次の行に出るため、見出しの途中の 1 語だけ色を変えることはできません。1 行に収めたいときは大見出しだけに書きます
• ボタンの文言1 … ボタンに出す文字です（例: SHOP NOW）。空ならボタンは出ません
• ボタンのリンク先1 … ボタンを押したときの移動先です。文言だけ入れてリンク先が空だと、ボタンは出るのに押してもページの先頭に戻るだけになるので、必ずセットで入れてください
• 文言の位置1（既定: 左）… 文字を置く場所を「左／中央／右」から選びます。スライドごとに変えられるので、動画の被写体と重ならない側を選ぶと読みやすくなります

余白設定と追加設定

• 上部余白（PC とスマホで別々。既定はどちらも 0）… ブロックの上のすき間で、0〜100px を 1px 刻みで選べます
• 下部余白（PC とスマホで別々。既定はどちらも 0）… ブロックの下のすき間で、範囲は上部と同じです
• 追加のCSS … 見た目をさらに細かく変えたいときに CSS を書く欄です。書いた CSS はこのブロックの中にだけ効き、ページのほかの部分には影響しません。安全のため「<」の文字は取り除かれます

ヘッダーの直下に全幅で敷くなら余白は 0 のまま、ページの途中に置くなら上下に 40px 前後あけると、前後のセクションと詰まって見えません。

設定の組み合わせ例

項目が多いので、よく使う組み合わせを 3 つ紹介します。

• 操作できることをはっきり見せたいとき … 矢印の種類をスタイル3、ページネーションをドット、高さを中にします。丸い矢印とドットで、スライドが複数あることがひと目で伝わります。ドットは動画の下に並ぶので、色は濃いものに変えます

• 全体の進み具合を見せたいとき … 矢印の種類をスタイル2、ページネーションをプログレスバーにします。動画の下端に 1 本のバーが出て、全体のうち何枚目まで進んだかが伸びて示されます

• ページの途中に控えめに置きたいとき … 高さを小、矢印をなし、ページネーションをカウンターにします。高さ 420px に抑え、動画の下に「1 / 3」と出します

動画を主役にして何も邪魔させたくないときは、初期値のままが向いています。矢印は出さず、動画の下端に細い横棒が出るだけで、残り時間も棒の塗りで分かります。

動画を用意するときのポイント

アプリの設定が終わっても、流す動画が合っていないと魅力は伝わりません。ここでは、このアプリの仕様を踏まえた動画の用意のしかたをまとめます。

PC 用は横長、スマホ用は縦長で用意する

PC の画面は横に長く、スマホの画面は縦に長いので、同じ動画を両方で流すとどちらかで小さく映ります。このアプリはスライドごとにスマホ用の動画を別に持てるので、PC 用には横長の動画を、スマホ用には縦長の動画を用意すると、どちらの画面でも動画が大きく映ります。撮影の段階で、横長と縦長の両方を意識して撮っておくと後が楽です。

音が無くても伝わる動画にする

動画は音なしで流れるので、ナレーションに頼った動画は内容が伝わりません。字幕やテロップで要点を見せる、手元の動きや素材の質感など映像だけで分かる場面を中心にする、といった工夫が効果的です。見出しとボタンは動画の上に重ねられるので、動画そのものには文字を入れすぎないほうがすっきり見えます。

1 本の長さは短めにする

このアプリは動画が終わってから次のスライドへ送るので、長い動画を入れると次のスライドがなかなか見られません。ファーストビューで流す動画は 10〜20 秒ほどにまとめ、長い動画しか無いときは「1枚あたりの最長表示時間」で切り上げる秒数を決めておくと、全部のスライドが順番に回ります。

文字を置く側を空けて撮る

見出しとボタンは「左／中央／右」のどこかに重なります。被写体が画面の中央にある動画なら文字は左か右に、被写体が右に寄っている動画なら文字は左に置くと読みやすくなります。撮影や編集の段階で、文字を置く側に余白を残しておくのがおすすめです。

コードで自作する場合

アプリを使わずにテーマのコードで動画スライドショーを作ることもできます。ここでは、Shopify にアップロードした動画を並べて、動画が終わったら次へ送る最小限の例を紹介します。

まず、テーマの「sections」フォルダに新しいセクションを作り、動画を選ぶ設定とスライドの枠を用意します。次の Liquid は、ブロックごとに動画を 1 本選べるようにし、選ばれた動画を video タグとして並べるものです。

<div class="video-slider" data-video-slider>
  {%- for block in section.blocks -%}
    {%- if block.settings.video -%}
      <div class="video-slider__slide{% if forloop.first %} is-active{% endif %}">
        {{ block.settings.video | video_tag: muted: true, playsinline: true, preload: 'metadata' }}
      </div>
    {%- endif -%}
  {%- endfor -%}
</div>

{% schema %}
{
  "name": "動画スライダー（自作）",
  "blocks": [
    { "type": "slide", "name": "スライド", "settings": [
      { "type": "video", "id": "video", "label": "動画" }
    ] }
  ],
  "presets": [{ "name": "動画スライダー（自作）" }]
}
{% endschema %}

この例では、video_tag フィルタに muted と playsinline を渡しています。音のある動画はブラウザが自動再生を止めてしまうため、自動で流すなら音なしにするのが前提です。スマホで全画面再生に切り替わらないよう、playsinline も付けています。

次に、表示中の動画が終わったら次のスライドへ送る JavaScript を足します。ended イベントで次の動画に切り替え、表示していない動画は止めておきます。

document.querySelectorAll('[data-video-slider]').forEach((root) => {
  const slides = [...root.querySelectorAll('.video-slider__slide')];
  let current = 0;
  const show = (i) => {
    slides.forEach((s, n) => {
      const v = s.querySelector('video');
      s.classList.toggle('is-active', n === i);
      if (n === i) { v.currentTime = 0; v.play(); } else { v.pause(); }
    });
    current = i;
  };
  slides.forEach((s) => s.querySelector('video').addEventListener('ended', () => show((current + 1) % slides.length)));
  show(0);
});

このコードは「再生が終わったら次へ」の最低限だけを書いたものです。実際のストアで使うには、さらに次のような作り込みが要ります。

• 表示されていない動画や、画面の外にあるときに再生を止める処理
• PC とスマホで別の動画を出し分ける仕組みと、YouTube・Vimeo への対応
• 矢印・ページネーション・スワイプでの操作と、その見た目の切り替え
• 「動きを減らす」設定のお客様への配慮と、読み込み中に黒い画面を出さない工夫
• テーマを更新したときに、自作のセクションを新しいテーマへ移し替える作業

テーマのコードを書き換えると、テーマのアップデートや乗り換えのたびに手直しが発生します。アプリのブロックとして置いておけば、テーマのファイルを触らずに済み、上のような処理もはじめから入った状態で使えます。

追従動画やギャラリー系アプリとの使い分け

動画を見せるアプリには、画面の隅に動画を浮かせる追従動画タイプや、画像と動画を混ぜて回すギャラリー系のスライダーもあります。アプリごとの機能や料金の比較はほかの記事に譲り、ここでは、同じストアで組み合わせるときの考え方をまとめます。

置き場所で分ける

このアプリはページの中に「セクション」として置く全幅のスライドショーです。一方で、画面の隅に小さな動画を浮かせて、スクロールしても残し続けるタイプのアプリもあります。両者は置き場所がまったく違うので、ファーストビューは全幅のスライドショー、商品ページは隅に浮かぶ動画、と役割を分ければ同じストアで併用できます。

併用するときは、同じ動画を両方で流さないのがコツです。ファーストビューではブランドの世界観を伝える動画、商品ページでは使い方を説明する短い動画、と中身を変えると、どちらの動画も見てもらいやすくなります。

画像のスライドとは枠を分ける

画像と動画を 1 つのスライダーに混ぜたい場合は、画像のスライダーを別のセクションとして置き、このアプリは動画だけのスライドショーとして使うのがおすすめです。高さの設定で「小／中／大」を選べば、上下に並べたときにも高さを揃えやすくなります。

先にどちらを入れるかの判断

これからアプリを入れるなら、まずはトップページのファーストビューで何を見せたいかを決めてください。ブランドや新作の空気を伝えたいなら、このアプリで全幅のスライドショーを置くところから始めるのが近道です。そのうえで、商品ページの説明を補いたくなったら、追従動画などのアプリを足していく順番にすると、ページごとに役割が重ならず整理しやすくなります。

まとめ

動画スライドショーを置きたいストアにとって、このアプリの価値は次の点にあります。

• ひとつの枠の中で最大 5 本の動画を順番に流し、ファーストビューの面積を増やさずに伝える量を増やせる
• 時間ではなく再生の終わりで次へ進むので、作り込んだ映像を途中で切らずに見せられる
• 端末の幅で動画を差し替えられ、縦長の映像をスマホいっぱいに映せる
• 文字とボタンを動画に載せ、見たお客様をそのまま商品ページへ案内できる
• 表示中の 1 本しか動かさないので、本数を増やしても読み込みが膨らみにくい

管理画面での作業は追加先のテーマを選ぶくらいで、あとはテーマエディタの右側で好みに合わせて詰めていくだけです。月 $3.99、年払いなら $39.99 で、最初の 1 週間は無料で試せます。動きで魅力が伝わる商品を扱っているなら、Shopify App Store から入れてトップページに 1 本置くところから始めてみてください。

おすすめ Shopify アプリ

当社 UnReact では、ストアの見せ方を整えるアプリをほかにも提供しています。動画スライドショーとあわせて使いやすいものを紹介します。

• シンプル画像レイアウト｜お手軽フォトギャラリー＆グリッド … グリッド・メイソンリー・カルーセル・モザイクの画像ギャラリーを作れます。商品のホットスポットも置けるので、動画の下に着用写真を並べたいときに便利です
• シンプル紙吹雪アニメーション｜お手軽雪・もみじ・桜エフェクト … 雪・桜・紙吹雪など季節のエフェクトをストアに追加できます。セール期間の雰囲気づくりに使えます
• シンプル関連商品レコメンド｜よく一緒に購入されている商品 … 関連商品を一覧からまとめて設定でき、お客様はセットをワンクリックでカートに入れられます