Comment ajouter plusieurs produits au panier avec un seul bouton sur Shopify
En tant que propriétaire d’une boutique Shopify, vous êtes en concurrence permanente avec des centaines d’autres vendeurs qui peuvent avoir les mêmes produits en stock que vous. Vous devez donc toujours chercher des moyens de rendre l’achat plus pratique pour vos clients.
Permettre aux clients d’ajouter plusieurs produits, ou toute une collection, au panier via un seul bouton est un excellent moyen de simplifier leur parcours d’achat. Shopify le permet-il ? Voyons cela.
Comment ajouter plusieurs produits au panier avec du code
Pour ajouter plusieurs produits au panier, vous pouvez utiliser la Cart API de Shopify. La plateforme ne prend pas en charge nativement l’ajout de plusieurs produits en une seule fois par défaut, mais il existe des solutions personnalisées éprouvées. Vous pouvez utiliser le formulaire de commande avec le champ « updates » comme champ de quantité, ou utiliser l’endpoint moderne /cart/add.js avec un tableau items. Voici un exemple de code que vous pouvez utiliser pour cela.
Si vous n’êtes pas sur une page de collection, veillez à définir quelle collection utiliser dans le formulaire de commande.
Utilisez l’instruction assign suivante, en remplaçant ‘your-collection-handle-here’ par le handle de votre collection :
{% comment %}
{% assign collection = collections.your-collection-handle-here %}
Use the assign statement outside of this comment block at the top of your template.
{% endcomment %}
{% paginate collection.products by 100 %}
<form action="/cart" method="post">
{% if collection.products_count > 0 %}
<div>
<h1>{% if template contains 'page' %}{{ page.title }}{% else %}{{ collection.title }}{% endif %}</h1>
<input type="submit" value="Add to the cart" />
</div>
{% else %}
<h1>{% if template contains 'page' %}{{ page.title }}{% else %}{{ collection.title }}{% endif %}</h1>
{% endif %}
{% if template contains 'page' and page.content.size > 0 %}
<div class="rte">
{{ page.content }}
</div>
{% elsif collection.description.size > 0 %}
<div class="rte">
{{ collection.description }}
</div>
{% endif %}
{% if collection.products_count > 0 %}
<table>
<tbody>
{% for product in collection.products %}
{% if product.available %}
{% for variant in product.variants %}
{% if variant.available %}
<tr class="{% cycle 'pure-table-odd', '' %}">
<td>
<a href="{{ variant.url | collection }}">
<img src="{{ variant.image | default: product.featured_image | img_url: 'small' }}" alt="{{ variant.title | escape }}" />
</a>
</td>
<td>
<a href="{{ variant.url | collection }}">
{{ product.title }}{% unless variant.title contains 'Default' %} - {{ variant.title }}{% endunless %}{% unless variant.sku == blank %} - {{ variant.sku }}{% endunless %}
</a>
</td>
<td>
{{ variant.price | money }}
</td>
<td style="text-align:right;">
<input name="updates[{{ variant.id }}]" onfocus="this.select()" class="quantity field" min="0" {% unless variant.inventory_management == blank or variant.inventory_policy == 'continue' %} max="{{ variant.inventory_quantity }}" {% endunless %} type="text" value="0" tabindex="1" />
</td>
</tr>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</tbody>
</table>
<div>
<input type="submit" value="Add to the cart" />
</div>
{% else %}
<p>There are no products in this view.</p>
{% endif %}
</form>
{% endpaginate %}
{% if collection.products_count > 0 %}
<script>
jQuery(function($) {
$('table .quantity:first').focus();
$('[max]').change(function() {
var max = parseInt($(this).attr('max'), 10);
var value = parseInt($(this).val(), 10) || 0;
if (value > max) {
alert('We only have ' + max + ' of this item in stock');
$(this).val(max);
}
});
});
</script>
{% endif %}Autrement, vous pouvez utiliser l’approche moderne de la Cart API avec JavaScript pour ajouter plusieurs articles en une seule fois via l’endpoint /cart/add.js avec un tableau items, ce qui permet d’ajouter plusieurs produits avec des quantités différentes en une seule requête.
Utiliser une application
Si le code n’est pas votre point fort, vous pouvez aussi utiliser une application pour permettre à vos clients d’ajouter plusieurs produits au panier en une seule fois. C’est particulièrement utile pour les boutiques B2B, les activités de vente en gros et les boutiques qui proposent des bundles de produits.
Il existe plusieurs types d’applications dans le Shopify App Store pour cet usage. Certaines se concentrent sur la commande en gros avec des fonctionnalités comme l’import CSV et des règles de quantité, tandis que d’autres sont spécialisées dans les bundles avec des options de mix-and-match. Parmi les options populaires, on trouve des applications comme SellUp, Bundler, et diverses applications multi-buy qui vous permettent d’afficher des produits complémentaires juste au-dessus du bouton d’ajout au panier du produit principal.
Ces applications permettent à vos clients d’ajouter plusieurs produits à leur panier en un seul clic, ce qui améliore considérablement la valeur moyenne de commande, ou « AOV ». Proposer un upsell en une seule case à cocher rend aussi le processus fluide et sans friction.
Au moment de choisir une application, recherchez des fonctionnalités adaptées à vos besoins : capacité de commande en gros, création de bundles, automatisation des remises, gestion des stocks et compatibilité mobile. La plupart des applications proposent des essais gratuits, ce qui permet de tester facilement la solution la plus adaptée à votre boutique.
