今回はShopifyで商品の在庫数表示のカスタマイズについて解説します。無料テーマDawnでは在庫表示機能がありますが、ちょっとしたカスタマイズで使い勝手が向上します。Shopifyで在庫表示をしたい方は是非参考にしてみてください。必要なコードも一番最後に開示しています。
※今回はDawn(ver.13.0.1)を前提に解説します。
今回の成果物(Before/After)
完成イメージ
完成イメージは以下です。
標準機能だと、在庫数を表示する場合、常に在庫数が見えてしまいます。在庫数が多い場合は在庫数を表示したくないという要望が多いため、このような要望に対応するためには、既存コードを編集して対応をします。
今回の実装ポイント
今回は既存の在庫数表示機能のコードをカスタマイズします。この際にポイントとなるのは以下2点です。
対象となるコードを探し出す
在庫数表示部分に設定されているclassをディベロッパーツールで探し、今回カスタマイズする部分のコードがどのファイルのどの部分に記載されているかを特定します。
既存機能を活かしながらカスタマイズする
今回は既存コードを活かしながらカスタマイズをします。必要な部分、不要な部分の線引きを正確にしましょう。今回は
(1)低在庫基準値よりも在庫が多ければ在庫数を表示せず、「在庫：〇」と表示する
(2)低在庫基準値よりも在庫が少なければ「在庫：△（残り〇個）」と表示する
(3)在庫数が0の場合、「在庫：×（残り0個）」と表示する
という仕様にしたいと思います。
コードの紹介
それではこれより、実際のコードを紹介していきます。
続きはログインすると閲覧できます
無料で登録/閲覧できますので、会員登録・ログインをお願います。
会員登録（会員登録がまだの方はこちら）
ログイン(会員登録済みの方はこちら)