Shopify の残りわずか表示アプリについて調べてみた
はじめに
今回は、Shopify の商品ページに「残りわずか」と表示する方法を調べました。
１つ目は、コーディングで表示する方法
２つ目は、アプリを用いて「残りわずか」を表示する方法
それでは、それぞれの方法について詳しく解説していきます。
目標
今回の記事では、以下の画像のような、商品ページに「残りわずか」と表示することを目標とします。
コーディングで「残りわずか」と表示する方法
コーディングで実装するのは面倒ですが、頑張りましょう。
オンラインストアのコードを編集から、コードの編集画面に移動しましょう。
main-product.liquid のセクションファイルを開きましょう。
こちらのファイルにコーディングを行います。
表示する部分に以下のコードを追加します。
<p>在庫：{{ product.selected_or_first_available_variant.inventory_quantity }}</p>
在庫数に応じて表示を変えたい場合は、以下のコードを追加します。
{% if product.selected_or_first_available_variant.inventory_quantity > 10 %}
<p>在庫：{{ product.selected_or_first_available_variant.inventory_quantity }}</p>
{% else %}
<p class='text-red'>在庫残りわずか：{{ product.selected_or_first_available_variant.inventory_quantity }}</p>
{% endif %}
これで、残りわずかと表示することができました。
Shopify デフォルトだと、バリエーションの変更に応じて在庫数を変更できないため、
複数バリエーションを持つ商品に対して残りわずかと表示する場合は、アプリで実装する必要があります。
アプリで「残りわずか」と表示する方法
次にアプリを使用して実装していきます。楽なので、こちらがおすすめです。
「シンプル在庫数表示｜お手軽残りわずか表示」
今回使用していくアプリです。アプリストアは以下の画像をクリックすると遷移できます。
以下は「Shopify App Store のアプリ説明欄」からの引用です。
「シンプル在庫数表示｜お手軽残りわずか表示」は、Shopify ストアにノーコードで商品の残りわずか表示を実現できるアプリです。「シンプル在庫数表示｜お手軽残りわずか表示」を利用することで、顧客の購買意欲の向上が期待できます。デモストアが用意されていますので、アプリの詳細な機能を確認したい方は、「デモストアを表示する」ボタンからアクセスしてください。
機能
- ノーコードで残りわずか表示を挿入できます。
- 残りわずか表示条件をカスタマイズできます。
- 残りわずか表示のテキストを自由にカスタマイズできます。
- 残りわずか表示の色・大きさ・位置を変更できます。
- バリエーションがある商品でも使用できる
太字部分が嬉しいポイントです。コーディングだとバリエーションに対応できないため。
詳しい使い方
使い方を解説していきます。
アプリのインストール
それでは、実際にアプリのインストールを行なっていきます。
ストア管理画面左下の「設定」をクリックします。
ストアの管理画面の「アプリと販売チャネル」画面に表示されている「Shopify App Store」をクリックして、Shopify App Store に移動します。
検索窓に、「シンプル在庫数表示｜お手軽残りわずか表示」と入力します。以下の画像のアプリをクリックします。
「インストール」ボタンをクリックして、ストアにアプリを追加します。
「インストール」ボタンをクリックすると以下の画面に遷移します。右下の「インストール」ボタンをクリックして、アプリのインストールします。
以下の管理画面が表示されます。
アプリをテーマに追加
アプリをテーマに追加します。
自動か手動でアプリをインストールできます。
今回は自動でインストールします。
管理画面の「設定」ページの「テーマに残りわずか表示ブロックを追加」セクションでアプリをテーマに追加します。
追加したいテーマを選択し、「テーマに追加」ボタンをクリックします。
これでテーマにアプリを追加できます。
忘れないように、右上の「保存する」ボタンをクリックしてください。
見た目のカスタマイズ
見た目のカスタマイズを行います。
テキストの設定を行います。テキストの文言・テキストの大きさ (PC)・テキストの大きさ (スマホ)・テキストの色を設定します。
テキストの位置を設定します。
在庫数テキストの大きさ (PC)・在庫数テキストの大きさ (スマホ)・在庫数テキストの色を設定します。
背景の色を設定します。
在庫数に合わせてテキストを表示するかどうか・すべての商品にテキストを表示するかどうかを設定します。
テキストアニメーションを設定します。
上部の余白 (PC)・上部の余白 (スマホ)・下部の余白 (PC)・下部の余白 (スマホ)を設定します。
おわりに
今回の記事では、コーディングとアプリで「残りわずか」と表示する方法を解説しました。
デフォルト機能でも、アプリを使ってもおそらく 10 分くらいで「残りわずか」を表示できると思います。
最後まで読んでいただきありがとうございました！
Discussion