Liste déroulante du sélecteur de quantité dans Shopify
Pour de nombreux marchands Shopify, la personnalisation du champ de saisie de la quantité sur la page du produit est nécessaire pour améliorer la valeur moyenne des commandes.
Avec la fonctionnalité Shopify par défaut, les marchands peuvent permettre à leurs clients de saisir les quantités des articles de manière assez basique. Les clients peuvent taper un numéro à la main ou monter et descendre à l'aide des flèches sur la page du produit.
Mais pour certains modèles commerciaux ou types de produits avancés, les marchands Shopify peuvent avoir besoin de créer une liste déroulante de sélection de quantité dans les magasins Shopify pour encourager les commandes faciles.
La liste déroulante du sélecteur de quantité dans Shopify est une option simple pour les clients. Changer le sélecteur de quantité en une liste déroulante permet aux clients de gagner du temps en leur permettant de cliquer simplement sur la quantité d'articles qu'ils souhaitent commander. Les commerçants en bénéficient également car ils peuvent prédéfinir certaines valeurs à refléter dans la liste déroulante des quantités et empêcher les clients de choisir parmi les valeurs données.
Dans cet article, vous découvrirez toutes les manières possibles de modifier la saisie de la quantité dans une liste déroulante de votre boutique Shopify.
Comment ajouter un sélecteur de quantité aux pages de produits dans la boutique Shopify
Il existe 3 façons de modifier la quantité saisie dans une liste déroulante. Vous saurez tous les moyens étape par étape. Trouvez celui que vous souhaitez, appliquez-le et développez votre entreprise.
- Modifier le code de thème Shopify (utilisateurs avancés)
- Embaucher un développeur Shopify
- Utilisez une application Shopify (aucune expérience de codage requise)
#1. Modifier le code du thème Shopify
Si vous êtes techniquement qualifié, vous pouvez ajouter une liste déroulante de sélection de quantité en modifiant le code du thème Shopify. Pour ce faire, suivez les étapes ci-dessous -
- Accédez à votre interface administrateur Shopify
- Aller à la boutique en ligne
- Cliquez sur Thèmes
- Sélectionnez le thème que vous souhaitez modifier
- Cliquez sur Actions > Modifier le code
- Dans le répertoire Sections, cliquez sur product-template.liquid (Thème de début)
7. Copiez et collez le code ci-dessous à l'endroit exact où vous souhaitez voir la liste déroulante de votre sélecteur de quantité .
|
1
2
3
4
5
6
7
8
9
dix
11
12
13
14
15
|
< p class = "cart-attribute__field" >
< label >Quantity</ label >< br >
< select required class = "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. Placez le code à un emplacement différent dans product-template.liquid pour trouver la position exacte.
9. Cliquez sur Enregistrer.
Voici un exemple d'aperçu d'un administrateur Shopify où ajouter le code -
Cela montrera quelque chose comme l'image ci-dessous -
Si vous souhaitez prédéfinir une quantité de bundle (par exemple 10, 20, 30, 40, 50) et l'afficher dans la liste déroulante, examinez le code et modifiez simplement les valeurs en 10, 20, 30, etc. Voici le code et au lieu du code ci-dessus, copiez et collez le code ci-dessous -
|
1
2
3
4
5
6
7
8
9
dix
11
|
< p class = "cart-attribute__field" >
< label >Quantity</ label >< br >
< select required class = "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 >
|
Cela montrera quelque chose comme l'image ci-dessous -
Maintenant, si vous voulez afficher plus de valeurs prédéfinies comme 70, 100 et autres, ajoutez simplement plus de lignes de code.
|
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 >
|
Si vous avez besoin de modifications dans la conception pour ajuster votre thème, accédez à theme.scss.liquid fichier et ajoutez du CSS personnalisé.
Embaucher un développeur Shopify
L'embauche d'un développeur Shopify est une bonne option pour créer une liste déroulante pour les sélecteurs de quantité sur votre page produit. N'oubliez pas que contacter un expert ne signifie pas que vous vous engagez à l'embaucher. Avant d'embaucher un développeur expérimenté, gardez à l'esprit les points suivants :
- Effectuez des recherches préliminaires sur la manière dont vous souhaitez mettre en œuvre la liste déroulante des quantités de produits. Trouvez un exemple similaire dans d'autres entreprises. Cela vous aidera à mieux faire comprendre au développeur.
- Définissez clairement votre budget et votre échéancier. Préparez une description détaillée afin que le développeur puisse vous fournir un devis précis.
Comment embaucher un expert Shopify
Il n'est pas nécessaire de choisir l'expert travaillant à proximité. Comme vous pouvez communiquer à distance, naviguez sur la page des experts Shopify et trouvez votre expert sans vous soucier de l'emplacement.
Utiliser une application Shopify (option simple)
Comme vous pouvez le constater, plusieurs options s'offrent à vous si vous recherchez des moyens de personnaliser votre entrée de quantité Shopify. Mais si vous n'êtes pas une personne technique et que vous ne souhaitez pas dépenser trop d'argent pour embaucher un développeur, l'option recommandée consiste à utiliser une application pour votre boutique Shopify. Par exemple, l'intégration de l' application de commande rapide MultiVariants - Shopify vous permettra de contrôler totalement la quantité saisie sur votre page de produit sans avoir à modifier de code. Cela fonctionne également sur la page de votre panier.
Avec cette application Shopify appropriée installée sur votre magasin, obtenez le véritable pouvoir de définir des règles de quantité. Définissez ces règles pour un produit individuel, des variantes de produit ou des catégories de produits et répercutez-les en conséquence dans le menu déroulant de quantité.
Avec cette application, définissez toutes les règles de quantité et affichez-les en conséquence dans le menu déroulant de quantité. Voici ce que vous pouvez faire avec l'application MultiVariants Shopify -
- Définissez une quantité de lot prédéfinie (liste déroulante) au lieu de la zone de saisie de quantité habituelle. Permettez aux clients de choisir parmi les quantités de produits prédéfinies telles que 5, 10, 20, 50 et 100.
- Vérifiez automatiquement la quantité de stock disponible et modifiez les valeurs dans la liste déroulante du sélecteur de quantité. Supposons que vous en ayez configuré 10 à afficher dans la liste déroulante, mais qu'il reste 5 articles au produit. Maintenant, vous voulez que la liste déroulante reflète automatiquement 1-5.
- Définissez la liste déroulante du sélecteur de quantité pour n'importe quel produit individuel ou les variantes du produit.
Vous pouvez également installer MultiVariants sur votre boutique Shopify pour un essai gratuit de 3 jours et obtenir l'aide d'une équipe d'assistance technique 24h/24 et 7j/7. L'application permet aux clients de gagner un temps précieux lorsqu'ils passent des commandes sur votre page produit et MultiVariants a de bonnes critiques de la part de nombreux marchands Shopify.
Voici un exemple de vue de MutiVariants montrant la liste déroulante du sélecteur de quantité dans Shopify -
Dernières pensées
Donc, maintenant vous savez comment changer la zone de saisie de quantité normale en une liste déroulante de sélection de quantité dans Shopify. Cette liste déroulante de sélection de quantité Shopify vous aidera à augmenter votre volume de ventes. Parce que, grâce à la liste déroulante des quantités, vous pouvez afficher les quantités prédéfinies de vos lots ou les quantités d'augmentation incrémentielle ou la manière dont vous souhaitez définir les règles de quantité.