# 在庫インジケーター要素

### 概要

**在庫インジケーター**要素は、Shopify商品のリアルタイムの在庫状況をPageFlyページ上に直接表示します。商品が**在庫あり**、**在庫僅少**、または**在庫切れ**であるかを自動的に表示し、緊急性を生み出し、顧客が商品をカートに追加する前に情報を提供するのに役立ちます。

この要素を正常に機能させるには、**商品詳細**コンテナ内または**商品ページ**上に配置する必要があります。

***

### アクセス方法

1. PageFlyエディタで、**要素パネル**（左サイドバー）を開きます。
2. **Shopify要素 > 商品**に移動します。
3. **在庫インジケーター**要素をページキャンバス内の商品詳細コンテナにドラッグします。

> \*\*注：\*\*在庫インジケーター要素は、この機能があなたのストアで有効になっている場合に利用できます。要素パネルに表示されない場合は、PageFlyサポートにお問い合わせください。

<figure><img src="https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2FG1T6wEWvziVwKTbknnvo%2FCleanShot%202026-03-13%20at%2015.13.33.gif?alt=media&#x26;token=a5745e7e-de59-4d91-88f2-8f1f7d74c33c" alt=""><figcaption></figcaption></figure>

***

### 設定（一般タブ）

キャンバスで在庫インジケーター要素を選択すると、**インスペクターパネル**（右サイドバー）の**コンテンツ**グループに以下の設定が表示されます。

#### 表示オプション

ライブストアフロントで在庫インジケーターを表示するタイミングを制御します。

| オプション              | 説明                                         |
| ------------------ | ------------------------------------------ |
| **常に表示**           | 在庫インジケーターは数量に関係なく常に表示されます。                 |
| **しきい値を下回った場合に表示** | 在庫が「表示のしきい値」の値を下回った場合にのみ、在庫インジケーターが表示されます。 |

#### 表示のしきい値

*「表示オプション」が「しきい値を下回った場合に表示」に設定されている場合にのみ表示されます。*

在庫インジケーターが表示されるようになる在庫数量を設定します。例えば、`10`に設定した場合、在庫が10以下の時にのみインジケーターが表示されます。

* **範囲：** 1 – 100
* **デフォルト：** 5

#### 在庫僅少のしきい値

商品が「在庫あり」ではなく「在庫僅少」と見なされる数量（その数量以下）を決定します。

* **範囲：** 0 – 100
* **デフォルト：** 5

**例：** `5`に設定した場合、5個以下の商品には「在庫僅少」メッセージが表示されます。6個以上の商品には「在庫あり」メッセージが表示されます。

***

### カスタムテキストメッセージ

各在庫ステータスに対して表示されるテキストをカスタマイズできます。すべてのテキストフィールドは、商品データに自動的に置き換えられる**動的変数**をサポートしています。

#### 利用可能な変数

| 変数                   | 説明            | 例                 |
| -------------------- | ------------- | ----------------- |
| `{quantity}`         | 現在の在庫数量       | `12`              |
| `{title}`            | 商品タイトル        | `Classic T-Shirt` |
| `{vendor}`           | 商品の販売元        | `Nike`            |
| `{price}`            | 現在の価格         | `29.99`           |
| `{compare_price}`    | 割引前価格         | `39.99`           |
| `{saved_amount}`     | 価格差（割引前 - 現在） | `10.00`           |
| `{saved_percentage}` | 割引率           | `25`              |

#### 在庫ありテキスト

商品が在庫あり（「在庫僅少のしきい値」を上回る）の場合に表示されるメッセージ。

* **デフォルト：** `{quantity} 在庫あり`
* **例：** `{quantity} 点利用可能 - 今すぐご注文を！`

#### 在庫僅少テキスト

商品の数量が「在庫僅少のしきい値」以下の場合に表示されるメッセージ。

* **デフォルト：** `残りわずか {quantity} 点！`
* **例：** `お急ぎください！残り {quantity} 点 - {saved_percentage}%オフ！`

#### 在庫切れテキスト

商品の在庫がゼロの場合に表示されるメッセージ。

* **デフォルト：** `在庫切れ`
* **例：** `売り切れ - しばらくしてから再度ご確認ください！`

***

### カスタムカラー

各在庫ステータスに異なる色を設定して、顧客に視覚的に緊急性を伝えることができます。

#### 在庫ありの色

* **デフォルト：** `#22c55e` (緑)
* 在庫があることを示すポジティブな色。

#### 在庫僅少の色

* **デフォルト：** `#f97316` (オレンジ)
* 在庫が限られていることを知らせ、購入を促す警告色。

#### 在庫切れの色

* **デフォルト：** `#ef4444` (赤)
* 商品が利用できないことを明確に示すシグナル。

> **ヒント：** 視認性を最大限に高めるために、ページの背景とよく対比する色を選択してください。

***

### 在庫ステータスのロジック

在庫インジケーターは、以下のルールを使用してステータスを決定します。

| 条件                       | ステータス    |
| ------------------------ | -------- |
| 商品が在庫を追跡しない              | **在庫あり** |
| 在庫ポリシーが「在庫切れの場合でも販売を続ける」 | **在庫あり** |
| 数量 > 在庫僅少のしきい値           | **在庫あり** |
| 0 < 数量 ≤ 在庫僅少のしきい値       | **在庫僅少** |
| 数量 ≤ 0                   | **在庫切れ** |

***

### バリエーションのサポート

顧客が異なる商品バリエーションを選択すると、在庫インジケーターは自動的に更新されます。各バリエーションには独自の在庫数量があるため、表示されるステータスとメッセージはそれに応じて変更されます。

***

### スタイリング

インスペクターパネルの**スタイリングタブ**を使用して、在庫インジケーター要素のスタイルを設定できます。利用可能なスタイリングオプションは次のとおりです。

* **タイポグラフィ** — フォントファミリー、サイズ、太さ、行の高さ、文字間隔
* **間隔** — マージンとパディング
* **背景** — 背景色または画像
* **枠線** — 枠線のスタイル、幅、角丸
* **エフェクト** — 不透明度、ボックスシャドウ

***

### 一般的な使用例

#### 1. 商品ページで緊急性を生み出す

在庫インジケーターを商品価格または「カートに追加」ボタンの下に配置します。「在庫僅少のしきい値」を`10`に設定し、「在庫僅少テキスト」をオレンジ色で`残り{quantity}点 — 今すぐご注文を！`にカスタマイズして、迅速な購入を促します。

#### 2. 在庫が少ない場合にのみ表示する

「表示オプション」を**しきい値を下回った場合に表示**に設定し、「表示のしきい値」を`15`にします。これにより、在庫が豊富なときはページをすっきりと保ち、在庫が減少したときに緊急性を生み出します。

#### 3. 商品バッジと組み合わせる

在庫インジケーターを商品バッジ要素と組み合わせて、割引情報と在庫状況の両方を表示し、顧客に最大限の購入意欲を与えます。

***

### よくある質問

#### 在庫数が0でも在庫インジケーターが「在庫あり」と表示されるのはなぜですか？

これは、Shopify管理画面で商品の在庫ポリシーが\*\*「在庫切れの場合でも販売を続ける」\*\*に設定されている場合に発生します。この場合、商品は常に購入可能と見なされるため、インジケーターは「在庫あり」と表示します。

#### 在庫インジケーターを商品詳細コンテナの外で使用できますか？

在庫インジケーターが機能するには、商品のコンテキストが必要です。商品詳細コンテナ内に配置するか、商品ページタイプで使用する必要があります。外に配置した場合、商品を選択するように求めるプレースホルダーメッセージが表示されます。

#### 在庫インジケーターは商品バリエーションに対応していますか？

はい。顧客が異なるバリエーションを選択すると、インジケーターは自動的に更新され、その特定のバリエーションの在庫数量を反映します。

#### 在庫データはどのくらいの頻度で更新されますか？

在庫データはウェブフックを介してShopifyからリアルタイムで同期されます。Shopifyで在庫が変更されると（注文、再入荷、または手動更新による）、在庫インジケーターは次回のページ読み込み時にその変更を反映します。

#### 特定の商品に対して在庫インジケーターを非表示にできますか？

**表示オプション**設定を使用して表示を制御します。「しきい値を下回った場合に表示」に設定し、「表示のしきい値」を低くすることで、在庫が非常に限られている商品に対してのみインジケーターが表示されるようにします。

***

### 追加リソース

* [Product Media Element](https://help.pagefly.io/page-structure-and-elements/shopify-elements/product/shopify-elements-product-media)
* [PageFly Elements FAQ](https://help.pagefly.io/faq-and-troubleshooting/faqs/elements-faqs)