SAKUシンプル食品表示を導入いただきありがとうございます!
ここでは、アプリを入れてから商品ページに食品表示が表示されるまでの初期設定をご説明します。アプリのホームにある「設定ガイド」の4つのステップを、上から順に進めれば完了です。
1️⃣ アプリのホームで「設定ガイド」を開く
Shopifyの管理画面からアプリを開くと、ホームに「ご利用状況」(商品総数・食品表示 入力済み・未入力)と「設定ガイド」が表示されます。
設定ガイドの右上には「4件中 ◯件 完了」と進み具合が表示され、まだ終わっていないステップが自動で開きます。各ステップの右端の矢印で、手順を開いたり閉じたりできます。

※「初期設定が未完了です(メタフィールド定義がありません)」と表示された場合は、先に「初期設定を実行」を押してください。
※設定ガイドは右上の「×」で閉じられます。閉じたあとは「ガイドを表示する」から、いつでも再表示できます。
2️⃣ ステップ1:商品を選んで入力
表示目的(食品表示・アレルゲン・両方)を選び、まず1商品を保存するステップです。「商品を選んで入力」を押します。商品が多い場合は「CSVでまとめて入力」から、CSVでまとめて登録することもできます。

「食品表示の編集・設定」画面が開くので、まず「商品ページに何を表示しますか?」で表示目的を選び、「表示設定を保存」を押します。
-
食品表示:名称・原材料名・内容量などの一括表示と、栄養成分表示を表示します。
-
アレルゲン:使用しているアレルゲンだけを表示します。
-
両方:食品表示・栄養成分表示とアレルゲンをすべて表示します。
ショップ共通の設定で、あとから変更しても入力済みの商品データは残ります。

次に、下の商品一覧から商品を選んで「入力・確認」を押し、食品表示を入力して右上の「保存」を押します。右側のプレビューで、商品ページでの見え方を確認しながら入力できます。

商品を1件保存すると、ステップ1は自動で完了になります。
入力項目の詳細は「食品表示・栄養成分の入力方法」、アレルゲンは「アレルゲンの設定方法」、CSVは「CSVで一括登録・書き出しする方法」をご覧ください。
3️⃣ ステップ2:商品ページに設置
商品テンプレートに「食品表示」ブロックを追加し、テーマを保存するステップです。「表示ブロックを追加」を押します。

新しいタブでテーマエディタ(商品ページ)が開き、「食品表示」ブロックが自動で追加された状態になります。初期状態では、商品ページの下のほうに「アプリ」セクションとして追加されます。


お客様に見つけてもらいやすいよう、左のメニューでブロックを「商品情報」の中(価格やカートボタンの近く)へドラッグして移動するのがおすすめです。位置が決まったら、右上の「保存」を押してください。

保存してアプリのホームに戻ると、公開テーマのブロックが自動で確認され、ステップ2が完了になります(「公開テーマでブロックの設置を検出しました。」と表示されます)。
- 「公開テーマでブロックを検出できていません。」と表示される場合は、下書きテーマや、別の商品テンプレートに追加していないかご確認ください。
- 設置状況を自動で確認できない環境では、「テーマでブロックを設置・保存したことを確認しました(手動確認)」にチェックを入れると完了にできます(このチェックは保存されないため、アプリを開き直したときは再度チェックしてください)。
- 表示目的を「アレルゲン」にしている場合は、「アレルゲン(商品・特集商品)」ブロックが追加されます。
4️⃣ ステップ3:アレルゲン検索を設置
コレクションページに「アレルゲンで探す(コレクション)」ブロックを追加し、テーマを保存するステップです。お客様が、使っていないアレルゲンを選んで商品を探せるようになります。「検索ブロックを追加」を押します。

テーマエディタ(コレクションページ)が開き、「アレルゲンで探す(コレクション)」ブロックが追加された状態になります。右上の「保存」を押してください。ステップ2と同じく、左のメニューのドラッグで、商品一覧の上などに移動することもできます。

お客様は見出しの行の「選ぶ」を押して絞り込み欄を開き、使っていないアレルゲンにチェックを入れ、「この条件で探す」を押すと、選んだものを“すべて不使用”の商品が表示されます。
- 保存してアプリのホームに戻ると、自動で確認されてステップ3が完了になります。
-
アレルゲン検索を使わない場合は、「アレルゲン検索は設置しない」にチェックを入れれば、このステップは完了になります(検索ブロックがまだ検出されていないときに表示されます)。
- 設置状況を自動で確認できない環境では、「テーマで検索ブロックを設置・保存したことを確認しました(手動確認)」にチェックを入れると完了にできます。
- 検索の対象になるのは、商品ごとに「アレルゲンの確認範囲」を設定した商品です。詳しくは「アレルゲン検索・不使用コレクションの設定方法」をご覧ください。
5️⃣ ステップ4:表示を確認
ステップ3まで終わったら、入力した商品のページで表示を確認し、設定ガイドの「入力した商品の表示を確認しました」にチェックを入れるだけです。チェックするとステップ4は自動で完了になり、設定ガイドが閉じて「セットアップ完了」に切り替わります。

6️⃣ セットアップ完了
4つのステップがすべて済むと、自動で「セットアップ完了」になります。完了後は、ここから「食品表示を編集」「商品ページの表示設定」「アレルゲン検索の設定」にすぐ移動できます(「アレルゲン検索は設置しない」を選んだ場合、「アレルゲン検索の設定」は表示されません)。

※完了の状態は、アプリを開くたびに現在の設定から判定されます。テーマからブロックを外した場合などは未完了に戻るので、設定ガイドを再表示して確認してください。
追加の使い方(任意)
アレルゲン検索をさらに使いやすくしたい場合に設定します。基本セットアップの完了には必要ありません。

-
商品一覧にアレルゲンのアイコンを表示:アプリ埋め込みの「アレルゲン自動表示」を有効にしてテーマを保存すると、コレクション・検索結果・ホームの商品一覧にアイコンが表示されます。
-
商品のアレルゲン確認範囲を設定:商品ごとに「アレルゲンの確認範囲」を選んで保存します。確認した範囲内で、使用していない品目の検索対象になります。
-
不使用コレクションを作成:確認・保存した商品を「卵不使用」などの専用コレクションにまとめます。検索機能だけを使う場合は作成不要です。
詳しくは「商品ページの表示設定・デザインの変更方法」と「アレルゲン検索・不使用コレクションの設定方法」をご覧ください。
料金について
料金は月額$4.99、または年額$49.9(USD)です。7日間の無料体験があります。開発ストアでは全機能を無料でお使いいただけます。
プランの確認・変更は、左メニューの「料金」から行えます。

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