Shopifyで商品ページに栄養成分表示とアレルゲンを表示できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/09/07

はじめに

食品表示に必要な項目は、熱量・たんぱく質・脂質・炭水化物・食塩相当量の 5 つ。アレルゲンは特定原材料 8 品目と、表示が推奨される 20 品目で合わせて 28 品目。このアプリは、その 5 項目と 28 品目を商品バリエーションごとに登録して、商品ページにそのまま表示するためのものです。

Shopify は、ネットショップを開くためのサービスです。商品の登録や注文の管理は最初からできますが、食品表示のように業種ごとに必要になる機能は、アプリを追加して補います。「シンプル栄養成分・アレルギー表示｜食品表示」は、その食品表示の部分を受け持つアプリです。

味違い・サイズ違いのように商品のバリエーションごとに成分が変わる場合でも、バリエーション単位で数値を持てます。お客様が商品ページでバリエーションを切り替えると、表示も自動で切り替わります。表示に使う見出しとアレルゲン名は 20 言語に対応しているので、多言語で販売しているストアでもそのまま使えます。

料金は月額 $2.99、年額なら $29.99 です。7 日間の無料体験が付いているので、手持ちの商品で表示を確かめてから決められます。

アプリストア: シンプル栄養成分・アレルギー表示｜食品表示

シンプル栄養成分・アレルギー表示｜食品表示のメイン画像

このアプリでできること

できることは次の 5 つです。

商品のバリエーションごとに栄養成分表示とアレルゲンを登録できます。
商品ページに栄養成分のテーブルまたはカードを表示できます。
色・枠線・余白・レイアウトをノーコードで調整できます。
CSV で多数の商品の栄養成分データを一括登録できます。
バリエーションの切り替えに合わせて表示が自動で更新されます。

バリエーションごとに成分を分けて持ちたいときは

1 つの商品に複数のバリエーションがあるとき、栄養成分とアレルゲンはバリエーションごとに別々に持てます。たとえば同じグラノーラバーでも、ハニーアーモンド味には小麦とアーモンド、ダークチョコレート味には乳と小麦、といった具合に分けられます。商品単位でしか持てないアプリだと「代表的な 1 つ」しか出せませんが、このアプリは味ごとの違いをそのまま出せます。

商品編集ページでバリエーションごとにカードが分かれている管理画面

お客様が味を選んだら表示も入れ替えたいときは

商品ページでお客様がバリエーションを切り替えると、栄養成分の数値もアレルゲンのバッジも入れ替わります。ページの再読み込みは起きません。最初に読み込んだ時点で全バリエーションぶんのデータをページに埋め込んでおき、切り替えを検知して表示だけ差し替える仕組みです。

Honey Almond を選んだときの商品ページの栄養成分表示

Dark Chocolate に切り替えたときの商品ページの栄養成分表示

商品数が多くて手入力がつらいときは

CSV で一括登録できます。SKU をキーにしてバリエーションを探すので、商品名やバリエーション名の表記ゆれを気にせず登録できます。

CSV一括登録の結果画面

インストールしたいときは

Shopify のアプリはすべて Shopify App Store から入れます。手順は 5 つです。

1. Shopify 管理画面の「設定」を開く

管理画面の左下にある「設定」を押します。

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

2. 「アプリと販売チャネル」から App Store を開く

設定の中の「アプリと販売チャネル」を開き、「Shopify App Store」を押します。

設定のアプリと販売チャネルから Shopify App Store を開く画面

3. アプリを検索する

検索窓に「栄養成分」「アレルゲン」「食品表示」などを入れると、「シンプル栄養成分・アレルギー表示｜食品表示」が見つかります。

4. 「インストール」を押す

アプリの詳細ページで「インストール」を押します。料金と無料体験の有無もこの画面で確認できます。

アプリ詳細ページのインストールボタン

5. 権限を確認して進む

アプリが必要とする権限の確認画面が出るので、内容を確認して進めるとインストールが完了します。このアプリは商品とテーマの情報だけを扱い、顧客情報や注文情報には触れません。

まず最初にやること

インストールしただけでは商品ページには何も出ません。表示されるまでに必要なのは次の 3 つです。このうち 1 つでも欠けると何も表示されないので、順番どおりに進めてください。

1. 商品に栄養成分かアレルゲンを登録する

アプリを開いて「商品を追加」から商品を選び、栄養成分かアレルゲンのどちらかを入力して「保存」します。**その商品のどのバリエーションにもデータが 1 件も無い場合、商品ページにはブロックごと何も出ません。**空の見出しだけが残らないようにするための仕様です。

2. テーマに「栄養成分表示ラベル」を追加する

アプリの「設定」を開き、テーマを選んで「テーマに追加」を押します。**追加先は商品ページ（product テンプレート）です。**トップページやコレクションページではありません。

3. テーマエディタで「保存」する

「テーマに追加」を押すとテーマエディタが新しいタブで開き、ブロックが追加された状態になります。**テーマエディタ右上の「保存」を押すまで、この追加は反映されません。**追加したのに商品ページに出ないときは、まずここを疑ってください。

ここまで済むと、商品ページに栄養成分表示が出ます。位置を変えたい場合は、テーマエディタの左側でブロックをドラッグします。

管理画面でできること

管理画面は「栄養成分一覧」「商品編集」「CSV一括登録」「設定」の 4 画面です。左のサイドバーからは「栄養成分一覧」と「設定」の 2 つに入れます。

栄養成分一覧（ホーム）

アプリを開くと最初に出る画面です。栄養成分かアレルゲンを 1 つでも登録済みの商品だけが並びます。まだ何も登録していない商品は出てきません。ストアの全商品を管理する画面ではなく、「登録した商品の管理台帳」として使う画面です。

栄養成分一覧の管理画面

一覧に出る項目

列	内容
画像	商品のサムネイル画像。画像が無い商品にはプレースホルダーが出ます
商品名	Shopify に登録されている商品名
バリエーション数	その商品が持つバリエーションの件数
登録状況	「全バリエーション登録済み」（緑）か「一部未登録」（黄）のどちらか
操作	「編集」リンク。押すとその商品の編集画面へ移動します

登録状況のバッジは 2 種類だけです。**「未登録」というバッジは出ません。**一覧に出ている時点で最低 1 バリエーションは登録済みだからです。「一部未登録」が出ていたら、まだ数値を入れていないバリエーションが残っているという意味なので、編集画面で埋めてください。

商品名で探したいときは

「商品名で検索」に文字を入れて「検索」を押すと、商品名で絞り込めます。

一覧の件数と「もっと見る」

一覧は 1 回に 20 件ずつ表示され、続きがあるときは下に「もっと見る」ボタンが出ます。

ここには知っておいたほうがよい仕様があります。Shopify 側の検索では「栄養成分を登録済みの商品」だけを直接絞り込むことができないため、アプリが商品を順番に読みながら登録済みのものを拾っています。読む範囲には上限があり、1 回の表示につき最大 250 商品までです。

そのため、商品数が非常に多く、しかも登録済みの商品がカタログの後ろのほうに固まっているストアでは、**登録してあるのに一覧に出てこない商品が生じることがあります。**そのときは商品名で検索すれば個別に見つけられます。また「もっと見る」で増える件数は毎回きっちり 20 件とは限らず、ページごとにばらつきます。

もう 1 つ、1 商品あたり 100 バリエーションまでが判定の対象です。101 件目以降のバリエーションは登録状況の判定に含まれません。

新しい商品を追加したいときは

画面右上の「商品を追加」を押すと、Shopify の商品ピッカーが開きます。

商品を追加を押して商品ピッカーが開いた管理画面

商品を選んで「追加」を押すと、その商品の編集画面へそのまま移動します。**この時点では一覧には追加されません。**編集画面で栄養成分かアレルゲンを保存して初めて一覧に載ります。

ピッカーは複数選択できますが、**複数選んだ場合は先頭の商品の編集画面だけが開きます。**残りの商品へ続けて移動する導線は用意していないので、1 商品ずつ登録していく使い方になります。

商品編集（栄養成分とアレルゲンの入力）

一覧の「編集」、または商品ピッカーで商品を選んだときに開く画面です。その商品が持つ全バリエーションが、上から順にカードとして並びます。

未登録の商品を開いたときの栄養成分入力フォーム

カードの見出しはバリエーション名です。SKU が設定されている場合は、見出しの下に SKU も出ます。CSV 一括登録は SKU で照合するので、ここに SKU が出ていないバリエーションは CSV では登録できません。

栄養成分を入力したいときは

まだ何も登録していないバリエーションを開くと、消費者庁の食品表示基準の表示順に沿って 5 項目があらかじめ並んでいます。

順番	項目名	単位
1	熱量	kcal
2	たんぱく質	g
3	脂質	g
4	炭水化物	g
5	食塩相当量	g

各行は「項目名」「値」「単位」の 3 つの入力欄でできています。項目名も単位も自由に書き換えられます。「熱量」を「エネルギー」に変えたり、単位を「kJ」にしたりできます。英語で販売しているストアなら「Calories / kcal」のように書き換えて構いません。

値は数字だけでなく**文字も入れられます。**食品表示の実務では「1.5 未満」「0」のような書き方をすることがあるため、あえて数値に限定していません。入れた文字はそのまま商品ページに出ます。

項目を追加: 行が 1 つ増えます。食物繊維・糖質・カルシウムなど、標準の 5 項目に無いものを足したいときに使います。追加できる件数に上限はありません。
削除: その行を消します（読み上げソフトには「項目を削除」と読まれます）。使わない項目は消して構いません。5 項目すべてを消すこともできます。

アレルゲンを選びたいときは

同じカードの下半分がアレルゲンの選択欄です。チェックボックスが 2 グループに分かれています。

特定原材料（表示義務8品目）: 卵 / 乳 / 小麦 / そば / 落花生（ピーナッツ） / えび / かに / くるみ
特定原材料に準ずるもの（表示推奨20品目）: アーモンド / あわび / いか / いくら / オレンジ / カシューナッツ / キウイフルーツ / 牛肉 / ごま / さけ / さば / 大豆 / 鶏肉 / バナナ / 豚肉 / まつたけ / もも / やまいも / りんご / ゼラチン

合わせて 28 品目です。義務と推奨が見出しで分かれているので、最低限どこまで入れるべきかが選びながら分かります。

保存されるのは品目そのものではなく品目を表す内部の記号なので、**商品ページに出る品目名は、お客様が見ている言語に自動で合わせて表示されます。**日本語で「小麦」にチェックを入れておけば、英語のお客様には「Wheat」と出ます。

保存したいときは

カードの一番下にある「保存」を押します。**保存はバリエーションごとに独立しています。**1 つのカードで保存しても、他のカードの入力内容は保存されません。複数のバリエーションを編集したときは、カードごとに「保存」を押してください。

保存に成功すると、そのカードの上に緑色の「保存しました」が出ます。画面の隅に出るトーストではなく、カードの中に出ます。

保存しましたのバナーが表示された管理画面

入力した内容は Shopify のメタフィールドに保存されます。アプリ専用の領域に保存されるため、他のアプリの設定と混ざることはありません。

CSV一括登録

商品数が多いときは、1 商品ずつ入力せず CSV でまとめて登録できます。一覧の右上「CSV一括登録」から開きます。

CSV一括登録の画面

CSV の書き方

1 行目にヘッダー、2 行目以降にデータを書きます。文字コードは UTF-8、区切りはカンマです。使える列は次の 8 つです。

列名	必須	内容
`variant_sku`	必須	対象バリエーションの SKU。ストア内で一致する 1 件を探します
`calories`	任意	熱量。単位は kcal として登録されます
`protein`	任意	たんぱく質。単位は g
`fat`	任意	脂質。単位は g
`carbohydrate`	任意	炭水化物。単位は g
`salt`	任意	食塩相当量。単位は g
`extra_items_json`	任意	標準 5 項目以外を足したいときに使います。`[{"label":"食物繊維","value":"2.1","unit":"g"}]` の形式で書きます
`allergens`	任意	アレルゲンを縦棒 `\|` で区切って並べます。例: `wheat\|soybean`

必須なのは variant_sku だけです。値を入れなかった列は登録されません。

allergens に書く記号は次のとおりです。

品目	記号	品目	記号
卵	`egg`	ごま	`sesame`
乳	`milk`	さけ	`salmon`
小麦	`wheat`	さば	`mackerel`
そば	`buckwheat`	大豆	`soybean`
落花生	`peanut`	鶏肉	`chicken`
えび	`shrimp`	バナナ	`banana`
かに	`crab`	豚肉	`pork`
くるみ	`walnut`	まつたけ	`matsutake_mushroom`
アーモンド	`almond`	もも	`peach`
あわび	`abalone`	やまいも	`yam`
いか	`squid`	りんご	`apple`
いくら	`salmon_roe`	ゼラチン	`gelatin`
オレンジ	`orange`	牛肉	`beef`
カシューナッツ	`cashew_nut`	キウイフルーツ	`kiwifruit`

登録する前に中身を確かめたいときは

「CSVファイルを選択」でファイルを選ぶと、すぐにプレビューが出ます。この時点ではまだ何も登録されていません。

CSVを選んでプレビューが表示された画面

プレビューには「行」「SKU」「注意」の 3 列が出ます。**「行」はファイルの行番号で、ヘッダーを 1 行目として数えます。**最初のデータ行は 2 になります。エラーのある行を探すときに使ってください。

「注意」には、そのまま登録すると一部が無視される場合の警告が出ます。出るのは次の 2 つです。

未知のアレルゲンキーが含まれていたため、該当分は無視されました … 上の表に無い記号を書いたときに出ます。書いた記号のうち正しいものだけが登録され、間違ったものは捨てられます。行そのものは登録されます。
extra_items_json の形式が不正なため、任意項目は無視されました … extra_items_json が JSON として読めなかったときに出ます。標準の 5 項目とアレルゲンは登録され、任意項目だけが捨てられます。

どちらも**登録は止まりません。**気づかずに進めると一部だけ抜けた状態になるので、プレビューの「注意」列は必ず目を通してください。

登録したいときは

プレビューの下にある「登録」を押します。処理が終わると結果が出ます。

CSV一括登録の結果画面

結果には「成功件数」と「SKUが見つからなかった件数」が出て、見つからなかった SKU は一覧で表示されます。**SKU が一致しない行はスキップされ、処理自体は最後まで続きます。**途中で止まらないので、打ち間違えた行だけ直して再実行できます。

知っておくとよい仕様が 3 つあります。

**同じ SKU が複数のバリエーションに付いている場合、最初に見つかった 1 件だけが対象になります。**SKU はストア内で重複しないように付けてください。
送信は 12 バリエーションずつに分けて行われます。行数が多いほど時間がかかります。
**数百行を超える CSV での実行時間は検証していません。**初めて大量に登録するときは、数十行ずつに分けて試すことをおすすめします。

設定

サイドバーの「設定」から開きます。テーマへの追加と、管理画面の言語切り替えができます。

アプリの設定画面

テーマに追加したいときは

「テーマを選択」で対象のテーマを選び、「テーマに追加」を押します。公開中のテーマには「（公開中のテーマ）」と付くので、下書きのテーマと取り違えにくくなっています。

テーマに追加: テーマエディタが新しいタブで開き、**商品ページ（product テンプレート）**にブロックが追加された状態になります。追加を確定するにはテーマエディタで「保存」を押す必要があります。
テーマをプレビュー: 選んだテーマの商品ページをプレビュー表示します。追加はされません。

テーマのバージョンによっては自動追加がうまくいかないことがあります。画面にも「アプリブロックの自動追加が失敗する場合は手動追加をお試しください」という案内が出ます。その場合はテーマエディタで商品ページを開き、「ブロックを追加」から「栄養成分表示ラベル」を選んでください。

また、商品ページ以外のページにも置きたい場合は、テーマエディタで手動追加します。「テーマに追加」ボタンから追加できるのは商品ページだけです。

管理画面の言語を変えたいときは

「言語設定」で言語を選び、「変更する」を押すと、アプリの管理画面の表示言語が変わります。対応しているのは次の 20 言語です。

日本語 / 英語 / チェコ語 / デンマーク語 / ドイツ語 / スペイン語 / フィンランド語 / フランス語 / イタリア語 / 韓国語 / ノルウェー語（ブークモール） / オランダ語 / ポーランド語 / ポルトガル語（ブラジル） / ポルトガル語（ポルトガル） / スウェーデン語 / タイ語 / トルコ語 / 中国語（簡体字） / 中国語（繁体字）

何も設定しない場合は、Shopify 管理画面のアカウント言語に自動で合わせます。ここで明示的に選ぶと、そちらが優先されます。

**この設定はブラウザごとに保存されます。**別のパソコンやブラウザでアプリを開いたときは、そちらであらためて設定してください。ストア全体の設定ではないので、他のスタッフの表示には影響しません。

商品ページの見た目を変えたいときは

商品ページに出るブロックの名前は「栄養成分表示ラベル」です。テーマエディタで選ぶと、右側に設定パネルが開きます。

テーマエディタに栄養成分表示ラベルが追加された状態

設定は「商品」「デザイン設定」「上級者向け」の 3 つのまとまりに分かれています。

商品

設定	内容
商品	どの商品の栄養成分を出すかを指定します

商品ページに置いた場合は、**そのページで表示している商品が自動で入ります。**通常は触る必要がありません。商品ページ以外に置いて特定の商品を出したいときだけ、ここで商品を選びます。

デザイン設定

栄養成分表示ラベルのデザイン設定パネル前半

設定	選べる値	初期値	何が変わるか
レイアウト	表形式 / カード形式	表形式	栄養成分の並べ方そのものが変わります
文字サイズ	小 / 中 / 大	中	ブロック全体の文字の大きさ
見出しの太さ	400〜900（100 刻み）	600	「栄養成分」「アレルゲン」の見出しの太さ
見出しの色	自由	`#202223`	見出しの文字色
文字色	自由	`#202223`	項目名と数値の文字色
背景色	自由	透明	ブロック全体の背景色
アクセントカラー（罫線）	自由	`#8C9196`	表の罫線・枠線の色
枠線の太さ	0〜4px（1px 刻み）	1px	罫線・枠線の太さ。0 にすると線が消えます
枠線のスタイル	実線 / 破線 / 点線	実線	罫線・枠線の見た目

栄養成分表示ラベルのデザイン設定パネル後半と上級者向け

設定	選べる値	初期値	何が変わるか
アレルゲンバッジの背景色	自由	`#F6F6F7`	アレルゲン名を囲むバッジの背景色
アレルゲンバッジの文字色	自由	`#202223`	バッジの文字色
角丸の半径	0〜24px（2px 刻み）	24px	バッジとカードの角の丸み
余白	コンパクト / 標準 / ゆったり	標準	ブロック内側の余白の詰まり具合
カードの間隔	4〜32px（4px 刻み）	12px	カード形式のときの要素どうしの隙間
カードの列数（0で自動）	0〜4（1 刻み）	0	カード形式のときの列数

いくつか補足します。

レイアウトは見た目だけの違いではありません。「表形式」は本物の表として、「カード形式」は定義リストとして出力しています。どちらを選んでも読み上げソフトが正しく読めるように作り分けているので、好みで選んで構いません。
背景色の初期値は透明です。テーマの背景がそのまま透けます。ブロックだけ色を付けて目立たせたいときに変更してください。
角丸の半径の初期値 24px は指定できる最大値です。アレルゲンバッジは高さが小さいため、初期状態では角丸というより丸みを帯びた形になります。角張らせたいときは 0 に近づけてください。
カードの間隔とカードの列数は、レイアウトが「カード形式」のときだけ効きます。「表形式」のままで変更しても見た目は変わりません。
**カードの列数は 0 が「自動」**です。画面幅に合わせて折り返します。列数を固定したいときだけ 1〜4 を指定してください。

上級者向け

設定	内容
追加のCSS	このブロックにだけ適用する CSS を書けます

画面にも「セレクタは含めないでください」と注意が出ているとおり、書くのは中身のプロパティだけです。

letter-spacing: 0.02em;
line-height: 1.8;

上のように書きます。.my-class { ... } のようにセレクタから書く必要はありません。ここに書いた内容はこのブロックの中だけに閉じ込められるので、うっかりテーマ全体のレイアウトを壊してしまう心配はありません。同じページに複数のブロックを置いても、設定が混ざることはありません。

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

成分表をしっかり読ませたいとき

サプリメントや健康食品のように、成分そのものが購入の決め手になる商品向けです。

設定	値
レイアウト	表形式
文字サイズ	大
枠線の太さ	1px
枠線のスタイル	実線
余白	ゆったり

罫線をはっきり出して行を追いやすくし、余白を広げて読みやすくします。項目数が 8 つ以上になる商品ほど効きます。

ストアの雰囲気に馴染ませたいとき

こだわりの焼き菓子やクラフトビールのように、世界観を大事にしているストア向けです。

設定	値
レイアウト	カード形式
枠線の太さ	0px
背景色	透明のまま
アクセントカラー（罫線）	テーマの文字色に近い薄い色
余白	コンパクト

枠線を消すと、表組みの主張が消えて商品説明の一部のように見えます。ブランドの写真が主役のページに向いています。

アレルゲンをいちばんに見せたいとき

学校給食向けやアレルギー対応をうたっているストア向けです。

設定	値
アレルゲンバッジの背景色	目を引く色（例: 淡い赤やオレンジ）
アレルゲンバッジの文字色	背景とはっきり差の出る色
角丸の半径	24px
見出しの太さ	700〜800

バッジに色を付けると、成分表よりアレルゲンのほうが先に目に入ります。ブロック自体を商品説明より上に置くと、さらに効果的です。

スマートフォンからの購入が多いとき

設定	値
レイアウト	カード形式
カードの列数（0で自動）	0（自動）
文字サイズ	中
余白	コンパクト

列数を自動にしておくと、画面幅に合わせて折り返します。列数を固定するとスマートフォンで横に潰れることがあるので、スマートフォン中心なら 0 のままがおすすめです。

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

商品ページに何も出ない

上から順に確認してください。

**その商品に栄養成分もアレルゲンも登録していない。**どのバリエーションにもデータが 1 件も無い商品では、ブロックごと何も出力されません。まずアプリの一覧にその商品が出ているか確認してください。出ていなければ未登録です。
テーマエディタで「保存」していない。「テーマに追加」でブロックが追加されても、テーマエディタで保存するまで反映されません。
商品ページ以外を見ている。「テーマに追加」で追加されるのは商品ページだけです。
**ブロックが非表示になっている。**テーマエディタの左側でブロック名の横にある目のアイコンを確認してください。