SAKUシンプル食品表示 display-settings

【シンプル食品表示】商品ページの表示設定・デザインの変更方法

  • 食品表示・アレルゲンを商品ページに見やすく表示

  • 「卵・乳不使用」などの条件で商品検索

  • CSVでまとめて登録・更新・書き出し

NEW
NEW
【シンプル食品表示】商品ページの表示設定・デザインの変更方法

アプリの特徴

【Basicプラン】
・食品表示(名称・原材料・内容量・保存方法など)と栄養成分を商品ページに表示
・特定原材料等29品目のアレルゲンに対応
・「卵・乳不使用」など複数条件での商品検索
・CSVでの一括登録・更新・書き出し
・原材料マスターで共通の原材料を複数商品に追加
・$4.99/月 または $49.9/年(7日間の無料体験あり)

※注意
表示内容の最終確認はショップ側で行ってください。法令適合の判定・保証や栄養計算は行いません。

商品ページでの食品表示の見せ方(表示する項目・並び順・アレルゲンの表示形式・色や文字サイズ)を変更する方法です。

この記事でわかること

  • 表示する項目と並び順の変え方
  • アレルゲンの表示形式(3種類)
  • 表示名・アイコン画像・注記の変え方
  • 色・文字サイズなど見た目の調整

操作する場所:Shopify管理画面 → アプリ → SAKUシンプル食品表示 → 「食品表示の編集・設定」 → ページ下の「商品ページの表示設定」


1️⃣ 表示する項目と並び順を決める

「商品ページの表示設定」を開き、【表示する項目と並び順】で「食品表示」「アレルゲン」「栄養成分表示」の順番(ドラッグまたは↑↓)と、「表示する」のオン・オフを設定します。右側のプレビューで仕上がりを確認できます。

商品ページの表示設定

※ページ上部の「商品ページに何を表示しますか?」(食品表示/アレルゲン/両方)を変えると、ここの表示する/しないも切り替わります。


2️⃣ アレルゲンの表示形式を選ぶ

【アレルゲンの表示形式】で3つから選び、「表示設定を保存」を押します。

表示形式 ストアでの見え方
通常の表(文字で表示) 使用しているアレルゲンを文字で表示します。
29品目の一覧表 29品目を表にし、「●:使用 -:不使用 ?:未確認」で表示します。
29品目の画像一覧表 29品目をイラストで表示し、使用している品目を赤い枠で強調します。

アレルゲンの3つの表示形式


3️⃣ 表示名・アイコン画像・注記を変える

  • アレルゲンの表示名設定:例「卵」→「鶏卵」のように表示名を変えられます。
  • アレルゲンアイコンの画像設定:品目ごとに画像を差し替えられます(PNG / JPEG / WebP / GIF・最大3MB)。「デフォルトに戻す」で元に戻せます。差し替えた画像は商品ページ・特集・一覧すべてに反映されます。
  • ストアに表示する注記(ショップ共通):「食品表示の注記(最下部の免責文)」「アレルゲン検索の注記」「商品・特集商品・カードのアレルゲン注記」を、「〜を共通にする」を選んで全商品共通で設定できます。選ばない注記は、テーマブロックの注記が使われます。


4️⃣ 色・文字サイズなどを調整する(テーマエディタ)

「テーマエディタで見た目の詳細を設定する」を押すとテーマエディタの商品ページが開くので、左のメニューで「食品表示」ブロックを選びます。右側の設定で次の項目を変えられます。

  • 枠線・罫線の有無と色
  • 列数(PC・スマホ)
  • 項目名セルの背景色
  • 見出し・本文の文字サイズ
  • 使用アレルゲンの強調色
  • 凡例・注記の文言

テーマエディタでの見た目の設定

設定後は右上の「保存」を押してください。


設定後のストア表示

例:「29品目の画像一覧表」で、食品表示 → アレルゲン → 栄養成分表示 の順に表示した場合

商品ページの表示例

特集商品や商品一覧にアレルゲンを出す方法は「特集商品・商品一覧にアレルゲンを表示する方法」をご覧ください。


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