Shopifyの数量セレクタードロップダウン
多くの Shopify 加盟店では、平均注文額を改善するために、商品ページの数量入力フィールドをカスタマイズする必要があります。
デフォルトの Shopify 機能を使用すると、マーチャントは顧客がかなり基本的な方法で商品の数量を入力できるようにすることができます。顧客は手で番号を入力するか、製品ページの矢印記号を使用して上下に移動できます。
ただし、一部の高度なビジネス モデルや商品の種類では、Shopify マーチャントは、簡単に注文できるように、Shopify ストアで数量セレクター ドロップダウンを作成する必要がある場合があります。
Shopify の数量選択ドロップダウンは、顧客にとって簡単なオプションです。数量セレクターをドロップダウンに変更すると、顧客は注文したいアイテムの数量をクリックするだけで時間を節約できます。商人は、数量ドロップダウンに反映されるようにいくつかの値を事前に設定し、顧客が指定された値から選択することを制限できるため、これからも恩恵を受けます.
この記事では、Shopify ストアで数量入力をドロップダウンに変更するすべての方法について説明します。
Shopify ストアの商品ページに数量セレクターを追加する方法
数量入力をドロップダウンに変更するには、3 つの方法があります。すべての方法を段階的に知ることができます。希望するものを見つけて適用し、ビジネスを成長させてください。
＃1。 Shopify テーマコードの編集
技術的に熟練している場合は、Shopify テーマ コードを編集して数量セレクター ドロップダウンを追加できます。それを行うには、以下の手順に従ってください –
- 管理画面に移動します
- オンラインストアへ
- テーマをクリック
- 編集したいテーマを選択
- アクション>をクリックします。 コードを編集
- セクションで、ディレクトリproduct-template.liquidをクリックします。 (デビューテーマ)
7. 以下のコードをコピーして、数量セレクター ドロップダウンを表示する正確な位置に貼り付けます。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
< p class = "cart-attribute__field" >
< label >Quantity</ label >< br >
< required class select = "required" id = "quantity" name = "attributes[Quantity]" >
< option value = "1" {% if cart.attributes["Quantity"] == "1" %} selected {% endif %} >1</ option >
< option value = "2" {% if cart.attributes["Quantity"] == "2" %} selected {% endif %} >2</ option >
< option value = "3" {% if cart.attributes["Quantity"] == "3" %} selected {% endif %} >3</ option >
< option value = "4" {% if cart.attributes["Quantity"] == "4" %} selected {% endif %} >4</ option >
< option value = "5" {% if cart.attributes["Quantity"] == "5" %} selected {% endif %} >5</ option >
< option value = "6" {% if cart.attributes["Quantity"] == "6" %} selected {% endif %} >6</ option >
< option value = "7" {% if cart.attributes["Quantity"] == "7" %} selected {% endif %} >7</ option >
< option value = "8" {% if cart.attributes["Quantity"] == "8" %} selected {% endif %} >8</ option >
< option value = "9" {% if cart.attributes["Quantity"] == "9" %} selected {% endif %} >9</ option >
< option value = "10" {% if cart.attributes["Quantity"] == "10" %} selected {% endif %} >10</ option >
</ select >
</ p >
|
8. コードをproduct-template.liquidの別の場所に配置して、正確な位置を見つけます。
9. [保存] をクリックします。
これは、コードを追加する Shopify 管理者のサンプルプレビューです –
これにより、以下の画像のようなものが表示されます –
バンドルの数量 (たとえば、10、20、30、40、50) を事前に設定してドロップダウンに表示する場合は、コードを調べて、値を 10、20、30 などに変更します。これがコードです。上記のコードの代わりに、以下のコードをコピーして貼り付けます –
|
1
2
3
4
5
6
7
8
9
10
11
|
< p class = "cart-attribute__field" >
< label >Quantity</ label >< br >
< required class select = "required" id = "quantity" name = "attributes[Quantity]" >
< option value = "10" {% if cart.attributes["Quantity"] == "10" %} selected {% endif %} >10</ option >
< option value = "20" {% if cart.attributes["Quantity"] == "20" %} selected {% endif %} >20</ option >
< option value = "30" {% if cart.attributes["Quantity"] == "30" %} selected {% endif %} >30</ option >
< option value = "40" {% if cart.attributes["Quantity"] == "40" %} selected {% endif %} >40</ option >
< option value = "50" {% if cart.attributes["Quantity"] == "50" %} selected {% endif %} >50</ option >
< option value = "60" {% if cart.attributes["Quantity"] == "60" %} selected {% endif %} >60</ option >
</ select >
</ p >
|
これにより、以下の画像のようなものが表示されます –
ここで、70、100 などのプリセット値をさらに表示したい場合は、コード行を追加するだけです。
|
1
2
3
|
< option value = "70" {% if cart.attributes["Quantity"] == "70" %} selected {% endif %} >60</ option >
< option value = "100" {% if cart.attributes["Quantity"] == "100" %} selected {% endif %} >60</ option >
|
テーマを調整するためにデザインを変更する必要がある場合は、 theme.scss.liquidにアクセスしてください。 ファイルを作成し、カスタム CSS を追加します。
雇う Shopify 開発者
Shopify 開発者を雇うことは、商品ページに数量セレクターのドロップダウンを作成するための良いオプションです。専門家に連絡しても、その専門家を雇うことを約束するわけではないことを忘れないでください。経験豊富な開発者を雇う前に、次の点に留意してください –
- 製品数量ドロップダウンを実装する方法について予備調査を行います。他のビジネスでも同様の例を見つけてください。これは、開発者の理解を深めるのに役立ちます。
- 予算とタイムラインを明確に定義します。詳細な説明を用意して、開発者が正確な見積もりを提供できるようにします。
Shopify エキスパートを雇う方法
近くで働く専門家を選ぶ必要はありません。リモートで通信できるため、 Shopify エキスパート ページに移動して、場所を気にせずにエキスパートを見つけることができます。
Shopify アプリを使用する (簡単なオプション)
ご覧のとおり、Shopifyの数量入力をカスタマイズする方法を探している場合、複数のオプションがあります.しかし、技術者でなく、開発者を雇うのにあまりお金をかけたくない場合は、Shopify ストアにアプリを使用することをお勧めします。たとえば、 MultiVariants を統合する – Shopify クイック注文アプリを使用すると、コードを編集することなく、製品ページの数量入力を完全に制御できます。また、カートページでも機能します。
この適切な Shopify アプリをストアにインストールして、数量ルールを設定する真の力を手に入れましょう。 個々の製品、製品バリエーション、または製品カテゴリに対してこれらのルールを設定し、それに応じて数量ドロップダウン メニューに反映します。
このアプリでは、 任意の数量ルールを設定し、それに応じて数量ドロップダウン メニューに表示します。 MultiVariants Shopify アプリでできることは次のとおりです –
- 通常の数量入力ボックスの代わりに、プリセットバンドル数量 (ドロップダウン) を設定します。顧客が 5、10、20、50、100 などの事前設定された製品数量から選択できるようにします。
- 利用可能な在庫数量を自動的に確認し、数量セレクターのドロップダウンで値を変更します。ドロップダウンに最大 10 個表示するように設定したが、商品には 5 個のアイテムが残っているとします。ここで、ドロップダウンに 1 ～ 5 が自動的に反映されるようにします。
- 個々の製品または製品のバリエーションの数量セレクター ドロップダウンを設定します。
また、Shopify ストアに MultiVariants をインストールして 3 日間の無料トライアルを利用し、24 時間年中無休の技術サポート チームから支援を受けることもできます。このアプリは、製品ページで注文する際に顧客の貴重な時間を節約し、 MultiVariants は多くの Shopify マーチャントから高い評価を得ています.
これは、Shopify の数量セレクター ドロップダウンを示す MutiVariants のサンプル ビューです。
最終的な考え
これで、Shopify で通常の数量入力ボックスを数量セレクター ドロップダウンに変更する方法がわかりました。この Shopify 数量セレクター ドロップダウンは、販売量の増加に役立ちます.数量のドロップダウンを使用して、事前に設定したバンドルの数量または増分数量を表示したり、数量ルールを設定したりすることができるためです。