【シンプル食品表示】特集商品・商品一覧にアレルゲンを表示する方法

トップページの特集商品や、コレクション・検索結果の商品一覧にも、その商品のアレルゲンを表示する方法です。

この記事でわかること

• 特集商品にアレルゲンを表示する方法（ブロック）
• 商品一覧のカードにアレルゲンを表示する方法（アプリ埋め込み）
• 表示形式・見た目の変え方
• 表示されないときの確認ポイント

※「食品表示」ブロック（一括表示の表）は商品ページ専用です。特集商品や一覧には、ここで紹介する2つの方法でアレルゲンを表示します。

操作する場所：Shopify管理画面 → オンラインストア → テーマ → カスタマイズ（テーマエディタ）

1️⃣ 特集商品に「アレルゲン（商品・特集商品）」ブロックを追加する

1. テーマエディタでトップページを開きます。
2. 左のメニューで「特集商品」セクションを開き、「ブロックを追加」→「アプリ」→「アレルゲン（商品・特集商品）」を選びます。
3. 追加したブロックを選び、右側の「対象商品」の右にあるアイコン（動的ソース）を押して、「商品」を選びます。
4. 右上の「保存」を押します。

「対象商品」の接続を忘れると表示されません。テーマエディタ上では「対象商品が未設定のため表示していません」という案内が出ます。

設定後のストア表示（特集商品）

特集商品の中に「含まれるアレルゲン」が表示されます。

• 見出し・表示形式（アプリ設定に従う／画像／文字）・アイコンの大きさ・色などは、ブロックの設定で変えられます。
• このブロックは商品ページに置くこともできます。

2️⃣ 商品一覧のカードにアレルゲンを表示する（アプリ埋め込み）

1. アプリのホームの「追加の使い方（任意）」→「商品一覧にアレルゲンのアイコンを表示」→「商品一覧のアイコン表示を設定」を押します（テーマエディタの「アプリ埋め込み」が開きます）。
2. 「アレルゲン自動表示（コレクション/検索/ホーム）」をオンにします。
3. 右上の「保存」を押します。

表示するページ（コレクションページ／ホーム等の特集コレクション／検索結果／商品ページの関連商品）や、カード内の挿入位置（商品画像の下／カードの一番下）、アイコンの大きさなどを選べます。

設定後のストア表示（商品一覧）

商品カードに、その商品の使用アレルゲンが表示されます。

3️⃣ 画像か文字かを選ぶ

アプリの「食品表示の編集・設定」→「特集・一覧でのアレルゲン表示設定」で、「画像（アイコン）で表示」か「文字で表示」を選べます。ブロックとアプリ埋め込みの両方に反映されます（ブロック側で個別に変えることもできます）。

表示されないとき

• 特集商品のブロックで「対象商品」に「商品」を接続しているか確認してください。
• その商品で、使用しているアレルゲンにチェックが入っているか確認してください（使用している品目だけが表示されます）。
• テーマによっては商品カードを自動で見つけられないことがあります。アプリ埋め込みの「カードのCSSセレクタ（上級者向け・任意）」に、商品カードのセレクタ（例：.card-wrapper）を入力してください。
• テーマを保存したか、公開中のテーマで設定したかを確認してください。

※本アプリは食品表示の整理・表示・入力補助を行う運用支援ツールです。食品表示法等への準拠を保証・判定するものではありません。表示内容の最終確認はショップ側で行ってください。