サムネイル

Shopify 商品カルーセルの設置方法|商品スライダーで売上を伸ばす設計とおすすめアプリ

目次

はじめに

Shopify で商品カルーセル・商品スライダーを設置しようとすると、最初に迷うのは「アプリを入れるべきか、テーマのコードをいじるべきか」という点ではないでしょうか。さらに調べていくと、「そもそも横スライド表示って本当に売れるの?」「設置したのに誰もスワイプしてくれない」といった、もう一歩踏み込んだ疑問にぶつかります。

この記事では、Shopify 商品カルーセル・商品スライダーについて検索される方が実際に抱えがちな疑問を起点に、Q&A 形式で答えていきます。逆効果にならない見せ方のデータ、テーマのコード編集での実装例、ノーコードで設置できるアプリ「シンプル商品カルーセル」の設定まで、必要な答えを順番に拾っていける構成にしました。商品スライダーの導入で失敗したくない方は、気になる疑問から読み進めてください。

今回は、以下の記事を参考にしています。

Q. そもそも商品カルーセルって本当に売上につながるの?

最初に多くの方が引っかかるのが、この根本的な疑問です。結論から言えば、商品カルーセル・商品スライダーは「使い方次第で武器にも逆効果にもなる」UI です。設置すれば自動的に売れる魔法のパーツではありません。

実は、カルーセルの効果には冷や水を浴びせるような検証データがあります。米ノートルダム大学の検証では、サイト訪問者のうちカルーセルをクリックしたのはわずか約 1% で、しかもそのクリックの 84〜89% が 1 枚目のスライドに集中していました。2 枚目以降すべてを合計しても、クリックは全体の 16% 以下にとどまります。つまり「めくってもらえる」前提で 2 枚目以降に主力を隠しても、ほとんど見られないということです。

一方で、設計次第でしっかり効くのも事実です。ある CRO(コンバージョン最適化)の事例では、トップのスライダーを単純に削除しただけで売上が 23% 増えたケースがある反面、健康食品のランディングページではカルーセルを導入したことで滞在時間が伸び、CVR が 1.3 倍に向上した事例も報告されています。同じ「カルーセル」でも、置き場所と見せ方で結果が真逆になるわけです。

ここから導けるのは、商品カルーセルを「ページの主役」にして自動回転させるのではなく、商品ページの関連商品やホームの回遊補助として、1 枚目に主力を置いて使うという方針です。本記事でも、この効果が出る設計を前提に話を進めます。

Q. 関連商品を出すと客単価は上がる?レコメンドの効果は?

商品スライダーの典型的な使い道が、商品ページ下部の「関連商品」「あわせて見たい商品」です。これがどれだけ効くのかは、レコメンドの統計が参考になります。

ある調査では、レコメンド(おすすめ・関連商品)経由の購入は EC 全体売上の最大 31% を占め、平均でも購入の約 12% が推薦商品経由とされています。注目すべきは効率で、レコメンドをクリックした訪問は全トラフィックのわずか 7% に過ぎないのに、注文の 24%・売上の 26% を生んでいるという数字です。少数の「関連商品を見たお客様」が、売上に対して不釣り合いなほど大きく貢献しているということです。

加えて、クロスセルやバンドル提案による客単価(AOV)の向上は、一般に 20〜35% という業界統計もあります。商品ページに「ついでにこれも」と感じさせる関連商品スライダーを置く価値は、こうした数字が裏づけています。横スライドで縦スペースを節約しつつ、購入の最後のひと押しを自然に差し込めるのが、商品カルーセルの実利的な強みです。

Q. アプリを使うべき?それともテーマのコード編集で十分?

Shopify で商品スライダーを実現する方法は、大きく 2 つに分かれます。検索ユーザーが最も比較したいのもこの二択です。

  • テーマのコードを編集して実装する方法 — HTML・CSS・JavaScript(Liquid)で自分でスライダーを組み込みます。月額費用はかからず仕様を完全にコントロールできますが、専門知識とメンテナンスが必要です。
  • アプリを導入して実装する方法 — App Store の商品スライダーアプリを使います。ノーコードで設置でき、デザインや挙動を管理画面から調整できます。月額数ドル程度の費用がかかります。

判断の分かれ目を整理すると、次のようになります。

観点テーマのコード編集アプリ導入
費用無料月額数ドル程度
必要なスキルHTML/CSS/JS・Liquid不要(ノーコード)
テーマ更新時コードが消える・競合のリスク影響を受けにくい
高機能(クイックビュー・バッジ等)自前実装が大変標準で利用可
不具合対応自分で対応サポートあり

筆者の実務感覚では、「まずは商品スライダーを試したい」「メンテナンスに時間を取られたくない」という段階なら、アプリで小さく始めるのが現実的です。多くのアプリに無料体験期間があるので、効果が出るかをリスクなく確かめられます。一方で、すでに最小限のスライダー仕様が固まっていて自分で保守できるなら、コード実装も十分に選択肢になります。この記事では両方の手順を後半で具体的に紹介します。

Q. 無料テーマの標準機能だけでは商品スライダーにできない?

「アプリを入れる前に、今使っているテーマで何とかならないか」という疑問もよく聞きます。ここは正確に線引きしておく価値があります。

Shopify 公式テーマ Dawn の「おすすめコレクション(Featured collection)」「コレクションリスト」セクションには、swipe_on_mobile という設定があります。初期値はオフですが、オンにすると grid--peek というクラスが付き、次のカードが少し見切れる横スワイプ表示になります。つまり、モバイルでの簡易的なスライダーは、無料テーマの標準機能だけでも実現できます。

ただし、できるのはそこまでです。Dawn 標準では、PC での矢印ナビゲーション、オートプレイ、クイックビュー、セールバッジといった機能は持っていません。「モバイルで横スワイプできれば十分」ならテーマ標準で事足りますが、PC でも操作させたい、スライダーから直接カートに入れさせたい、セール訴求も載せたい――となると、コード編集かアプリが必要になります。ここが無料でできる範囲とアプリが要る範囲の境界線です。

Q. アプリを選ぶなら相場と機能差はどれくらい?

アプリ導入に傾いたとして、次は「どれを選ぶか」です。指名検索で特定のアプリにたどり着く前に、相場感を知っておくと判断がぶれません。2026 年時点の主な商品スライダーアプリの料金・機能を並べると、おおよそ次のような分布です。

  • EasyBoost:Carousel — 無料〜 Premium 月額 $9.99。28 種類以上のテンプレートやカウントダウンが特徴。
  • ShopVisual Product Slider — Pro 月額 $3.99。関連商品・最近見た商品の表示に対応。
  • Qe Slider — 月額 $5〜。商品・コレクション・画像・動画に対応。
  • GG Product Page Image Slider — 無料〜 PRO 月額 $8.99。3D/AR 表示にも対応。

このなかで、本記事で詳しく紹介する日本製アプリ「シンプル商品カルーセル」は、月額 $3.99・7 日間無料体験で、6 種のカードデザイン・3 種の挙動・クイックビュー・セールバッジを備えています。価格帯としては相場の下限に位置しつつ、日本語での国内サポートを受けられるのが他にない持ち味です。海外アプリは多機能でも日本語サポートや管理画面の細かなニュアンスでつまずくことがあるため、「低価格・国内サポート・十分な機能」のバランスを重視するストアに向いた一本だと考えています。

おすすめ Shopify アプリ「シンプル商品カルーセル|お手軽おすすめ商品スライダー」

ここからは、ノーコードで商品スライダーを設置できる「シンプル商品カルーセル|お手軽おすすめ商品スライダー」を具体的に見ていきます。前半で触れた「1 枚目に主力を置く」「関連商品で客単価を上げる」といった設計を、管理画面の設定だけで実現できるのが選定理由です。

おすすめ商品をスライダーでストアに表示するアプリのメインビジュアル

アプリの基本情報

  • アプリ名:シンプル商品カルーセル|お手軽おすすめ商品スライダー
  • 料金:Basic Plan 月額 $3.99(年額 $39.99 で 17% お得)
  • 無料体験:インストールから 7 日間
  • 特徴:コレクションの商品をスライダーで表示/6 種のカードデザイン/3 種の挙動/クイックビュー/セールバッジ/ノーコード設置

コレクションを選ぶだけで商品スライダーが完成

「シンプル商品カルーセル」は、コレクションの商品をスライダー形式で表示し、ストア内のどのページにも設置できるアプリです。お好きなコレクションを選ぶだけで、ホームページには「おすすめ商品」として、商品ページには「関連商品」として、見せたい場所に自由に設置できます。前半のレコメンド統計を踏まえると、まず置きたいのは商品ページの関連商品枠です。

コレクションの商品をスライダーで表示した様子

カードデザインと列数を自由にカスタマイズ

カードのデザインは、ミニマル・枠線あり・影付き・フローティング・ポラロイド・グラスの 6 種類から選べます。PC とモバイルそれぞれの列数や画像の縦横比も調整できるので、テーマの世界観を崩さずになじませられます。実務では、まず縦横比を固定して見た目を揃えると、それだけで一気に整って見えます。

カードデザインや列数、挙動をカスタマイズしている設定画面

クイックビューでスライダーから直接購入

クイックビューボタンやカート追加ボタンを表示すれば、お客様は商品ページに移動しなくても、スライダーから直接商品を確認してカートに追加できます。「今見ているページを離れさせない」ことが回遊と比較のしやすさに直結するため、関連商品スライダーとは特に相性のよい機能です。

クイックビューでスライダーから直接購入できる様子

セールバッジ・売り切れバッジを自動表示

セール中の商品には割引率やセールバッジを、売り切れの商品には売り切れバッジを自動で表示します。お買い得感が一目で伝わるので、おすすめ商品スライダーのクリック率を底上げしやすいのが利点です。手動でバッジを貼る運用と違い、価格設定や在庫に応じて自動で切り替わる点が地味に効きます。

セールバッジや売り切れバッジが表示された様子

スライダーの挙動を 3 種類から選べる

スライダーの動きは「クラシック(横スライド)」「ピーク(次のカードが少し見切れる)」「フェード切替」の 3 種類から選べます。ノートルダム大学の検証が示すとおり「続きがあると気づかれない」のがカルーセルの弱点なので、次のカードが見切れるピークを選ぶと、スワイプを自然に促せます。

スライダーの挙動を切り替える設定画面

Q. インストールはどうやるの?手順を教えて

ここからは導入の実作業です。まずはアプリをストアにインストールします。

  1. Shopify 管理画面の左下にある「設定」をクリックします。

    Shopify 管理画面左下の「設定」ボタン

  2. 「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します。

    「アプリと販売チャネル」から Shopify App Store へ移動する画面

  3. 検索窓にアプリ名「シンプル商品カルーセル」を入力し、表示されたアプリをクリックします。

    App Store の検索窓にアプリ名を入力した画面

  4. アプリ詳細画面で「インストール」をクリックします。

    アプリ詳細画面の「インストール」ボタン

  5. 権限の確認画面が表示されるので、内容を確認して「インストール」を完了します。

    権限の確認画面

Q. インストールした後、どうやってストアに表示するの?

インストールが完了したら、スライダーを表示するためにアプリブロックをテーマに追加します。もっとも簡単なのは「自動(1 クリック追加)」です。

  1. アプリの管理画面を開きます。

    アプリ管理画面のトップ

  2. 「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。

    テーマを選択して「テーマに追加」をクリックする画面

  3. テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。

    テーマエディタでスライダーが追加された状態

特定のページや好きな位置に設置したい場合は、Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開き、「セクションを追加」→「アプリ」タブから「シンプル商品カルーセル」のブロックを選んで手動で追加します。商品ページの関連商品枠など、置き場所を細かく決めたいときはこちらの手動追加が便利です。

Q. どの設定をいじればいい?設定項目の意味を知りたい

テーマエディタでブロックを選択すると、右側に設定パネルが表示されます。設定はグループごとに分かれているので、迷いやすいポイントを補足しながら順に見ていきます。

基本設定(コンテンツ設定)

スライダーに表示する内容の基本設定です。

  • 見出し — スライダー上部のテキスト(初期値「おすすめ商品」)。「新着商品」「あなたへのおすすめ」など、何のスライダーかが伝わる言葉に変えると効果的です。
  • 見出しのフォントサイズ — 14px〜48px の範囲で調整できます。
  • 表示するコレクション — スライダーに表示する商品のコレクションを選びます。未選択の場合はストア全商品から新しい順で表示されます。
  • 表示する商品数 — 4・8・12・16・20・24 件から選べます(初期値 12 件)。

ここで欲張って 24 件にしたくなりますが、後述の運用のコツのとおり、表示速度との兼ね合いで 12 件前後が無難です。

コンテンツ設定の設定画面

スライダー設定(挙動と操作)

スライダーの動きや操作まわりの設定です。

  • スライダーの挙動 — クラシック(横スライド)/ピーク(次のカードが見切れる)/フェード切替(列数 1 のときのみ有効)から選べます。
  • PC での列数 / モバイルでの列数 — PC は 2〜5 列、モバイルは 1〜2 列から選べます。
  • 矢印ボタン・ドットの表示 — それぞれ表示・非表示を切り替えられます(1 ページしかないときは自動で非表示)。
  • オートプレイの間隔(秒) — 0〜15 秒で設定。0 で無効になります。
  • スライドの切替速度 — 0.1〜3.0 秒で調整できます。
  • 無限ループ — 最後のスライドで先頭に戻るかどうかを設定できます。

オートプレイは便利な反面、速すぎると読まれず逆効果になりがちです。手動操作を基本にしつつ、回したいときは 4〜5 秒のゆっくりめが扱いやすいと感じます。

スライダー設定の設定画面

表示条件の設定(カードデザイン)

商品カードの見た目を整える設定です。

  • カードの種類 — ミニマル/枠線あり/影付き/フローティング/ポラロイド/グラスの 6 種類から選べます。
  • 価格の表示方法 — 横並び/縦並び(比較価格上)/割引バッジ付きから選べます。
  • カードの枠線の丸み・背景色 — 角の丸みや背景色を調整できます。
  • 画像の縦横比 — 自動/正方形(1:1)/横長(4:3)/縦長(3:4)/ワイド(16:9)から選べます。揃った見た目にしたい場合は固定比率がおすすめです。
  • マウスオーバーで画像を拡大 — PC でカードにマウスを乗せたときに画像をゆっくり拡大します。

カードデザイン設定の設定画面

バッジ・ボタンの設定

  • セールバッジの表示 — 割引率で表示/テキストで表示/非表示から選べます。
  • セールバッジの形状・テキスト・色 — バッジの形(標準/丸型/枠線のみ)や文字、色を設定できます。
  • 売り切れバッジのテキスト — 在庫切れ時の表示(初期値「Sold Out」)を設定できます。
  • ボタンの種類 — 枠線/塗りつぶし/テキストリンク/非表示から選べます。
  • クイックビューボタンを表示 — 商品ページに移動せずに詳細を見せたいときに有効化します。

バッジ・ボタン設定の設定画面

6 種類のデザインスタイルをストアに合わせて使い分ける

「カードの種類」で選べる 6 種類のデザインスタイルは、ストアの世界観を大きく左右します。それぞれの特徴と向いているストアは次のとおりです。

  • ミニマル — 余計な装飾のないシンプルなスタイル。どんなテーマにもなじみやすく、写真の世界観を引き立てたいストアに向いています。
  • 枠線あり — カードの境界がはっきりするスタイル。商品ごとの区切りを明確にしたいときに便利です。
  • 影付き — 立体感のあるスタイル。カードが浮いて見え、クリックを促しやすくなります。
  • フローティング — ホバー時にカードが浮き上がる演出。動きで注目を集めたいストアにおすすめです。
  • ポラロイド — 白フレームのアルバム風スタイル。雑貨やハンドメイドなど、温かみのあるストアに合います。
  • グラス — 半透明のモダンなスタイル。背景画像と組み合わせると洗練された印象になります。

全体設定の設定画面

さらに細かく調整したい場合は、「追加設定」のカスタム CSS から独自のスタイルを適用することもできます。

追加設定の設定画面

Q. 設置する場所ごとに、おすすめ設定はある?

「設定項目はわかったけど、どう組み合わせればいいの」という疑問に答えるため、設置場所別の設定例を用意しました。前半で触れた設計の考え方を、具体的な数値に落とし込んでいます。

ホームページのおすすめ商品

  • 見出し:「おすすめ商品」または「新着商品」
  • 表示コレクション:新着 or 売れ筋
  • PC 列数:4/モバイル列数:2
  • 挙動:ピーク(続きがあることを伝えられる)
  • オートプレイ:4〜5 秒

商品ページの関連商品

  • 見出し:「関連商品」または「あわせて見たい商品」
  • 表示コレクション:同カテゴリのコレクション
  • PC 列数:3〜4/モバイル列数:2
  • クイックビュー:ON(離脱せずに比較できる)

セール特集ページ

  • 見出し:「セール対象商品」
  • 表示コレクション:セールコレクション
  • セールバッジ:割引率で表示
  • カードの種類:影付き or フローティングで注目度アップ

文言のテンプレ例

  • 見出し:「おすすめ商品」「新着アイテム」「あなたへのおすすめ」「あわせて見たい商品」「今売れています」
  • カートボタン:「カートに追加」「Add to Cart」
  • カート追加後:「追加しました!」「Added!」

商品カルーセル単体でも効きますが、組み合わせるとさらに伸びます。たとえば、おすすめ商品スライダーにセールバッジを重ねればお買い得感でクリック率が上がり、関連商品スライダーにクイックビューを合わせれば今見ているページを離れずに比較できます。新着商品スライダーをメールマガジンの新着告知と連動させたり、カート追加ボタンと「あと ◯◯ 円で送料無料」の訴求を組み合わせれば、ついで買いで客単価を押し上げる導線が作れます。こうして「発見 → 比較 → 購入」の流れを自然に組み立てられます。

Q. アプリを使わず、コードで自作するならどう書く?

「費用をかけずに最小限のスライダーで十分」という方向けに、テーマのコードを編集して商品スライダーを自作する例を紹介します。Liquid セクションでのシンプルな実装で、流れは次のとおりです。

  1. セクションに商品を出力する HTML(Liquid)を書く
  2. 横スクロールするスライダー用の CSS を追加する
  3. 矢印ボタンでスクロールさせる JavaScript を追加する

HTML を追加

商品をループで出力し、前後の矢印ボタンとトラックを置きます。コレクションは {% schema %} で選択できるようにしています。

{% comment %} sections/product-carousel.liquid {% endcomment %}
<div class="ur-carousel" data-carousel>
  <h2>{{ section.settings.heading | default: 'おすすめ商品' }}</h2>
  <button data-prev aria-label="前へ">‹</button>
  <ul class="ur-carousel__track" data-track>
    {% assign target = collections[section.settings.collection] %}
    {% for product in target.products limit: 12 %}
      <li class="ur-carousel__item">
        <a href="{{ product.url }}">
          <img src="{{ product.featured_image | image_url: width: 400 }}"
               alt="{{ product.title | escape }}" loading="lazy" width="400">
          <p>{{ product.title }}</p>
          <p>{{ product.price | money }}</p>
        </a>
      </li>
    {% endfor %}
  </ul>
  <button data-next aria-label="次へ">›</button>
</div>

{% schema %}
{
  "name": "商品カルーセル",
  "settings": [
    { "type": "text", "id": "heading", "label": "見出し", "default": "おすすめ商品" },
    { "type": "collection", "id": "collection", "label": "表示するコレクション" }
  ],
  "presets": [{ "name": "商品カルーセル" }]
}
{% endschema %}

CSS を追加

横並びのトラックを overflow-x: auto でスクロールさせ、scroll-snap でカード単位に止めます。PC 4 列・モバイル 2 列の例です。

.ur-carousel { position: relative; margin: 40px 0; }
.ur-carousel__track {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.ur-carousel__track::-webkit-scrollbar { display: none; }
.ur-carousel__item {
  flex: 0 0 calc((100% - 48px) / 4); /* PC 4 列 */
  scroll-snap-align: start;
}
.ur-carousel__item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}
@media (max-width: 749px) {
  .ur-carousel__item { flex: 0 0 calc((100% - 16px) / 2); } /* モバイル 2 列 */
}

JavaScript を追加

矢印ボタンでトラックを横スクロールさせる最小限の処理です。clientWidth の 0.9 倍ずつ送ることで、見えている範囲を少し残しながらめくれます。

document.querySelectorAll('[data-carousel]').forEach((carousel) => {
  const track = carousel.querySelector('[data-track]');
  const step = () => track.clientWidth * 0.9;
  carousel.querySelector('[data-prev]').addEventListener('click', () => {
    track.scrollBy({ left: -step(), behavior: 'smooth' });
  });
  carousel.querySelector('[data-next]').addEventListener('click', () => {
    track.scrollBy({ left: step(), behavior: 'smooth' });
  });
});

実装時に注意したいのは次の点です。テーマをアップデートすると追加したコードが消えたり競合したりする可能性があり、オートプレイ・無限ループ・クイックビュー・セールバッジといった高機能を自前で実装するのは手間がかかります。さらに、表示速度(画像の遅延読み込み)やアクセシビリティ(キーボード操作・読み上げ対応)への配慮も欠かせません。最小限のスライダーで足りるならコードでも対応できますが、作り込みやメンテナンスの負担を減らしたいなら、アプリの導入が現実的です。

Q. 設置した後、効果を出すために気をつけることは?

最後に、運用フェーズでつまずきやすいポイントを押さえておきます。冒頭のカルーセル検証データとも直結する話です。

  • 1 枚目に主力を置く — クリックの 8 割以上は 1 枚目に集中するため、いちばん見せたい商品やコレクションを先頭に配置します。
  • 表示件数は欲張りすぎない — 12 件前後を目安に、表示速度とのバランスを取りましょう。
  • 見出しで目的を伝える — 「おすすめ商品」「関連商品」など、何のスライダーかが伝わる見出しにすると理解が深まります。
  • モバイルの見え方を必ず確認する — モバイルの列数やスワイプ操作を実機で確認しましょう。
  • コレクションの並び順を活用する — 表示順はコレクションの「並び替え」設定に従うため、売れ筋順や手動並び替えを活用すると効果的です。
  • 季節やキャンペーンで切り替える — 表示コレクションを切り替えるだけで、その時々の訴求に合わせられます。

よくある質問

Q. コーディングの知識がなくても使えますか?
A. はい。「シンプル商品カルーセル」はノーコードで設置でき、テーマエディタから設定するだけで利用できます。

Q. どのページに設置できますか?
A. ホーム・商品ページ・コレクションページなど、ストア内のどのページにも設置できます。

Q. スマートフォンでも見やすく表示されますか?
A. はい。PC とモバイルそれぞれで列数を設定でき、スワイプ操作にも対応しています。

Q. セール中の商品にバッジを表示できますか?
A. はい。セールバッジ(割引率またはテキスト)と売り切れバッジを自動で表示できます。

Q. 料金はいくらですか?
A. Basic Plan 月額 $3.99(年額 $39.99 で 17% お得)です。インストールから 7 日間は無料でお試しいただけます。

Q. スライダーから直接カートに追加できますか?
A. はい。クイックビューボタンやカート追加ボタンを表示すれば、スライダーから直接カートに追加できます。

まとめ

Shopify 商品カルーセル・商品スライダーは、置けば売れるパーツではなく、設計次第で売上を伸ばす UI です。要点を振り返ります。

  • カルーセルのクリックは 1 枚目に集中するため、主力商品は先頭に置き、続きが見えるピーク表示で回遊を促すのが効果的です。
  • 関連商品・レコメンドは少数の訪問で売上の大きな割合を生むため、商品ページの関連商品スライダーは優先度の高い設置場所です。
  • 実装はコード編集とアプリ導入の 2 通り。無料テーマでもモバイル横スワイプ程度は可能ですが、クイックビューやセールバッジまで欲しいならアプリが要ります。
  • 「シンプル商品カルーセル|お手軽おすすめ商品スライダー」なら、6 種のカードデザイン・3 種の挙動・クイックビュー・セールバッジを備え、月額 $3.99・7 日間無料体験で、国内事業者のサポートを受けながら導入できます。

商品の見せ方を整えて、お客様のついで買い・まとめ買いを後押ししてみてください。

👉 シンプル商品カルーセル|お手軽おすすめ商品スライダー(Shopify App Store)

参考記事

今回は、以下の記事を参考にしています。

おすすめ Shopify アプリ

シンプルあといくらで無料ギフト|お手軽送料無料プログレスバーのアイコン

シンプルあといくらで無料ギフト|お手軽送料無料プログレスバー

カート金額に応じて無料ギフトと送料無料を提供。あといくらで届くかをプログレスバーで表示します。

シンプルお届け先変更|お手軽住所・配送日時のセルフ修正のアイコン

シンプルお届け先変更|お手軽住所・配送日時のセルフ修正

注文後のお届け先住所や配送希望日を、お客様自身で修正できます。問い合わせ対応の手間を減らします。

シンプル型番・JANコード表示|お手軽SKU・商品コード表示のアイコン

シンプル型番・JANコード表示|お手軽SKU・商品コード表示

商品ページに、選択中のバリエーションの SKU(型番)と JAN コードを表示します。テーマの編集は不要です。

シンプルPDFカタログ|お手軽PDFフリップブック表示のアイコン

シンプルPDFカタログ|お手軽PDFフリップブック表示

商品ページにPDFカタログを、ページをめくる本のように表示。お客様はページを離れずに読めます。

シンプル動画スライドショー|お手軽動画カルーセル表示のアイコン

シンプル動画スライドショー|お手軽動画カルーセル表示

どのページにも全幅の動画カルーセルを表示。動画ごとに見出しとボタンを重ねられます。

シンプルマイページクーポン|お客様アカウント割引コード表示のアイコン

シンプルマイページクーポン|お客様アカウント割引コード表示

顧客アカウントページにクーポンを表示。クーポンを作って ID を貼るだけで表示されます。

シンプル追従カウントダウンタイマー|お手軽あと何日表示のアイコン

シンプル追従カウントダウンタイマー|お手軽あと何日表示

ストアのどこにでも追従型のカウントダウンタイマーを表示して、購入の緊急性を演出できます。

シンプル売り切れバリエーション非表示|自動在庫切れ非表示のアイコン

シンプル売り切れバリエーション非表示|自動在庫切れ非表示

バリエーションピッカーから売り切れのサイズ・カラーを消します。お客様には購入できる選択肢だけが表示されます。

関連記事