Shopifyで在庫数を表示する2つの方法を紹介

## はじめに

本記事では、Shopify で在庫数を表示する2つの方法を紹介していきます。

在庫数の表示は、顧客に商品の在庫状況をリアルタイムで伝えるための重要な要素です。これにより、購入を検討している顧客に対して、商品の在庫が限られていることを知らせたり、逆に十分な在庫があることを安心して伝えることができます。

特に、人気商品やセール時には在庫数の表示が購買意欲を刺激し、売上の向上につながることが期待されます。Shopifyでは、在庫数を表示するための方法がいくつかありますが、今回はその中でも効果的かつ簡単に実装できる2つの方法をご紹介します。

以下の記事を参考にしています。
- [Shopifyで在庫数表示を実装する方法を考察](https://zenn.dev/natsume_katu/articles/afe0cf2725db53)
- [Shopifyでの在庫数表示について調べてみた](https://unblog.unreact.jp/blog/dat-9unw59y)
- [Shopifyで在庫数を表示する方法を徹底解説！](https://unreact.jp/blog/shopify-low-stock-counter-app)
- [Shopifyで残りわずか表示を挿入して在庫数表示が実現できるアプリについて徹底解説｜ご利用ガイド](https://unreact.jp/shopify-apps/sa-026-ur-only-a-few-left/guide)

## Shopify で在庫数を表示するには

Shopify で在庫数を表示するための方法の一つとしてアプリを使用する事が挙げられます。アプリを使用することで、Shopifyストアに在庫数表示を簡単に追加できます。特に、特定の条件で在庫数を表示する機能を持つアプリは非常に便利です。

多くのアプリはインストール後すぐに利用でき、設定も非常にシンプルです。アプリの管理画面から必要な設定を行うだけで、在庫数表示のカスタマイズが可能となり、デザインや表示形式もストアに合わせて調整できます。

もう一つの方法は、Shopifyテーマの標準機能を用いて在庫数を表示する方法です。Shopifyの多くのテーマには、在庫数表示の機能がデフォルトで組み込まれており、これを有効化するだけで簡単に在庫数を表示することができます。

テーマの標準機能を利用するメリットは、追加コストがかからないことと、ストアのデザインに統一感を持たせやすいことです。しかし、テーマの標準機能ではカスタマイズ性が乏しい場合があります。そのため、より柔軟な在庫数表示を求める場合は、アプリを併用することが考えられます。

## アプリを利用して在庫数表示

Shopify で在庫数の表示を行う上で最もおすすめの方法は、専用の Shopify アプリを利用することです。これにより、簡単に、カスタマイズ性の高い在庫数表示を行うことができます。

今回は、Shopify で在庫数の表示の際によく利用されるアプリの一つである**シンプル在庫数表示｜お手軽残りわずか表示** を紹介します。「シンプル在庫数表示｜お手軽残りわずか表示」は、Shopify ストアにノーコードで商品の残りわずか表示を実現できるアプリです。

[シンプル在庫数表示｜お手軽残りわずか表示](https://apps.shopify.com/sa-026-ur-only-a-few-left?locale=ja)

### シンプル在庫数表示｜お手軽残りわずか表示

[![シンプル在庫数表示｜お手軽残りわずか表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/4e8b36ee-51a3-87a6-27fb-06b7dc018806.png)](https://apps.shopify.com/sa-026-ur-only-a-few-left?locale=ja)

「シンプル在庫数表示｜お手軽残りわずか表示」は、Shopify ストアにノーコードで商品の残りわずか表示を実現できるアプリです。「シンプル在庫数表示｜お手軽残りわずか表示」を利用することで、顧客の購買意欲の向上が期待できます。

### アプリの特徴

以下アプリの特徴です。

#### ノーコードで残りわずか表示を挿入できる！

ノーコードで残りわずか表示を挿入できます。

![ノーコードで残りわずか表示を挿入できる！](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/caba2d62-7da4-ad19-c497-1922c0753a40.png)

#### 残りわずか表示条件をカスタマイズできる！

残りわずか表示条件をカスタマイズできます。

![残りわずか表示条件をカスタマイズできる！](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/1ed180b7-b5a7-4c2c-df03-fdaa87bc9f87.png)

#### 残りわずか表示のテキストを自由にカスタマイズできる！

残りわずか表示のテキストを自由にカスタマイズできます。

![残りわずか表示のテキストを自由にカスタマイズできる！](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/4f07453c-8e72-1368-a124-56c71b424dc2.png)

#### 残りわずか表示の色・大きさ・位置を変更できる！

残りわずか表示の色・大きさ・位置を変更できます。

![残りわずか表示の色・大きさ・位置を変更できる！](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/e60c123a-0fa8-58fc-b2d8-dd3afc15dd6e.png)

#### 1クリックでテーマに追加できる！

1クリックでテーマに追加できます。

![1クリックでテーマに追加できる！](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/cbbbd3e0-10ca-dd08-ba26-82acdaa498f2.png)

### アプリのインストール

アプリをインストールしていきます。以下のリンクにアクセスしてください。

[「シンプル在庫数表示｜お手軽残りわずか表示」｜アプリストア](https://apps.shopify.com/sa-026-ur-only-a-few-left?locale=ja)

「インストール」をクリックしてください。

![「インストール」をクリック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/593b8b2f-5513-d677-845b-8e932b0c7f84.png)

以下のページに遷移します。右下の「インストール」ボタンをクリックしてください。

![「インストール」ボタンをクリック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/564de610-d22b-4f91-cfcc-1ba270af116c.png)

以下の管理画面が表示されます。

![管理画面が表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/0506f688-f783-4ace-d641-b0006ab76548.png)

### アプリをテーマに追加する

管理画面の「設定」ページに移動します。「テーマをプレビュー」をクリックして、商品ページに移動してください。

![「テーマをプレビュー」をクリック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/6f7c0b17-bf81-a98c-c3bc-196bf5faf138.png)

「ブロックを追加」 > 「アプリ」 > 「シンプル在庫数表示｜お手軽残りわずか表示」を選択してください。

![「ブロックを追加」 > 「アプリ」 > 「シンプル在庫数表示｜お手軽残りわずか表示」を選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/016f86b7-57b5-da34-6975-76a0ce0735ef.png)

アプリブロックが追加できていることが確認できたら、右上の「保存する」をクリックしてください。

![右上の「保存する」をクリック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/66fb38dd-1d5b-20da-de7f-1c6d5310e43e.png)

以下のようにアプリブロックが表示されます。

![アプリブロックが表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/9a6eec91-9a15-56d8-628c-9e6aafd2d41d.png)

見た目のカスタマイズもできますが、今回は割愛させていただきます。

詳しいアプリの使い方を知りたい方は、以下の記事を確認してみてください。

[Shopifyで残りわずか表示を挿入して在庫数表示が実現できるアプリについて徹底解説｜ご利用ガイド](https://unreact.jp/shopify-apps/sa-026-ur-only-a-few-left/guide)

## テーマの標準機能を利用して在庫数表示

次に、テーマの標準機能を利用して在庫数表示を行う方法を解説していきます。

管理画面のサイドバーより、「オンラインストア > テーマ」をクリックしてください。

![管理画面のサイドバーより、「オンラインストア > テーマ」をクリック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/b45854fc-f571-f1af-0e15-d34080211699.png)

「カスタマイズ」ボタンをクリックしてください。

![「カスタマイズ」ボタンをクリック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/a802daa0-7c9b-4e66-3d27-2ec657acde3d.png)

以下のようなテーマカスタマイズ画面に遷移します。

![テーマカスタマイズ画面に遷移](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/a6e81020-4a81-09e8-343c-1fcff329568f.png)

「ブロックを追加」 > 「在庫ステータス」をクリックしてください。

![「ブロックを追加」 > 「在庫ステータス」をクリック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/a4abd5ec-16a0-53ef-8b40-ae713011459e.png)

以下のように、「在庫ステータス」ブロックが追加されたら、「保存する」ボタンをクリックしてください。

![「保存する」ボタンをクリック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/a02bd326-816e-f0f9-1e0f-9f0e17150433.png)

### 在庫ステータスブロックの編集

在庫ステータスブロックの編集を行います。「在庫ステータス」をクリックしてください。

すると、編集するためのサイドバーが表示されます。

![編集するためのサイドバーが表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/b971a066-875a-f38c-ccf6-19fee425599c.png)

「テキストスタイル」を編集できます。

![「テキストスタイル」を編集](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/f0af9b43-abb2-24e8-c338-5c4ddfc7ef95.png)


低在庫基準値を設定できます。設定した個数を下回ると、在庫数ステータスがオレンジ色になります。


![低在庫基準値を設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/d3a1da4e-9aab-4510-e63b-78400860e9d7.png)

![在庫数ステータスがオレンジ色](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/eb7ead68-3493-fe24-ba07-bb34f1cc80c9.png)

在庫数を表示するかどうかを選択できます。

![在庫数を表示するかどうかを選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545006/210c7bbc-a777-0cfa-e0f9-fc3e4dffc872.png)

## 終わりに

本記事では、Shopify で在庫数を表示する2つの方法を紹介していきました。

アプリを用いた方法は、手軽に導入でき、カスタマイズ性も高いため、初心者から上級者まで幅広く利用されています。一方で、テーマの標準機能を利用する方法は、コストを抑えながらシンプルに在庫数を表示したい場合に適しています。

ぜひ、あなたの Shopify ストアに在庫数の表示機能を導入してみてください。

## 参考記事

以下の記事を参考にしています。
- [Shopifyで在庫数表示を実装する方法を考察](https://zenn.dev/natsume_katu/articles/afe0cf2725db53)
- [Shopifyでの在庫数表示について調べてみた](https://unblog.unreact.jp/blog/dat-9unw59y)
- [Shopifyで在庫数を表示する方法を徹底解説！](https://unreact.jp/blog/shopify-low-stock-counter-app)
- [Shopifyで残りわずか表示を挿入して在庫数表示が実現できるアプリについて徹底解説｜ご利用ガイド](https://unreact.jp/shopify-apps/sa-026-ur-only-a-few-left/guide)