サムネイル

Shopify 特集コレクションの選び方|コレクションタブでおすすめ商品表示を見せ分ける7つの観点

目次

はじめに

Shopify のトップページに商品を並べていくと、「新着もセールも人気も見せたいのに、縦に積むと延々スクロールが続いてしまう」という壁にぶつかります。ファーストビューに多くの商品を入れたいのに、入れるほどページが間延びしていく——この矛盾を解く見せ方が、特集コレクションをタブで束ねる「コレクションタブ」 です。

ただ、いざ導入しようとすると判断ポイントが意外と多く、Shopify 標準の 特集コレクション で足りるのか、列数や商品数はいくつにすべきか、おすすめ商品表示 の並び順はどこで決まるのか、コードで作るべきかアプリに任せるべきか、と迷う方が大半です。

そこでこの記事は、機能紹介を並べる前に「どう選ぶか」を主役に置きました。標準セクションの設定値、コレクション側の並び順との連動、実装方法の判断軸という、上位記事が統合して触れていない観点を 7 つに整理し、それぞれの観点に沿ってアプリと実装を当てはめていきます。

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

まず押さえる:標準の特集コレクションとコレクションタブは別物

選び方を語る前に、出発点となる事実をはっきりさせておきます。Shopify の標準テーマ(Dawn など)に用意されている「特集コレクション(Featured collection)」セクションは、1 つのコレクションを表示する専用のセクション です。複数コレクションをタブで切り替える UI は、標準テーマには存在しません。

標準の特集コレクションセクションで触れる設定は、おおむね次の範囲にとどまります。

  • 見出しと見出しサイズ(小/中/大/特大/4L)
  • 説明文
  • 表示するコレクションの選択(1 件)
  • 表示する最大の商品数(2〜25 商品)
  • デスクトップの列数(1〜6 列)

つまり「新着」「セール」「人気」をワンブロックで見比べてもらう、という おすすめ商品表示 をしたい時点で、標準セクションの守備範囲を超えています。タブ表示にするには、テーマの コード編集(HTML / CSS / JS) か、タブ機能を持つ専用アプリのどちらかが前提になります。ここが選び方の入口です。

なお、Dawn は Shopify テーマストアで v15.4.1(2025 年 12 月時点)まで更新が続いており、特集コレクションのプレースホルダがデスクトップ列数に応じて表示調整されるよう改修されています。標準セクションも進化していますが、それでも「1 コレクション専用」という性格は変わっていません。

コレクションタブの選び方:7 つの観点

ここからが本題です。タブ型の コレクションタブ を導入するとき、どこを見て決めればよいのか。実務でつまずきやすい順に観点を並べました。アプリ選びでも自前実装の検討でも、この 7 観点が判断のものさしになります。

観点1:そもそもタブにすべきか(縦積みとの分かれ目)

最初に問うべきは「本当にタブが要るか」です。見せたいコレクションが 1 つなら、標準の特集コレクションセクションで十分で、わざわざタブにする必要はありません。

タブが効いてくるのは、複数のコレクションをファーストビュー付近に共存させたいときです。レコメンドや おすすめ商品表示 はクロスセル・アップセルを通じて回遊率やクリック率、ひいては LTV の向上に寄与する接客手段です。複数コレクションを縦に延々と並べる代わりにタブで束ねれば、ファーストビュー内の情報密度を保ったままスクロール量を減らせます。これがホームページにタブ型の特集コレクションを置く具体的な根拠です。逆に商品グループが 1 つしかないストアでは、タブはむしろ操作の手間を増やすだけになります。

観点2:何コレクションまで束ねられるか

タブにできるコレクション数は、アプリや実装によって上限が異なります。実用上、タブは多ければよいものではありません。ラベルが多すぎるとお客様はどれを押せばよいか迷い、切り替えの体験が悪化します。

筆者の感覚では、「2〜4 タブ」 がトップページの収まりとしてはちょうどよいラインです。後述するアプリも自前実装サンプルも、上限を 4 に設計しているのはこの実用ラインを意識したものです。

観点3:表示する商品数と列数(数値で決める)

地味ですが効果に直結するのが、1 タブあたりの商品数とグリッドの列数です。標準の特集コレクションでは商品数を 2〜25 商品、デスクトップ列数を 1〜6 列の範囲で選べます。タブ表示の場合は「ファーストビューに何行入るか」を逆算して決めるのがコツです。

例えば PC 4 列なら、商品数 8 で 2 行、12 で 3 行に収まります。行数が増えるほどタブを切り替える前にスクロールが発生し、タブにした意味が薄れます。「1〜2 行で収める」 を基準に、列数と商品数をセットで決めるのがおすすめです。

観点4:おすすめ商品表示の並び順はどこで決まるか

ここが見落とされがちな、しかし最も重要な観点です。特集コレクションで表示される商品の並び順は、特集コレクションセクション側ではなく、コレクション自体の「並び順」設定に従います。

並び順は管理画面の商品管理→コレクションから、手動(ドラッグ&ドロップ)/アルファベット順(A-Z, Z-A)/価格順/ベストセラー(売上ベース)/作成日/在庫数などから選べます。つまり「推したい商品を先頭に出したい」「売れ筋を前面に出したい」という意図を実現する操作は、特集コレクションの設定画面ではなくコレクション側にあります。「おすすめ商品表示」 を意図どおりに見せたいなら、対象コレクションの並び順を 「手動」 か 「ベストセラー」 に設定する——この導線まで解説している記事は多くありません。観点として必ず押さえてください。

観点5:自動コレクションと手動コレクションの使い分け

並び順とあわせて知っておきたいのが、コレクションには 「自動(スマート)」 と 「手動」 の 2 タイプがある点です。自動はタグ・価格・在庫などの条件で商品を自動追加し、手動はドラッグ&ドロップで個別に商品を組み込みます。

季節特集・セール・新着・スタッフのおすすめといったテーマ別のセレクションを作るとき、条件で回せるものは自動コレクション、手で並びを作り込みたいものは手動コレクション、と使い分けると運用工数を下げられます。タブの「新着」を自動(作成日順)、「人気」を手動+ベストセラー、というように、タブごとにコレクションの性質を変えるのが実務的な組み方です。

観点6:バッジ・星評価・カート追加まで要るか

タブで商品を見せるなら、カードの作り込みも体験を左右します。セールバッジ、NEW バッジ、売り切れバッジ、レビューの星評価、カードからの直接カート追加やクイックビューといった要素は、あると回遊から購入への距離を縮めます。

ここが実装方法の分かれ目になります。後述しますが、これらを自前のコードで一つずつ作るのは相当な手間です。バッジや星評価まで欲しいなら、最初から備えたアプリを選ぶ方が現実的、という判断につながる観点です。

観点7:コード実装かアプリ導入か(保守コストで判断)

最後の観点が、実装手段そのものの選択です。判断は機能差より 保守コスト で考えるのが失敗が少ない進め方です。

判断軸コード編集で実装アプリで実装
初期費用無料月額数ドル程度
必要スキルLiquid・CSS・JS の知識が必須不要(管理画面で設定)
テーマ更新時崩れ・消失のリスクあり、都度確認アプリ側で吸収
バッジ・星評価・カート追加追加実装に大きな手間標準搭載が多い
レスポンシブ・アクセシビリティ自分で対応用意済みが多い
サポートなし提供元のサポートあり

デザインを 1 ピクセル単位で完全に握りたい、追加費用をかけたくない、という場合はコード編集が向きます。一方で観点 6 の機能まで含めると、自前実装は保守も含めて重くなりがちです。手軽さと保守性を優先するなら、月額数ドルのアプリで小さく始め、効果を見ながら運用するのが現実的な一手です。

7 観点を満たすアプリ「シンプル特集コレクションタブ|お手軽おすすめ商品表示」

シンプル特集コレクションタブのメインイメージ

上の 7 観点を一通り満たす形で設計されているのが、日本製アプリ 「シンプル特集コレクションタブ|お手軽おすすめ商品表示」 です。ノーコードでコレクションタブを設置でき、観点 3 の列数調整、観点 6 のバッジ・星評価・カート追加までカバーしています。最初に試したい一本として、観点ごとに何ができるかを当てはめながら見ていきます。

以下の Shopify 公式のアプリストアからインストールできます。
シンプル特集コレクションタブ|お手軽おすすめ商品表示

アプリの基本情報

  • アプリ名: シンプル特集コレクションタブ|お手軽おすすめ商品表示
  • 料金: Basic Plan 月額 $3.99(または年額 $39.99 で 16% お得)/7 日間の無料体験
  • 特徴: 最大 4 つのコレクションをタブで切り替え表示、ノーコード、豊富なカスタマイズ
  • 設置場所: ホーム・商品・コレクションなどあらゆるページ

観点 2(束ねられる数)は最大 4 タブ、観点 7(実装手段)はノーコードという位置づけです。月額 $3.99 は、自前実装の保守工数を時給換算すれば十分元が取れるラインだと筆者は見ています。

観点2を満たす:タブ切り替えで複数コレクションをひとつのブロックに表示

特集したいコレクションを最大 4 件までタブにまとめられます。「新着」「セール」「人気」など、お客様が気になるカテゴリーをワンタップで切り替えながら、ひとつのブロックで多くの商品を見てもらえます。観点 2 で触れた「2〜4 タブ」の実用ラインにそのまま収まる設計です。

タブ切り替えで複数コレクションを表示しているストアフロント

観点6を満たす:セール・NEW・売り切れバッジを設定できる

セール中の商品には割引率やお好みの文言を、最近追加した商品には NEW を、在庫切れの商品には売り切れバッジを表示できます。観点 6 で「自前だと手間がかかる」と挙げた要素が、設定をオンにするだけで揃うのが大きな差です。

セール・NEW・売り切れバッジが表示された商品カード

観点6を満たす:レビューアプリの評価を表示できる

商品メタフィールドから評価を読み取り、星評価として表示できます。Shopify Product Reviews や Judge.me、シンプルレビューなどに対応し、商品の信頼感をそのままお客様に伝えられます。観点 4 の「ベストセラー並び」と星評価を重ねると、売れ筋に社会的証明が乗り、初回訪問者の購買ハードルを下げられます。

星評価が表示された商品カード

観点6を満たす:クイックビュー&カートに直接追加で、快適に購入

商品ページに移動しなくても、モーダルで詳細を確認したり、その場でカートに追加したりできます。タブで多くの商品に触れてもらう設計と相性がよく、せっかく広げた回遊を購入まで途切れさせません。

クイックビューとカート追加ボタンが表示された画面

観点3を満たす:スキーマで様々な項目を設定できる

見出し・カードのデザイン・ボタン・画像比率・バッジなど、細かな見た目をテーマエディタからまとめて調整できます。観点 3 で重視した列数・商品数も、コードを触らずここで決められます。テーマの雰囲気にあわせて仕上げられるのも実務では助かるポイントです。

テーマエディタの設定パネルで各項目を調整している画面

観点7を満たす:1 クリックでテーマに追加できる

難しい設定は不要です。アプリの管理画面からテーマを選んで「テーマに追加」を押すだけで、すぐにストアへ反映できます。観点 7 で挙げた「保守の軽さ」を、導入の段階から実感できる作りです。

ワンクリックでテーマに追加する操作画面

アプリのインストール手順

それでは、実際にアプリをインストールする手順を見ていきましょう。

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

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

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

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

  3. 検索窓にアプリ名「シンプル特集コレクションタブ」を入力し、表示されたアプリをクリックします。

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

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

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

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

    権限の確認画面とインストール完了ボタン

アプリをテーマに追加(有効化)

インストールが完了したら、アプリブロックをテーマに追加します。もっとも簡単な「自動(1 クリック追加)」の手順を紹介します。

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

    アプリの管理画面トップ

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

    テーマを選択して「テーマに追加」を押す画面

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

    テーマエディタでブロックが追加された状態

特定のページや任意の位置に設置したい場合は、テーマエディタの「セクションを追加」→「アプリ」タブからブロックを選んで手動で追加することもできます。

観点を設定値に落とし込む:設定パネルの読み方

テーマエディタでブロックを選択すると、右側の設定パネルから細かくカスタマイズできます。ここでは先ほどの 7 観点を、実際の設定グループにひもづけながら見ていきます。設定は大きく 5 つのグループに分かれています。

コンテンツ設定(観点2・3・4に対応)

ブロックに表示するコレクションや見出しなど、中身に関する設定です。観点 2 のタブ数、観点 3 の商品数、観点 4 の並び順がここに集まります。

  • タイトル/サブタイトル: ブロック上部の見出しと補足の見出しを設定します。「おすすめ商品」「特集アイテム」などお客様の目を引く言葉が効果的です。
  • タブに表示するコレクション: タブとして表示するコレクションを最大 4 件まで選べます。2 件以上選ぶと自動でタブの切り替え UI が表示されます。
  • タブ 1〜4 の見出し: 各タブのラベルを設定できます。「新着」「セール」など短くわかりやすい言葉にすると切り替えやすくなります。
  • 表示する商品数: 1 つのタブに表示する商品数を選べます(4/8/12/16/24 件)。観点 3 の「1〜2 行で収める」を意識して列数とセットで決めましょう。
  • 商品の並び順: デフォルト・新着順・価格順・商品名順などから選べます。なお元のコレクション側で「手動」「ベストセラー」を設定しておくと、観点 4 のおすすめ表示が崩れません。
  • 売り切れ商品を除外する/「すべて表示」リンク: 在庫切れ商品の非表示や、全商品ページへの導線を設定できます。

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

レイアウト設定(観点3に対応)

商品の並べ方やブロック全体の見た目に関する設定です。観点 3 の列数はここで決めます。

  • PC/モバイルの列数: PC は 2〜4 列、モバイルは 1〜2 列から選べます。
  • カード間の余白/セクションの最大幅/ブロックのスタイル/背景色/上下余白: ブロック全体の見た目を細かく調整できます。

レイアウト設定の設定画面

カードデザイン設定(観点6に対応)

個々の商品カードの見た目や表示情報に関する設定です。観点 6 の星評価もここに含まれます。

  • カードのスタイル/角の丸み/背景色/テキストの揃え: カードの見た目を整えられます。
  • 画像の縦横比/表示方法: 自動・正方形・横長・縦長・ワイドから選べ、カバー/コンテインも指定できます。
  • ホバー時の拡大・2 枚目画像への切り替え: PC でカーソルを当てたときの動作を設定できます。
  • ベンダー表示/レビューの星評価: ブランド名や星評価を表示できます。星評価は Shopify Product Reviews、Judge.me、シンプルレビューなどに対応します。

カードデザイン設定

バッジとアクション設定(観点6に対応)

セールや NEW などのバッジ、カートに追加・クイックビューといったボタンの動作に関する設定です。

  • セールバッジ/NEW バッジ/売り切れバッジ: 割引率やカスタムテキストで商品を目立たせられます。NEW バッジは追加からの日数で自動表示できます。
  • メインボタンの動作: 「カートに直接追加」「オプションを選択(クイックビュー)」「商品ページへ移動」から選べます。
  • カート追加後のトースト表示/クイックビューボタン: 追加完了のお知らせや、ページ移動なしの商品確認に対応します。

バッジとアクション設定の設定画面

追加設定

さらに細かく見た目を調整したい上級者向けの設定です。このブロック内にのみ適用されるカスタム CSS を入力でき、標準の設定では対応できない細かなデザイン調整を行えます。

追加設定の設定画面

観点5の実践:ストア別の組み方テンプレート

観点 5 で触れた自動コレクションと手動コレクションの使い分けを、具体的なストア像に当てはめてみます。

  • トップページの訴求強化: タブを「新着」「セール」「人気」の 3 つに設定し、PC 4 列・モバイル 2 列のグリッド表示に。「新着」は自動(作成日順)、「人気」は手動+ベストセラー並びにしておくと運用が楽です。NEW バッジとセールバッジをオンにして、推し商品を目立たせます。
  • 商品ページの関連訴求: 商品ページ下部に「関連カテゴリー」「同じブランド」のタブを設置し、列数を抑えてコンパクトに。クイックビューをオンにすると、ページ遷移なしで他商品を確認してもらえます。
  • セール特設の演出: セール期間中だけ「タイムセール」「アウトレット」のタブを追加し、セール色を目立つ色に変更。条件で回せるセール対象は自動コレクションにすると、商品の入れ替えが手間なく済みます。残り在庫の表示で購買を後押しします。

文言のテンプレ例

  • タブ見出し: 「新着」「セール」「人気」「おすすめ」
  • 「すべて表示」リンク: 「すべて見る」「もっと見る」
  • カート追加ボタン: 「カートに入れる」/追加完了時: 「追加しました」

関連施策との組み合わせで効果を伸ばす

特集コレクションタブは、ほかの施策と組み合わせることで、より高い効果を発揮します。

  • コレクションタブ × おすすめ商品表示: 「人気」「ベストセラー」タブを使って売れ筋を前面に出すことで、初回訪問者の購買ハードルを下げられます。観点 4 のベストセラー並びとレビューの星評価表示を重ねると、社会的証明による後押しも期待できます。
  • コレクションタブ × セール訴求: セールバッジや割引率の表示と組み合わせ、「セール」タブをトップに置くことで、値下げ中の商品への注目を集められます。
  • コレクションタブ × ナビゲーション強化: メガメニューやコレクションページの並べ替えと併用することで、ストア全体の回遊性を底上げできます。トップでタブ表示を見たお客様を、各コレクションページへスムーズに誘導できます。

このように、コレクションタブによる おすすめ商品表示 は、単体でも効果的ですが、バッジやレビュー、ナビゲーション施策と組み合わせることで、ストアの売上最大化につなげられます。

自前実装を選ぶ場合のサンプルコード

観点 7 でコード編集を選んだ方向けに、テーマのコードでコレクションタブを実装する場合のサンプルを紹介します。バッジや星評価を含まない最小構成でも、これだけのコード量になる点を実感してみてください。

実装の流れ

  1. sections フォルダに新しいセクションファイルを作成する
  2. Liquid でタブのボタンと商品グリッドを出力する
  3. CSS でタブとグリッドの見た目を整える
  4. JavaScript でタブの切り替え動作を実装する

HTML(Liquid)を追加

{%- comment -%} sections/featured-collection-tabs.liquid {%- endcomment -%}
<div class="fc-tabs">
  <div class="fc-tabs__nav" role="tablist">
    {%- for block in section.blocks -%}
      {%- assign col = collections[block.settings.collection] -%}
      <button class="fc-tabs__btn{% if forloop.first %} is-active{% endif %}" data-tab="{{ block.id }}" role="tab">
        {{ block.settings.label | default: col.title }}
      </button>
    {%- endfor -%}
  </div>
  {%- for block in section.blocks -%}
    {%- assign col = collections[block.settings.collection] -%}
    <div class="fc-tabs__panel{% if forloop.first %} is-active{% endif %}" data-panel="{{ block.id }}">
      <ul class="fc-tabs__grid">
        {%- for product in col.products limit: 8 -%}
          <li class="fc-tabs__card">
            <a href="{{ product.url }}">
              <img src="{{ product.featured_image | image_url: width: 400 }}" alt="{{ product.title }}" loading="lazy">
              <p>{{ product.title }}</p>
              <p>{{ product.price | money }}</p>
            </a>
          </li>
        {%- endfor -%}
      </ul>
    </div>
  {%- endfor -%}
</div>
{% schema %}
{
  "name": "特集コレクションタブ",
  "blocks": [
    { "type": "tab", "name": "タブ", "settings": [
      { "type": "collection", "id": "collection", "label": "コレクション" },
      { "type": "text", "id": "label", "label": "タブの見出し" }
    ] }
  ],
  "max_blocks": 4,
  "presets": [{ "name": "特集コレクションタブ", "blocks": [{ "type": "tab" }] }]
}
{% endschema %}

この Liquid では col.products をそのまま出力しているため、表示順は観点 4 のとおりコレクション側の並び順設定に従います。並びを変えたいときはコード側ではなくコレクションの並び順を触る、という点はアプリでも自前実装でも共通です。

CSS を追加

.fc-tabs__nav {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 16px;
}
.fc-tabs__btn {
  padding: 8px 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: #888;
}
.fc-tabs__btn.is-active {
  color: #111;
  border-bottom: 2px solid #111;
  font-weight: 600;
}
.fc-tabs__panel {
  display: none;
}
.fc-tabs__panel.is-active {
  display: block;
}
.fc-tabs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
}
@media (max-width: 749px) {
  .fc-tabs__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.fc-tabs__card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

ここで列数(repeat(4, 1fr) と repeat(2, 1fr))を直書きしている点に注目してください。観点 3 の列数を変えたいたびに、PC とモバイルそれぞれの CSS を書き換える必要があります。アプリなら設定パネルのプルダウンで済む部分です。

JavaScript を追加

document.querySelectorAll('.fc-tabs').forEach((root) => {
  const buttons = root.querySelectorAll('.fc-tabs__btn');
  const panels = root.querySelectorAll('.fc-tabs__panel');
  buttons.forEach((btn) => {
    btn.addEventListener('click', () => {
      const id = btn.dataset.tab;
      buttons.forEach((b) => b.classList.toggle('is-active', b === btn));
      panels.forEach((p) => p.classList.toggle('is-active', p.dataset.panel === id));
    });
  });
});

コード実装の注意点

  • テーマをアップデートすると、追加したコードが失われたり崩れたりする場合があります。必ずバックアップを取りましょう。
  • レスポンシブ対応・アクセシビリティ対応(キーボード操作やスクリーンリーダー)は自分で実装する必要があります。
  • バッジ・星評価・カート追加などの機能を追加するには、さらに多くのコードが必要になります。

観点 6 の機能まで欲しいと思ったら、自前実装はここからさらに重くなります。手軽さと保守性を重視するなら、やはり専用アプリの利用がおすすめです。

導入後に効かせる運用のコツ

  • タブの数は 2〜4 個に絞り、ラベルは短くわかりやすくすると、お客様が切り替えやすくなります(観点 2)。
  • 最初のタブには、もっとも見てほしいコレクション(新着やベストセラーなど)を置きましょう。
  • 季節やキャンペーンに合わせて、定期的に表示するコレクションを入れ替えると、リピーターにも新鮮に映ります。
  • モバイルでの見え方を必ず確認し、列数や余白を調整しましょう(観点 3)。

よくある質問

検索でよく見かける疑問を、観点とひもづけて整理しました。

Q. 標準の特集コレクションセクションではタブにできないのですか?
A. できません。標準の特集コレクションは 1 コレクション専用で、タブ切り替え UI は標準テーマに含まれません。タブにするにはコード編集か専用アプリが必要です(観点 1)。

Q. おすすめ商品表示の並び順はどこで変えますか?
A. 特集コレクションセクションではなく、コレクション側の「並び順」で決まります。手動またはベストセラーに設定すると、推したい商品を先頭に出せます(観点 4)。

Q. コーディングの知識がなくても使えますか?
A. はい。管理画面から設定するだけで、コードを書かずにコレクションタブを設置できます。

Q. いくつのコレクションをタブにできますか?
A. 最大 4 つのコレクションをタブで切り替えて表示できます。

Q. トップページ以外にも設置できますか?
A. はい。ホーム・商品・コレクションなど、あらゆるページに設置できます。

Q. レビューの星評価は表示できますか?
A. 表示できます。Shopify Product Reviews、Judge.me、シンプルレビューなどに対応しています。

Q. 料金はいくらですか?
A. Basic Plan 月額 $3.99(または年額 $39.99 で 16% お得)で、7 日間の無料体験が可能です。

Q. カートへの直接追加はできますか?
A. できます。メインボタンの動作を「カートに直接追加」に設定すれば、商品カードから直接カートに追加できます。

まとめ

  • 特集コレクションタブの選び方は、「タブにすべきか→何件束ねるか→商品数と列数→並び順→自動/手動→カードの機能→実装手段」という 7 観点で考えると迷いません。
  • Shopify 標準の特集コレクションは 1 コレクション専用で、タブ表示にはコード編集かアプリが必須です。
  • おすすめ商品表示の並び順は特集コレクションセクションではなくコレクション側で決まるため、手動かベストセラーへの設定が肝になります。
  • 7 観点を一通り満たして手軽に始めたいなら、「シンプル特集コレクションタブ|お手軽おすすめ商品表示」が最初に試したい一本です。最大 4 つのコレクションをタブ表示でき、列数・バッジ・星評価まで設定パネルで調整できます。

7 つの観点を手元のものさしにして、おすすめ商品をもっと多くのお客様に見てもらいましょう。

参考記事

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

おすすめ Shopify アプリ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

シンプル在庫切れ並び替え|売り切れ商品を末尾へ自動ソートのアイコン

シンプル在庫切れ並び替え|売り切れ商品を末尾へ自動ソート

売り切れ商品をコレクションの末尾へ自動で移動。再入荷すると元の位置に戻ります。

関連記事