はじめに
こんにちは、株式会社Tsuzucle SPRING開発事業部の栁澤です！
Shopifyでは在庫切れ時も販売を続けることが可能です。
しかし、在庫切れ時も注文を受け付ける場合は、注意事項を顧客に適切にお伝えしないと以下のようなトラブルの原因になります。
- 注文したが入荷タイミングがわからない
- 支払い後の連絡がない
そこで本記事では、在庫切れでも販売を継続する商品に対して、商品ページに注意書きを表示する方法をご紹介します。
実装イメージ
「在庫切れ時も注文を受け付ける」かつ「在庫が0」の商品の商品詳細ページに注意書きが表示されます。
実装方法
今回はLiquidコードを利用したカスタマイズを行いますが、基本的にはShopifyのテーマカスタマイズのカスタマイズされたLiquidからの実装をおすすめします。
Shopify管理画面からオンラインストア＞テーマ＞カスタマイズ＞商品＞デフォルトの商品＞商品情報のブロックにカスタマイズされたLiquidを追加
カスタマイズされたLiquidに以下のコードをコピー＆ペーストします。
{% for variant in product.variants %}
{% if variant.inventory_management == "shopify" and variant.inventory_quantity < 1 %}
{% if product.variants.first.inventory_policy == 'continue' %}
<div id="variant-inventory" style="
display: inline-block;
font-weight: bold;
text-align: left;
font-family: 'Noto Sans Japanese', sans-serif;
font-weight: 700;
font-size: 12px;
">
お取り寄せ商品になります。<br>注文後から1ヶ月後の配送となります。
</div>
{% endif %}
{% endif %}
{% endfor %}
必要に応じて、メッセージの文言やスタイルをカスタマイズしてください。
以上で実装完了です。
簡単にコードの説明をします。
在庫数条件分岐
{% if variant.inventory_management == "shopify" and variant.inventory_quantity < 1 %}
この条件分岐では、以下の2つの条件をチェックしています：
- Shopifyで在庫管理されている商品（
inventory_management == "shopify"） - 在庫数が1より小さい（
inventory_quantity < 1）
在庫の条件が不要な場合はinventory_quantity < 1を消去してください。
在庫在庫切れ時も販売を続ける商品の判別
{% if product.variants.first.inventory_policy == 'continue' %}
在庫切れ時も販売を継続する設定になっているかをチェックします。
continueは販売継続を意味します。
表示する文面
<div id="variant-inventory" style="
display: inline-block;
font-weight: bold;
text-align: left;
font-family: 'Noto Sans Japanese', sans-serif;
font-weight: 700;
font-size: 12px;
">
現在在庫がございません。<br>入荷次第ご登録のメールアドレスにご連絡いたします。
</div>
文章を編集する際は<div>に囲われた箇所を編集してください。
styleも自由にカスタマイズしていただいて問題ありません。
おわりに
今回紹介した実装方法は、シンプルながら効果的な在庫状況や注意を表示する機能になります。
実装にあたっては、以下のような工夫も検討してみてください：
- 商品や顧客に合わせた文面、スタイルの設定
- 在庫に関するお問い合わせがしやすい導線設計
- 在庫のある商品のクロスセル設計
本機能やShopifyに関するご質問がありましたらお気軽にご連絡ください。
最後までご覧いただきありがとうございました🙌
株式会社Tsuzucleでは、Shopifyに関する技術サポートを提供しています。ご相談は、下記のリンクよりお気軽にお問い合わせください。
お問い合わせ：https://tsuzucle.com/pages/contact
メールアドレス：info@tsuzucle.com
Xアカウント：https://x.com/tsuzucle
Discussion