1はじめに
このアプリでできること
実店舗をお持ちのストア向けに、商品ページへ店舗ごとの在庫状況を表示します。購入者は来店前に「どの店舗に在庫があるか」を確認できます。
主な機能
| 機能 | 説明 |
|---|---|
| 店舗別の在庫表示 | 商品ページに店舗ごとの在庫を表示します |
| 都道府県別表示 | 都道府県を選んでから店舗を表示する2階層表示に切り替えられます |
| 表示モードの選択 | 在庫数をそのまま表示するか、◯△✕の記号で表示するかを選べます |
| 店舗の非表示 | 倉庫など、購入者に見せたくないロケーションを個別に隠せます |
| 店舗情報へのリンク | 店舗名の横にリンクアイコンを表示し、店舗情報ページへ誘導できます |
| デザインの調整 | ボタンの文言・画像・配色をテーマに合わせて変更できます |
表示イメージ（都道府県別表示）
「一覧表示」を選ぶと、すべての店舗を1つのリストで表示します。
動作環境
- 商品ページに「アプリブロック」を追加できるテーマ（Horizon / Dawn / Prestige / Impulse などで動作を確認しています）
- 店舗（ロケーション）が Shopify に登録されていること
2インストール
2-1. アプリをインストールする
Shopify App Store からアプリをインストールしてください。インストール時に、以下の権限へのアクセスを求められます。
| 権限 | 用途 |
|---|---|
| 在庫の表示 | 店舗ごとの在庫数を取得します |
| ロケーションの表示・管理 | 店舗名・住所の取得と、後述のメタフィールド項目の作成に使います |
| 商品の表示 | 商品と在庫の紐付けに使います |
店舗在庫の表示設定に使う項目（メタフィールド定義）を作成するためにのみ使用します。店舗そのもの（名称・住所・営業状態）を変更・削除することはありません。
2-2. 必ず確認：メタフィールドが作成されたか
インストールが完了すると、ロケーションに2つの入力項目が自動で作成されます。この項目は、店舗の非表示設定やリンク設定に使う重要なものです。
確認方法
Shopify 管理画面で 設定 → ロケーション → 任意の店舗をクリック を開きます。
ページ内の「メタフィールド」の欄に、次の2つが表示されていれば正常です。
| 項目名 | 種類 | 用途 |
|---|---|---|
| 店舗在庫非表示 | 真偽値（true / false） | この店舗を商品ページに表示しない |
| 店舗情報リンク | URL | 店舗情報ページへのリンク |
表示されていない場合は、FAQ の該当項目をご確認ください。
3初期設定
設定は次の3ステップです。
| 手順 | 内容 |
|---|---|
| ① テーマ設定 | 商品ページにブロックを追加する（必須） |
| ② アプリ設定 | 在庫の表示方法を決める |
| ③ ロケーション設定 | 非表示にする店舗・リンクを設定する（任意） |
3-1. テーマ設定（必須）
この作業をしないと、商品ページに在庫は表示されません。
- アプリの管理画面を開きます（Shopify 管理画面 → アプリ → 日田技研 店舗在庫表示）
- 「利用の仕方」の中にある「テーマエディタでブロックを追加する」ボタンを押します
- テーマエディタが開き、商品ページに「店舗在庫表示」ブロックが追加されます
- ブロックをドラッグして表示したい位置に移動します
- 「保存」を押します
ブロックの見た目を調整する
テーマエディタでブロックを選択すると、右側に設定項目が表示されます。
| 設定 | 説明 | 初期値 |
|---|---|---|
| ボタンのテキスト | ボタンに表示する文言 | 店舗在庫を確認する |
| ボタン画像 | 設定するとテキストの代わりに画像を表示します | なし |
| アイコンを表示する | ボタン左側のアイコンの表示切替（画像設定時は非表示） | オン |
| ボタンの背景色 / 文字色 | — | #f6f6f7 / #202223 |
| 一覧の背景色 / 文字色 | 店舗リスト部分 | #ffffff / #202223 |
| 枠線の色 | — | #e1e3e5 |
| 角の丸み | 0〜24px で調整 | 8px |
3-2. アプリ設定
在庫の表示方法を設定します。アプリの管理画面で行います。
表示形式
| 選択肢 | 説明 |
|---|---|
| 一覧表示 | すべての店舗を1つのリストで表示します |
| 都道府県別表示 | 都道府県の一覧を表示し、選んだ都道府県の店舗を表示します |
店舗数が多い場合は「都道府県別表示」がおすすめです。
表示モード
| 選択肢 | 表示例 |
|---|---|
| 実数表示 | 「5点」「残り2点」「在庫なし」 |
| 記号表示 | 「◯」「△」「✕」 |
実際の在庫数を公開したくない場合は「記号表示」をお使いください。
記号の在庫範囲（記号表示を選んだ場合）
| 記号 | 意味 | 初期値 |
|---|---|---|
| ◯ | 十分な在庫あり | 4点以上 |
| △ | 残りわずか | 1〜3点 |
| ✕ | 在庫なし・極少 | 0点 |
設定後、「保存する」を押してください。
3-3. ロケーション設定（任意）
店舗ごとの個別設定です。Shopify 管理画面の「設定 → ロケーション」で行います。
表示したくない店舗を隠す
倉庫やバックヤードなど、購入者に見せたくない店舗を非表示にできます。
- 「設定 → ロケーション」から対象の店舗を開きます
- 「店舗在庫非表示」の項目を「true」に設定します
- 保存します
店舗情報ページへのリンクを設定する
店舗名の横にリンクアイコン（🔗）を表示し、店舗の詳細ページへ誘導できます。
- 「設定 → ロケーション」から対象の店舗を開きます
- 「店舗情報リンク」の項目に、リンク先の URL を入力します（例：
https://example.com/shops/ikebukuro） - 保存します
URL を設定していない店舗には、アイコンは表示されません。
4よくある質問（FAQ）
ロケーションの「店舗在庫非表示」「店舗情報リンク」が見当たりません
メタフィールドはピン留めされていないと一覧に表示されないことがあります。「設定 → ロケーション」から店舗を開き、「メタフィールド」の欄にある「すべて表示（View all）」を押してください。
それでも見つからない場合は、お手数ですが以下の内容で手動登録をお願いします。
Shopify 管理画面 → 設定 → カスタムデータ → ロケーション → 「定義を追加」
| 名前 | ネームスペースとキー | タイプ |
|---|---|---|
| 店舗在庫非表示 | inventory.hide | 真偽値 |
| 店舗情報リンク | inventory.shop-info-link | URL |
アプリを一度アンインストールして再インストールすると、自動作成されることがあります。
商品ページに何も表示されません
次の順に確認してください。
- テーマにブロックを追加しましたか？（最も多い原因です）→ 「3-1. テーマ設定」の手順を行ってください
- その商品に在庫のある店舗はありますか？ すべての店舗で在庫が0でも表示されますが、在庫を持つ店舗が1つもない場合は表示されません
- すべての店舗を「店舗在庫非表示」にしていませんか？
特定の店舗だけ表示されません
その店舗の「店舗在庫非表示」が「true」になっていないかご確認ください。また、その商品の在庫がその店舗に登録されているかもご確認ください。
店舗の並び順を変えられますか
店舗は郵便番号順で表示されます（都道府県別表示の場合は、都道府県が北海道→沖縄の順、各都道府県内の店舗が郵便番号順）。
並び順を変更するには、ロケーションの住所（郵便番号）をご調整ください。郵便番号が未登録の店舗は、リストの最後に表示されます。
都道府県の分類はどう決まりますか
ロケーションに登録された住所の都道府県をもとに自動で分類されます。
住所が未登録の店舗や、日本国外の店舗は「その他」としてリストの最後にまとめられます。正しく分類されない場合は、ロケーションの住所をご確認ください。
バリエーション（サイズ・色など）を切り替えると在庫も変わりますか
はい。バリエーションを切り替えると、ページを再読み込みせずにその在庫が表示されます。
表示できる店舗数に上限はありますか
最大200店舗まで対応しています。
スマートフォンでも表示されますか
はい。画面幅に合わせて表示されます。
設定を変更したのに商品ページに反映されません
商品ページを再読み込みしてください。それでも変わらない場合は、ブラウザのキャッシュをクリアしてお試しください。
アプリをアンインストールするとどうなりますか
商品ページの在庫表示は表示されなくなります。ロケーションに設定したメタフィールドの値（非表示設定・リンク）は Shopify 側に残ります。