Shopifyで特集コレクションタブを表示できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/05/23

はじめに

Shopify（ショッピファイ）は、世界中の事業者が利用しているオンラインストア構築サービスです。専門知識がなくても、自分のネットショップを開設・運営できます。そして Shopify アプリは、そのストアに後から機能を追加できる拡張ツールです。アプリを入れることで、標準では用意されていない便利な機能を、コードを書かずにストアへ取り入れられます。

このガイドでご案内する 「シンプル特集コレクションタブ｜お手軽おすすめ商品表示」 は、特集したいコレクションをタブで切り替えて表示できる Shopify アプリです。「新着」「セール」「人気」などの複数のコレクションをひとつのブロックにまとめ、お客様が気になるカテゴリーをすぐに見つけられるようにします。ホーム・商品・コレクションなど、あらゆるページに設置でき、おすすめ商品をスッキリ並べて、もっと多くの商品を見てもらいたい方にぴったりです。

PC・モバイルの列数、画像の縦横比、カードのデザイン、セール・NEW・売り切れバッジ、星評価、クイックビュー、カートへ直接追加など、細かい部分まで管理画面から調整できます。コーディングは一切不要で、テーマの雰囲気にあわせた見た目を作れます。

料金: Basic Plan 月額 $3.99（または年額 $39.99 で 16% お得）。インストールから 7 日間は無料でお試しいただけます。年払いにすると実質 2 ヶ月分が無料になり、お得にご利用いただけます。

▶ アプリストアはこちら: シンプル特集コレクションタブ｜お手軽おすすめ商品表示

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

「シンプル特集コレクションタブ｜お手軽おすすめ商品表示」でできること

このアプリを使えば、ホーム・商品・コレクションなどあらゆるページに、タブ切り替え式のコレクション一覧を配置できます。「新着」「セール」「人気」といった複数のコレクションをひとつのブロックにまとめられるので、お客様は気になるカテゴリーをワンタップで切り替えながら、すっきりと商品を見比べられます。コーディング不要で、テーマの雰囲気にあわせた見た目に仕上げられるのも魅力です。

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

このアプリの特徴

最大 4 つのコレクションをタブで切り替えて表示できます。
列数、余白、画像の縦横比などレイアウトを自由に調整できます。
セール・NEW・売り切れバッジで商品を目立たせられます。
星評価、クイックビュー、カートへ直接追加にも対応しています。
コーディングなしでテーマに簡単に追加できます。

コレクションをおしゃれに並べてお客様を案内！

特集したいコレクションをタブで切り替えながら、おすすめ商品をすっきりと並べて表示できます。お客様を自然に気になる商品へと案内できます。

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

5 種類のレイアウトからお好みのスタイルで表示！

グリッド・カルーセルなどの表示モードや列数を切り替えて、お好みのスタイルで商品を見せられます。ストアの世界観にあわせた並べ方を選べます。

複数のレイアウトスタイルで商品が表示されている画面

見出し・カード・ボタンを細かくカスタマイズ！

タイトルやサブタイトルの見た目、カードのデザイン、ボタンのスタイルまで、管理画面から細かく調整できます。ブランドの雰囲気に合わせて仕上げられます。

見出しやカード、ボタンの設定を行っている画面

画像比率やトリミング位置も自由に設定！

画像の縦横比や表示方法（カバー／コンテイン）を選んで、商品画像を美しく揃えて見せられます。バラバラなサイズの画像でも統一感のある見た目になります。

画像の縦横比やトリミングを設定している画面

1 クリックでテーマに追加できる！

難しい設定は不要です。アプリの管理画面からテーマを選んで「テーマに追加」を押すだけで、すぐにストアへ反映できます。

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

アプリのインストール

▶ アプリストアはこちら: シンプル特集コレクションタブ｜お手軽おすすめ商品表示

アプリは以下の手順でインストールできます。

Shopify 管理画面の左下にある「設定」をクリックします。
「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します。
検索窓にアプリ名「シンプル特集コレクションタブ」を入力し、表示されたアプリをクリックします。
アプリ詳細画面で「インストール」をクリックします。
権限の確認画面が表示されるので内容を確認し、「インストール」を完了します。

アプリブロックをテーマに追加

インストールが完了したら、アプリブロックをテーマに追加して、ストアに特集コレクションタブを表示しましょう。追加方法は「自動（1 クリック追加）」と「手動」の 2 通りがあります。

自動でテーマに追加（1 クリック追加）

最も簡単な方法です。アプリの管理画面から数クリックで設置できます。

アプリの管理画面を開きます。
「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。

手動でテーマに追加（任意ページに設置したい場合）

特定のページや任意の位置に設置したい場合は、こちらの手順をご利用ください。

Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
テーマエディタ上部のプルダウンから、追加したいページに移動します。
「セクションを追加」または「ブロックを追加」をクリックします。
「アプリ」タブからアプリブロックを選んで追加します。
表示を確認し、問題なければ「保存する」をクリックします。

アプリのカスタマイズ（特集コレクションタブブロック）

テーマエディタでブロックを選択すると、右側の設定パネルから細かくカスタマイズできます。ここでは設定項目を 5 つのグループに分けてご説明します。

コンテンツ設定

ブロックに表示するコレクションや見出しなど、中身に関する設定です。

タイトル: ブロックの上部に表示する見出しです。「おすすめ商品」「特集アイテム」など、お客様の目を引く言葉を設定すると効果的です。
サブタイトル: タイトルの下に表示する補足の見出しです。コレクションの説明やキャッチコピーを添えると、よりわかりやすくなります。
見出しの揃え: タイトル・サブタイトル・「すべて表示」リンクの配置を選べます（左揃え／中央揃え／右揃え）。テーマのデザインにあわせて選びましょう。
タイトルの文字サイズ: タイトルの大きさを調整します。ページの中で目立たせたい場合は大きめがおすすめです。
タイトルの太さ: タイトルの太さを選べます（標準／やや太め／太め／極太）。
タイトルの色: タイトルの文字色を指定できます。空欄にするとテーマの標準色が使われます。
サブタイトルの文字サイズ: サブタイトルの大きさを調整します。
サブタイトルの太さ: サブタイトルの太さを調整します。
サブタイトルの色: サブタイトルの文字色を指定できます。空欄にするとデフォルトのグレー色が使われます。
タブに表示するコレクション: タブとして表示するコレクションを最大 4 件まで選べます。選択した順にタブ 1・2・3・4 として表示されます。2 件以上選ぶと、自動でタブの切り替え UI が表示されます。
タブ 1〜4 の見出し: 各タブのラベルを設定できます。それぞれ選択したコレクションに対応します。空欄の場合はコレクション名がそのまま使われます。「新着」「セール」など短くわかりやすい言葉にすると、お客様が切り替えやすくなります。
表示する商品数: 1 つのタブに表示する商品数を選べます（4／8／12／16／24 件）。ページの読み込み速度とのバランスを見て選びましょう。
商品の並び順: 商品の表示順を選べます。「デフォルト」は Shopify 管理画面のコレクションの並び順を使用します。そのほか、新着順・追加が古い順・価格の安い／高い順・商品名の A-Z／Z-A から選べます。
売り切れ商品を除外する: オンにすると、在庫切れの商品をグリッドに表示しなくなります。常に購入できる商品だけを見せたい場合に便利です。
「すべて表示」リンクを表示: コレクションの全商品ページへのリンクを表示します。「もっと見たい」というお客様を商品一覧へ案内できます。
「すべて表示」リンクの文字: リンクに表示する文言を設定できます（例:「すべて見る」「もっと見る」）。
商品がない時のメッセージ: コレクションに商品がない場合に表示する文言を設定できます。

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

レイアウト設定

商品の並べ方やブロック全体の見た目に関する設定です。

表示モード: 「グリッド（タイル状に整列）」か「カルーセル（横スクロール）」を選べます。商品数が多い場合はカルーセルにすると省スペースで見せられます。
PC の列数: パソコンで表示するときの列数を選べます（2／3／4 列）。
モバイルの列数: スマートフォンで表示するときの列数を選べます（1／2 列）。
モバイルで横スクロールにする: オンにすると、PC はグリッドのまま、モバイルだけ横スクロール表示にできます。スマホでの見やすさを重視したい場合におすすめです。
カード間の余白: 商品カード同士の間隔を調整します。ゆったり見せたい場合は広めにしましょう。
セクションの最大幅: ワイド画面で商品が広がり過ぎないよう、横幅を制限できます。「親セクションに合わせる」を選ぶと、設置先のレイアウトに従います。
カルーセルの前ボタンのラベル: カルーセル表示のとき、前に戻るボタンのラベル（アクセシビリティ用）を設定できます。
カルーセルの次ボタンのラベル: カルーセル表示のとき、次に進むボタンのラベル（アクセシビリティ用）を設定できます。
ブロックのスタイル: ブロック全体の枠を「なし／枠線／カード」から選べます。背景や周囲のデザインと調和させたいときに役立ちます。
背景の色: ブロックの背景色を指定できます。
上部余白／下部余白: ブロックの上下の余白を調整します。前後のセクションとの間隔を整えられます。

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

カードデザイン設定

個々の商品カードの見た目や、表示する情報に関する設定です。

カードのスタイル: 商品カードの見た目を「ミニマル／枠線／影付き」から選べます。
カードの枠線の丸み: カードの角の丸みを選べます（なし／小／中／大）。やわらかい印象にしたいときは丸みを大きくしましょう。
カードの背景の色: 商品カードの背景色を指定できます。
カード内テキストの揃え: カード内の文字を「左揃え／中央揃え」から選べます。
画像の縦横比: 商品画像の縦横比を選べます（自動／正方形／横長／縦長／ワイド）。「自動」は画像本来の比率をそのまま使います。サイズの異なる画像を揃えたいときは固定の比率がおすすめです。
画像の表示方法: 「カバー（切り抜いて枠に合わせる）」か「コンテイン（画像全体を表示）」を選べます。
ホバー時に画像を拡大: カーソルを当てたときに画像をズームします。PC（ホバー可能なデバイス）のみ有効で、スマホ・タブレットでは動作しません。
ホバー時に 2 枚目の画像に切り替える: カーソルを当てると 2 枚目の画像に切り替わります。商品に 2 枚以上の画像がある場合のみ動作し、PC のみ有効です。商品の別アングルを見せたいときに効果的です。
ベンダー（ブランド名）を表示: 商品タイトルの上にブランド名を小さく表示します。ブランドを訴求したいストアにおすすめです。
レビューの星評価を表示: 商品メタフィールドから評価を読み取って星で表示します。Shopify Product Reviews、Judge.me、シンプルレビューなどに対応します。
評価データの取得元: 「カスタム（メタフィールドを手動指定）」か「シンプルレビュー（アプリ連携）」を選べます。「シンプルレビュー」を選ぶと当社アプリのレビューデータから平均値と件数を自動算出します。それ以外のレビューアプリを使う場合は「カスタム」を選び、下のメタフィールド設定を入力してください。
評価メタフィールドの名前空間: 「カスタム」選択時のみ使用します。例: Shopify Product Reviews の場合は「reviews」。
評価メタフィールドのキー: 「カスタム」選択時のみ使用します。例: Shopify Product Reviews の場合は「rating」。
評価件数メタフィールドのキー: 任意項目です。「カスタム」選択時のみ使用します（例: rating_count）。
単位価格を表示: 商品に単位価格（100g あたりなど）が設定されている場合のみ表示されます。食品や日用品などで便利です。
残り在庫を表示する閾値: 在庫がこの数値以下になったときに「残り X 個」と表示します。0 にすると非表示になります。在庫が少ない商品で購買を後押しできます。
残り在庫のメッセージ: 残り在庫を知らせる文言を設定できます。{count} は在庫数に置き換わります。

カードデザイン設定

バッジとアクション設定

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

セールバッジの表示: セール商品に表示するバッジを「割引率／カスタムテキスト／非表示」から選べます。
セールバッジの文字: 「カスタムテキスト」を選んだときに表示する文言を設定できます（例:「SALE」「お買い得」）。
セールの色: セールバッジ・割引後価格・在庫少数表示などに使われる色を指定できます。
NEW バッジを表示する日数: この日数以内に追加された商品に「NEW」バッジを表示します。0 にすると非表示になります。新商品をアピールしたいときに便利です。
NEW バッジの文字: NEW バッジに表示する文言を設定できます（例:「NEW」「新着」）。
売り切れバッジの文字: 在庫切れの商品に表示する文言を設定できます（例:「SOLD OUT」「売り切れ」）。
メインボタンの動作: 商品カードのメインボタンの動作を選べます。「カートに直接追加」「オプションを選択（クイックビューを開く）」「商品ページへ移動」から選択できます。「オプションを選択」は、バリアントがある商品でクイックビューを開きます。
ボタンのスタイル: ボタンの見た目を「アウトライン／塗りつぶし／テキストリンク／非表示」から選べます。
ボタンの枠線の丸み: ボタンの角の丸みを選べます（なし／小／中／ピル）。
カートに追加ボタンの文字: メインボタンが「カートに直接追加」のときに表示する文言です（例:「カートに入れる」）。
「オプションを選択」ボタンの文字: メインボタンが「オプションを選択」のときに表示する文言です。
「商品ページへ」ボタンの文字: メインボタンが「商品ページへ移動」のときに表示する文言です。
追加完了時の文字: カート追加が完了したときにボタンへ表示する文言です（例:「追加しました」）。
カート追加失敗時の代替メッセージ: カートへの追加に失敗したときに表示する文言です。
カート追加後にトーストを表示: カート追加に成功したとき、画面右下にお知らせ（トースト）を表示します。お客様に追加完了がわかりやすく伝わります。
トーストのメッセージ: トーストに表示する文言を設定できます。
クイックビューボタンを表示: 画像にカーソルを当てたとき、商品詳細をモーダルで開くボタンを表示します。ページを移動せずに商品を確認してもらえます。
クイックビューボタンの文字: クイックビューボタンに表示する文言です。
詳細を見るリンクの文字: クイックビューモーダル内に表示する、商品ページへのリンクの文言です。
数量ラベルの文字: クイックビューモーダル内の数量入力欄のラベルです（例:「数量」）。