shopify中級車から上級者の方向けのバリデーションの在庫数表示に関する方法となります。Liquidを直接触れる方には有効な方法も解説しているので是非参考にしてください。
また今回はDebutのテーマについて解説していますが、yepではさまざまなテーマからカスタマイズを行っています。有料テーマを使用すると意図しない動きもありますので、おすすめはshopifyが提供しているテーマを使うことをお勧めいたします。
目次
1. バリエーション一覧表に在庫数を表示する方法
Shopifyで商品ページのバリエーション一覧表に在庫数を表示するには、大きく分けて以下の2つの方法があります。
|
方法 |
説明 |
|
Shopifyのテーマ機能を利用する |
コードを追加することで、現在使用しているテーマに在庫数を表示する機能を直接実装できます。 |
|
アプリを利用する |
Shopify アプリストアで提供されている在庫管理アプリを導入することで、在庫数の表示や管理をより簡単に行うことができます。 |
それぞれの手順は以下の通りです。
(1)Shopifyのテーマ機能を利用する a. テーマ編集画面を開く b. 商品ページのテンプレートを選択 c. 在庫数を表示するコードを追加
(2)アプリを利用する a. Shopify アプリストアで在庫管理アプリを探す b. アプリをインストールし、設定を行う
次の章では、テーマ機能を利用した在庫数表示設定について、詳しく解説して行きます。
(1)Shopifyのテーマ機能を利用する
- a. テーマ編集画面を開く
Shopifyの管理画面にログイン後、左側のメニューから**「オンラインストア」をクリックします。 そして、現在使用しているテーマの右側にある「カスタマイズ」**ボタンをクリックすることで、テーマ編集画面を開くことができます。
|
手順 |
詳細 |
|
1. |
Shopifyの管理画面にログインします。 |
|
2. |
左側のメニューから「オンラインストア」を選択します。 |
|
3. |
編集したいテーマを見つけ、「カスタマイズ」ボタンをクリックします。 |
テーマ編集画面では、コードの編集やプレビューの確認など、テーマのカスタマイズに必要な操作を行うことができます。
- b. 商品ページのテンプレートを選択
Shopifyの管理画面にログイン後、左側のメニューから「オンラインストア」>「テーマ」と進みます。 編集したいテーマを見つけたら、「アクション」>「コードを編集する」を選択します。
テーマによって多少表示は異なりますが、基本的には下記のような構成になっています。
|
フォルダ/ファイル名 |
説明 |
|
layout |
ヘッダーやフッターなど、サイト全体のレイアウトに関わるファイル |
|
templates |
商品ページやコレクションページなど、各ページのテンプレート |
|
sections |
ヘッダー、フッター、商品情報など、ページ内の各セクション |
|
snippets |
コードの断片を格納する |
|
assets |
画像、CSS、JavaScriptなどのアセット |
|
config |
テーマ設定 |
今回は商品ページのテンプレートを編集するため、「templates」>「product.json」を選択します。 見当たらない場合は、「product.liquid」を探してみてください。 このファイルが、商品ページの表示を制御するテンプレートです。
- c. 在庫数を表示するコードを追加
Shopifyのテーマによっては、在庫数を表示するための専用のコードが用意されている場合があります。テーマ編集画面で、商品ページのテンプレートファイルを開き、以下のいずれかのコードを探してみましょう。
|
コード |
説明 |
|
|
バリエーションの在庫数を表示します。 |
|
|
商品の最初のバリエーションの在庫数を表示します。 |
これらのコードが見つかった場合は、コードをコピーして、在庫数を表示したい場所に貼り付けます。
コードが見つからない場合や、カスタマイズしたい場合は、LiquidというShopify独自のテンプレート言語を使って在庫数を表示するコードを記述する必要があります。具体的なコードの記述方法については、次の章で詳しく解説します。
(2)アプリを利用する
Shopifyのテーマを直接編集する代わりに、アプリを使用する方法もあります。 Shopifyアプリストアには、在庫管理やバリエーション表示を強化するアプリが多数存在します。
|
アプリのメリット |
説明 |
|
コード編集不要で簡単に設定できる |
専門知識がなくても、視覚的なインターフェースで設定が可能です。 |
|
高度な機能を備えているものもある |
在庫同期、自動アップデート、一括編集など、テーマ編集だけでは実現できない機能を提供するアプリもあります。 |
a. Shopify アプリストアで在庫管理アプリを探す
Shopify管理画面から、アプリストアにアクセスし、「在庫管理」や「バリエーション」などのキーワードで検索してみましょう。 アプリのレビューや機能をよく比較検討することが大切です。
b. アプリをインストールし、設定を行う
アプリのインストール後、アプリごとの指示に従って設定を行います。 多くの場合、表示したいバリエーションや在庫数の表示形式などをカスタマイズできます。 設定が完了したら、ストアの表示を確認して、正しく表示されているかを確認しましょう。
- a. Shopify アプリストアで在庫管理アプリを探す
Shopifyアプリストアには、在庫管理を効率化する様々なアプリが提供されています。中には、バリエーション一覧表に在庫数を表示する機能を持つアプリも多数存在します。
アプリストアで「在庫管理」や「Inventory Management」といったキーワードで検索してみましょう。
|
アプリ名 |
機能例 |
|
Stock Sync Inventory |
複数店舗の在庫を一元管理 |
|
Inventory Planner |
需要予測に基づいた在庫最適化 |
|
Low Stock Alert |
在庫不足時にアラート通知 |
これらのアプリの中から、ご自身のストアに最適なものを探してみてください。アプリのレビューや評価も参考にすると良いでしょう。
- b. アプリをインストールし、設定を行う
Shopify アプリストアには、在庫管理やバリエーション表示を強化するアプリが数多く存在します。
アプリのインストールと設定は、一般的に以下の手順で行います。
-
Shopifyアプリストアへアクセス: Shopify管理画面から「アプリ」>「Shopifyアプリストア」にアクセスします。
-
アプリの検索: 検索バーに「在庫管理」や「バリエーション一覧」などのキーワードを入力し、希望のアプリを検索します。
-
アプリを選択: アプリのレビューや機能を比較し、最適なアプリを選択します。無料体験や無料プランを提供しているアプリも多いので、まずは試用してみることをおすすめします。
-
アプリのインストール: アプリページの「アプリを追加する」ボタンをクリックし、インストールを開始します。
-
設定: アプリのインストール後、アプリの指示に従って必要な設定を行います。 例えば、以下のような設定項目があります。
設定項目
説明
在庫同期の設定
Shopifyの在庫データとアプリの在庫データを同期する頻度を設定します。
バリエーション表示設定
商品ページに表示するバリエーション一覧表のデザインや表示項目を設定します。
通知設定
在庫数が少なくなった場合などに、メールやダッシュボードで通知を受け取る設定をします。
アプリによっては、日本語でのサポートを提供している場合もあります。不明点があれば、アプリ開発者に問い合わせてみましょう。
2. テーマにおける在庫数表示設定
Shopifyのテーマによって、在庫数を表示するための設定方法は異なります。ここでは、代表的なテーマである「Debut」を例に、在庫数表示設定について解説します。
Debutテーマにおける在庫数表示設定
Debutテーマでは、標準機能として商品ページに在庫数を表示する機能が備わっています。そのため、コード編集などの複雑な作業は必要ありません。
|
設定項目 |
説明 |
|
在庫数を表示する |
チェックを入れると、商品ページに在庫数が表示されます。 |
上記設定を有効にすることで、Debutテーマでは簡単に在庫数を顧客に伝えることができます。
Debut
Debutは、Shopifyが提供する無料テーマです。 Debutテーマでは、初期設定でバリエーションを選択すると在庫数が表示されるようになっています。
|
バリエーション |
在庫数 |
|
カラー：レッド サイズ：M |
20 |
|
カラー：レッド サイズ：L |
15 |
|
カラー：ブルー サイズ：M |
5 |
|
カラー：ブルー サイズ：L |
品切れ |
ただし、テーマのバージョンやカスタマイズ状況によっては表示されない場合があります。 その場合は、テーマの編集や追加のコードが必要になる可能性があります。
3. コード例：Liquidを使った在庫数表示の実装方法
(1)必要な変数とLiquidオブジェクト
Shopifyのテーマで在庫数を表示するには、Liquidのオブジェクトと変数を使います。主なものを表にまとめました。
|
変数・オブジェクト |
説明 |
|
|
商品に紐づくすべてのバリエーションの情報を含むオブジェクト |
|
|
|
|
|
バリエーションの在庫数 |
|
|
在庫がある場合は |
これらの変数やオブジェクトを組み合わせることで、在庫数を表示したり、在庫状況に応じて表示内容を変えたりできます。
(2)条件分岐による在庫表示の制御
Liquidでは、条件分岐を用いることで在庫状況に応じたメッセージを表示できます。
|
条件 |
表示例 |
|
在庫あり |
在庫あり：残り{{ variant.inventory_quantity }}個 |
|
在庫わずか |
残りわずかです！ |
|
在庫なし |
売切れ |
上記は一例です。「在庫あり」の場合に具体的な在庫数を表示したり、「在庫わずか」の閾値を設定したりできます。 閾値は任意で設定可能です。例えば、在庫数が10個以下の場合に「残りわずか」と表示するといった設定が考えられます。 柔軟な表示設定によって、お客様の購買意欲を高め、円滑な購入体験を提供できる可能性があります。
(3)在庫数に応じたメッセージ表示
在庫数を表示するだけでなく、在庫状況に応じて以下のようにメッセージを変更することで、ユーザーの購買意欲を高めることができます。
|
在庫数 |
表示例 |
|
10個以上 |
在庫あり |
|
5個以上10個未満 |
残りわずかです |
|
1個以上5個未満 |
在庫わずか！お早めに |
|
0個 |
売り切れ |
例えば、在庫数が5個以下の場合に「残りわずかです」や「在庫わずか！お早めに」と表示することで、ユーザーの購入を後押しすることができます。
4. まとめ：バリエーション一覧表に在庫数を表示して顧客体験向上
バリエーション一覧表に在庫数を表示することは、顧客にとって以下のようなメリットがあります。
-
購入前に在庫状況を把握できるため、安心して購入を検討できる。
-
在庫切れによる購入断念や、発送待ちによるストレスを軽減できる。
-
在庫が少ない商品は購入を促進する効果も期待できる。
|
顧客体験向上 |
メリット |
|
購入前の安心感向上 |
在庫状況を事前に把握することで、安心して購入を検討することができます。 |
|
購入プロセスのストレス軽減 |
在庫切れによる購入断念や、発送待ちによるストレスを軽減することができます。 |
|
購入意欲の促進 |
在庫が少ないことが分かると、購買意欲が高まり、購入に繋がりやすくなります。 |
Shopifyで商品を販売する際には、顧客体験向上のためにも、ぜひバリエーション一覧表への在庫数表示を検討してみてください。