Meerdere producten met één knop aan de winkelwagen toevoegen op Shopify
Als Shopify-winkeleigenaar concurreer je voortdurend met honderden andere verkopers die mogelijk dezelfde producten op voorraad hebben als jij. Daarom moet je altijd op zoek zijn naar manieren om het winkelen voor je klanten makkelijker te maken.
Klanten met één knop meerdere producten of zelfs een hele collectie aan de winkelwagen laten toevoegen is een uitstekende manier om het aankoopproces voor hen te vereenvoudigen. Staat Shopify dit toe? Laten we het uitzoeken.
Meerdere producten met code aan de winkelwagen toevoegen
Om meerdere producten aan de winkelwagen toe te voegen, kun je Shopify’s Cart API gebruiken. Het platform ondersteunt standaard niet native het in één keer toevoegen van meerdere producten, maar er zijn bewezen maatwerkoplossingen. Je kunt het bestelformulier gebruiken met de ‘updates’-input als hoeveelheidveld, of de moderne /cart/add.js-endpoint gebruiken met een items-array. Hier is een codevoorbeeld dat je hiervoor kunt gebruiken.
Als je niet op een collectiepagina zit, geef dan aan welke collectie je in het bestelformulier wilt gebruiken.
Gebruik de volgende assign-statement en vervang ‘your-collection-handle-here’ door de handle van je collectie:
{% 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 %}Als alternatief kun je de moderne Cart API-aanpak met JavaScript gebruiken om meerdere items in één keer toe te voegen via de /cart/add.js-endpoint met een items-array. Daarmee kun je in één request meerdere producten met verschillende aantallen toevoegen.
Een app gebruiken
Als coderen niet je sterkste punt is, kun je ook een app gebruiken om klanten meerdere producten tegelijk aan de winkelwagen te laten toevoegen. Dit is vooral handig voor B2B-webshops, groothandels en winkels die productbundels aanbieden.
Er zijn verschillende soorten apps in de Shopify App Store die hiervoor bedoeld zijn. Sommige apps richten zich op bulkbestellingen met functies zoals CSV-uploads en hoeveelheidsregels, terwijl andere juist gespecialiseerd zijn in productbundels met mix-and-match-opties. Populaire opties zijn onder andere apps zoals SellUp, Bundler en diverse multi-buy-apps waarmee je product-add-ons direct boven de ‘add to cart’-knop van het hoofdproduct kunt tonen.
Met deze apps kunnen je klanten met één klik meerdere producten aan hun winkelwagen toevoegen, wat de gemiddelde bestelwaarde of “AOV” aanzienlijk verhoogt. Een upsell met één vinkje maakt het proces bovendien soepel en zonder frictie.
Let bij het kiezen van een app op functies die passen bij jouw behoeften: mogelijkheden voor bulkbestellingen, bundels samenstellen, automatische kortingen, voorraadbeheer en mobiele compatibiliteit. De meeste apps bieden gratis proefperiodes, waardoor je eenvoudig kunt testen welke oplossing het beste werkt voor jouw winkel.
