2025.02.01 - Shopify
Shopifyで在庫数に応じて表示を切り替える実装方法(コード付き)
はじめに
これまでの制作実績の中で、クライアントから要望があったカスタマイズを共有することで、ECサイト運営に携わる皆様の参考になればと考えています。
今回は、Shopifyで商品の在庫数に応じて表示を切り替える実装方法をご紹介します。
基本的な実装方法
まずは基本的なソースコードをご紹介します。
{% liquid
// 選択されている商品の在庫数を取得
assign inventory_quantity = product.selected_or_first_available_variant.inventory_quantity
// 数量に応じてテキストを代入
if inventory_quantity < 10
assign inventory_quantity = '在庫 わずか'
elsif inventory_quantity < 50
assign inventory_quantity = '在庫 少'
else
assign inventory_quantity = '在庫あり'
endif
%}
// 表示
<p>{{ inventory_quantity }}</p>
このコードについて
- 選択された商品(もしくは最初の利用可能なバリアント)の在庫数を取得
- 在庫数に応じて表示テキストを設定
- 10個未満:「在庫 わずか」
- 50個未満:「在庫 少」
- それ以上:「在庫あり」
オプション付き商品の実装
商品にサイズや色などのオプションがある場合、さらに追加の実装が必要になります。オプション選択時に在庫情報を動的に更新する必要があるためです。実装方法はテーマによって異なりますが、日本向けの無料テーマ「Rise」ではproduct-info.js内で更新処理が行われています。
実装時の注意点
1. Shopify APIの更新確認
- Shopifyの公式ドキュメントは頻繁に更新されるため、実装前に最新の情報を確認することをおすすめします。
- Shopify Liquid API Documentationを参照してください
2. コードの可読性
- Liquidでの動的処理は、処理ブロックと表示ブロックを分けて記述することで保守性が向上します。
3. パフォーマンス考慮
- 在庫数の取得や表示の更新は、ページの読み込みやユーザー体験(UX)に影響を与える可能性があります。
- キャッシュを使用する場合は、在庫のリアルタイム性にも注意が必要です。
むすび
在庫状況の視覚的な表示は、ショップの信頼性向上やユーザーの購買意欲の促進に重要な役割を果たします。一方で、Shopifyの更新頻度が高いため、保守管理コストとのバランスを考慮しながら実装を進めることが大切です。
今回ご紹介した実装方法が、皆様のECサイト運営の参考になれば幸いです。
← Back to Blog