Shopifyでコレクションの商品をレストランメニュー風に表示できるアプリについて徹底解説｜ご利用ガイド

はじめに

Shopify は、世界中の店舗が使っているネットショップ作成サービスです。管理画面から商品登録・決済・配送・マーケティングまでをひとつにまとめて運営でき、専用の「アプリ」を追加することで、コーディングをせずにストアの機能を拡張できます。

「シンプルレストランメニュー｜商品をメニュー形式で表示」は、コレクションに登録した商品を、飲食店のメニュー表のようなカード形式でストアフロントに表示するアプリです。商品画像・商品名・バリエーションごとの価格を一覧にし、お客様はメニューを眺めながらそのままカートに追加できます。レイアウト（カラム数・画像の配置・画像の形）、色（背景・枠線・文字・カートボタン）、余白まで細かく調整できるため、フードメニューに限らずコース案内や料金表のようなページ作りにも使えます。

料金は月額 7.99 ドル（年払いなら 79.99 ドルで実質 2 か月分お得）で、インストールから 7 日間は無料でお試しいただけます。アプリの詳細・レビューは Shopify アプリストアの シンプルレストランメニュー｜商品をメニュー形式で表示 から確認できます。

---

「シンプルレストランメニュー」でできること

このアプリでできることは、大きく分けて次の 5 つです。

1. コレクションの商品をレストランメニュー形式で表示できます。
2. メニューから直接カートに追加でき、バリエーション選択にも対応しています。
3. カードのレイアウト、色、フォント、画像スタイルを自由にカスタマイズできます。
4. 売り切れ商品は自動で検出され、カード全体の表示が切り替わります。
5. PC・スマホそれぞれに最適なレイアウトを個別に設定できます。

コレクションの商品をメニュー形式で並べられる

表示したいコレクションを 1 つ選ぶだけで、そのコレクションに登録済みの商品が自動でカード状に並びます。商品を 1 件ずつ登録し直す必要はなく、コレクションの中身を入れ替えれば表示内容もそのまま切り替わります。

バリエーションを選んでそのままカートに追加できる

サイズ違い・容量違いなどのバリエーションを持つ商品は、バリエーションごとに価格と数量ピッカーが並びます。お客様は数量を指定して「カートに追加」ボタンを押すだけでよく、商品ページに移動する手間がありません。追加後はヘッダーのカートアイコンの数量までその場で更新されます。

見た目を自由にカスタマイズできる

カラム数・画像の配置や形・カードの色や角丸・文字サイズと色・カートボタンの色とアイコンまで、Shopify テーマエディタの画面上で調整できます。コードを書く必要はありません。詳しい設定項目は「ストアフロントの設定」の章で 1 つずつ解説します。

売り切れ商品は自動でグレーアウトする

商品に登録されているすべてのバリエーションが在庫切れになると、そのカードだけが自動的に薄いグレー表示に切り替わり、数量ピッカーとカートボタンの代わりに売り切れであることを示すテキストが表示されます。手動で非表示にしたり並べ替えたりする必要はありません。

PC とスマホでレイアウトを分けられる

カラム数・画像の大きさ・カードの余白・タイトルの文字サイズと配置・上下の余白は、PC 用とスマホ用をそれぞれ個別に設定できます。PC では 2〜3 列のゆったりしたグリッド、スマホでは 1〜2 列の縦長カードといった使い分けが可能です。

---

インストール

Shopify アプリのインストールは、どのアプリでも共通の手順です。

1. Shopify 管理画面の左下にある「設定」を開きます。

   

2. 設定メニューから「アプリと販売チャネル」を開きます。すでにインストール済みのアプリが一覧で表示されます。

   

3. 画面内の「Shopify App Store で検索する」から、検索欄に「シンプルレストランメニュー」または「restaurant menu」と入力します。

4. 検索結果からアプリを開き、「アプリを追加する」を押します。

5. 表示される権限（アクセススコープ）の確認画面で内容を確認し、「アプリをインストール」を押すとインストールが完了します。

インストールが完了すると、左メニューの「アプリ」欄にアプリ名が追加され、管理画面からいつでも開けるようになります。

---

まず最初にやる設定

インストール直後は、テーマにまだメニューが追加されていない状態です。ストアフロントに表示させるまでの最短ルートは次の 4 手順です。

1. アプリの管理画面（「設定」ページ）を開きます。
2. 「テーマを選択」で追加先のテーマを選びます。初期値は公開中のテーマです。
3. 「テーマに追加」を押します。テーマエディタが新しいタブで開き、ホームページ（index テンプレート）の末尾にメニューのセクションが追加された状態になります。
4. テーマエディタの左側でメニューのセクションを選び、「コンテンツ設定」の「コレクション」欄で表示したいコレクションを指定してから、右上の「保存」を押します。

🚨 コレクションを指定しないままだと、ストアフロントには「Select a collection to display the menu.」という案内文だけが表示されます。保存前に必ずコレクションを選んでください。

🚨 「テーマに追加」で追加されるのは常にホームページです。コレクションページや商品ページなど別のページに設置したい場合は、次の章で説明する方法でテーマエディタから手動で追加してください。

---

管理画面でできること

アプリの管理画面には「設定」ページが 1 つだけあり、テーマへの追加と言語設定をここで行います。

テーマに機能を追加する

「テーマを選択」の欄には、ストアに入っているテーマがすべて一覧で表示されます。公開中のテーマには「（公開中のテーマ）」という注記が付き、初期状態では公開中のテーマがあらかじめ選ばれています。

ボタン	押すと起きること
テーマに追加	選択したテーマのテーマエディタが新しいタブで開き、ホームページの末尾にメニューのセクションが追加された状態になります。
テーマをプレビュー	メニューを追加せずに、選択したテーマのホームページをテーマエディタでプレビュー表示します。

🚨 テーマのバージョンや構成によっては、「テーマを選択」の欄が空欄になり自動追加が使えないことがあります。その場合や、「テーマに追加」を押しても自動追加が失敗する場合は、画面右下の「ご利用ガイド」から手動追加の手順を確認してください（管理画面にはこの注意を促す警告バナーも表示されます）。

他のページにもメニューを追加する

「テーマに追加」で追加されるのはホームページだけです。コレクションページや商品ページなど任意のページに設置したいときは、テーマエディタを直接開いて手動で追加します。

1. Shopify 管理画面の「オンラインストア」からテーマエディタを開きます。
2. 追加したいページ（コレクションページなど）に切り替えます。
3. セクションの一覧で「セクションを追加」を選び、アプリの一覧から「シンプルレストランメニュー」を選びます。
4. 追加したセクションの「コレクション」欄で表示したいコレクションを選び、保存します。

言語設定

「言語設定」では、アプリの管理画面自体の表示言語を切り替えられます（ストアフロントに表示されるメニューの見た目には影響しません）。

「言語を選択」のプルダウンから使用したい言語を選び、「変更する」を押すと管理画面の表示言語が切り替わります。この設定は管理画面専用で、テーマエディタ側のブロック設定のラベル表示は、ストア自体の言語設定に従って自動で切り替わります（後述）。

---

ストアフロントの設定

テーマエディタでメニューのセクションを選ぶと、左側に設定パネルが開きます。設定は 6 つのグループに分かれており、ここではグループごとに全項目を解説します。

🚨 ブロックの設定ラベルは、ストア自体の言語に合わせて 20 言語分が用意されています。日本語ストアでは日本語ラベルで表示されますが、売り切れテキスト の初期値だけは常に半角英語の Sold out です。日本語のストアで使う場合は、そのままにせず日本語のテキストに変更することをおすすめします。

コンテンツ設定

項目	意味	選択肢・範囲	初期値
セクションタイトル	メニューの上に表示する見出しの文言	自由入力（空欄可）	空欄
コレクション	メニューとして表示するコレクション	ストア内のコレクションから 1 つ選択	未選択
商品画像を表示	商品画像の表示・非表示	ON / OFF	ON
説明文を表示	商品説明文の表示・非表示	ON / OFF	ON
販売元を表示	商品の「販売元（ベンダー）」の表示・非表示	ON / OFF	OFF
表示する商品数	コレクション内の商品から何件まで表示するか	4〜50 件	50 件
売り切れテキスト	全バリエーション売り切れ時に表示する文言	自由入力	Sold out（英語のまま）

コレクションを選ぶまではメニューは表示されず、「Select a collection to display the menu.」という英語の案内文だけが表示されます。商品説明文は 120 文字を超えると自動的に省略され、「…」で切り詰められます。長い説明文を登録している場合は、冒頭 120 文字で内容が伝わるように書いておくと安心です。「表示する商品数」はコレクションに 50 件を超える商品が入っていても、指定した件数までしか表示しません。売れ筋や新商品をコレクションの先頭に並べておくと、上限に切り詰められても重要な商品から表示されます。

レイアウト設定

項目	意味	選択肢・範囲	初期値
カラム数	PC 表示時の 1 行あたりのカード数	2 / 3	2
カラム数（スマホ）	スマホ表示時の 1 行あたりのカード数	1 / 2	1
画像の配置	商品画像を横並びにするか縦並びにするか	横（左）/ 縦（上）	横（左）
画像の形	商品画像の切り抜き形状	丸 / 正方形 / オリジナル	丸
画像の大きさ（PC）	PC 表示時の画像サイズ（カードに対する割合）	10〜100%	30%
画像の大きさ（スマホ）	スマホ表示時の画像サイズ	10〜100%	50%
カードの背景色	商品カードの背景色	カラーピッカー	#ffffff
カードの枠線の色	商品カードの枠線の色	カラーピッカー	#e8e8e8
カードの枠線の丸み	カードの角丸の大きさ	0〜24px	16px
バリエーションの間隔	バリエーション行同士の間隔	0〜20px	4px
カードの内側余白（PC）	カード内側の余白（PC）	8〜40px	20px
カードの間隔（PC）	カード同士の間隔（PC）	8〜40px	24px
カードの内側余白（スマホ）	カード内側の余白（スマホ）	8〜40px	16px
カードの間隔（スマホ）	カード同士の間隔（スマホ）	8〜40px	16px

「画像の配置」を「縦（上）」にし、「画像の形」を「正方形」にすると、料理写真をより大きく見せる縦長カードのレイアウトになります（実際の見え方は「こんなときはこう設定する」の章で比較しています）。カラム数はスマホとPCで別々に持てるため、PC は 3 列で一覧性を高め、スマホは 1 列で写真を大きく見せる、といった使い分けができます。

文字設定

項目	意味	選択肢・範囲	初期値
タイトルの文字の大きさ（PC）	セクションタイトルの文字サイズ（PC）	16〜40px	28px
タイトルの文字の大きさ（スマホ）	セクションタイトルの文字サイズ（スマホ）	16〜40px	22px
タイトルの文字の色	セクションタイトルの文字色	カラーピッカー	#1a1a1a
タイトルの配置（PC）	セクションタイトルの横位置（PC）	左揃え / 中央揃え / 右揃え	左揃え
タイトルの配置（スマホ）	セクションタイトルの横位置（スマホ）	左揃え / 中央揃え / 右揃え	左揃え
商品名の文字の大きさ	商品名の文字サイズ	16〜32px	22px
商品名の文字の色	商品名の文字色	カラーピッカー	#1a1a1a
価格の文字の大きさ	価格の文字サイズ	14〜28px	16px
価格の文字の色	価格の文字色	カラーピッカー	#1a1a1a
説明文の文字の色	商品説明文の文字色	カラーピッカー	#666666

タイトルの配置だけは PC とスマホを別々に指定でき、商品名・価格・説明文の文字サイズと色は PC・スマホ共通の設定です。ブランドカラーに合わせて商品名や価格の色を変えると、他の情報より目立たせることができます。

カートボタン設定・余白設定・追加設定

カートボタン設定

項目	意味	選択肢	初期値
ボタンのアイコン	カートに追加ボタンのアイコン形状	カート / バッグ / バスケット	カート
ボタンの色	ボタンの背景色	カラーピッカー	#4caf50
ボタンの文字色	ボタンの文字色（アイコンの色も含む）	カラーピッカー	#ffffff

余白設定

項目	意味	範囲	初期値
上部余白（PC）	セクション上の余白（PC）	0〜100px	0px
下部余白（PC）	セクション下の余白（PC）	0〜100px	0px
上部余白（スマホ）	セクション上の余白（スマホ）	0〜100px	0px
下部余白（スマホ）	セクション下の余白（スマホ）	0〜100px	0px

追加設定

項目	意味
追加の CSS	このセクション専用に適用する CSS を直接入力できる欄です

「追加の CSS」に入力した内容は、このセクションだけに効くスタイルとしてそのまま出力されます。他のセクションやテーマ全体には影響しません。CSS の知識がある方向けの上級設定で、用意されている設定項目だけでは足りない微調整（影を付ける、特定の要素だけ余白を変えるなど）に使えます。

---

こんなときはこう設定する

設定の組み合わせ次第で見た目が大きく変わります。代表的な 2 つのパターンを紹介します。

標準の横並びレイアウト（初期設定）

「画像の配置」を「横（左）」、「画像の形」を「丸」にした初期設定です。商品名・価格をコンパクトにまとめたいとき、または商品数が多いコレクションを一覧性重視で見せたいときに向いています。

料理写真を大きく見せたいとき

「画像の配置」を「縦（上）」、「画像の形」を「正方形」に変更すると、商品画像がカード上部に大きく表示される縦長のカードになります。写真映えする料理をメインに見せたいメニューや、商品数が少なく 1 品ずつをしっかり見せたいコレクションに向いています。

どちらのパターンも「画像の配置」と「画像の形」の 2 項目を変更するだけなので、実際にテーマエディタでプレビューしながら気軽に試すことができます。

---

うまく表示されないときは

「Select a collection to display the menu.」としか表示されない

「コンテンツ設定」の「コレクション」が未選択の状態です。ブロックの設定パネルからコレクションを 1 つ選び、保存してください。

商品を登録したのにメニューに出てこない

「表示する商品数」の上限（初期値 50 件）を超えている可能性があります。上限を増やすか、コレクション内の商品の並び順を見直して優先度の高い商品を先頭に移動してください。

設定を変えたのに保存されていない

管理画面・テーマエディタともに、テキスト欄にカーソルを置いたまま保存ボタンを押すと、クリックが入力欄からフォーカスを外すだけで終わり、保存が実行されないことがあります。値を入力したら一度別の場所をクリックしてフォーカスを外してから、保存ボタンを押してください。保存後は画面を再読み込みし、変更が残っているかを確認すると確実です。

ストアフロントに変更が反映されない

Shopify のストアフロントは CDN でキャッシュされるため、保存直後は以前の表示のままになることがあります。URL の末尾に ?cb=適当な文字列 を付けて開き直すと、キャッシュを回避して最新の状態を確認できます。

「テーマに追加」を押しても自動で追加されない

テーマのバージョンや構成によっては、テーマへの自動追加に対応していない場合があります。管理画面の警告バナーの案内どおり、画面右下の「ご利用ガイド」ボタンから手動追加の手順を確認し、テーマエディタから「セクションを追加」で追加してください。

---

よくある質問

コレクションページに自動で表示されますか？

いいえ。「テーマに追加」ボタンで自動追加されるのは、常にホームページ（index テンプレート）です。コレクションページや商品ページなど別のページに表示したい場合は、テーマエディタからそのページを開き、手動でセクションを追加してください。

バリエーションがない商品はどう表示されますか？

バリエーションを 1 つしか持たない商品でも、価格と数量ピッカー、カートに追加ボタンは通常どおり表示されます。バリエーション名の行は、バリエーションが複数ある商品でのみ表示されます。

在庫が少ない商品の数量はどこまで増やせますか？

商品の「在庫が無くなったら販売を停止する」設定と在庫追跡が有効な商品は、数量ピッカーの上限が実際の在庫数までに制限されます。それ以外の商品（在庫追跡なし、または在庫切れ後も販売を続ける設定）は、上限が 99 個になります。

表示する商品の並び順は変更できますか？

このアプリ自体には並び替え機能はありません。表示順は選択したコレクション内の商品の並び順（Shopify の商品管理画面でコレクションごとに設定する並び順）がそのまま使われます。

複数のコレクションを 1 つのメニューにまとめて表示できますか？

いいえ。1 つのセクションにつき指定できるコレクションは 1 つです。複数のカテゴリーに分けて表示したい場合は、コレクションごとにセクションを追加してページ内に並べてください。

---

おわりに

「シンプルレストランメニュー｜商品をメニュー形式で表示」は、コレクションの商品をレストランメニュー風のカードで見せ、バリエーション選択からカート追加までをその場で完結させるアプリです。カラム数・画像・色・余白まで細かく調整できるうえ、売り切れ商品の表示切り替えも自動で行われるため、メニュー表を作ったあとの手入れの手間を減らせます。

料金は月額 7.99 ドル（年払いで 79.99 ドル）、7 日間の無料体験付きです。詳細は Shopify アプリストアの シンプルレストランメニュー｜商品をメニュー形式で表示 をご確認ください。