Come aggiungere più prodotti al carrello con un solo pulsante su Shopify
Da proprietario di un negozio Shopify, sei costantemente in competizione con centinaia di altri venditori che potrebbero avere gli stessi prodotti disponibili a magazzino. Per questo, devi sempre cercare modi per rendere lo shopping più comodo per i tuoi clienti.
Permettere ai clienti di aggiungere più prodotti o un’intera collezione al carrello con un unico pulsante è un ottimo modo per semplificare il processo di acquisto. Shopify lo consente? Scopriamolo.
Come aggiungere più prodotti al carrello con il codice
Per aggiungere più prodotti al carrello, puoi usare la Cart API di Shopify. La piattaforma non supporta nativamente l’aggiunta di più prodotti in una sola volta per impostazione predefinita, ma esistono soluzioni personalizzate collaudate. Puoi usare il modulo d’ordine con l’input ‘updates’ come campo quantità, oppure usare il moderno /cart/add.js endpoint con un array items. Ecco un esempio di codice che puoi utilizzare per farlo.
Se non ti trovi su una pagina di collezione, assicurati di definire quale collezione usare nel modulo d’ordine.
Usa la seguente istruzione assign, sostituisci ‘your-collection-handle-here’ con l’handle della tua collezione:
{% 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 %}In alternativa, puoi usare l’approccio moderno della Cart API con JavaScript per aggiungere più articoli in una sola volta tramite l’endpoint /cart/add.js con un array items, che ti consente di aggiungere più prodotti con quantità diverse in un’unica richiesta.
Usare un’app
Se programmare non è il tuo forte, puoi anche usare un’app per permettere ai clienti di aggiungere più prodotti al carrello in una sola volta. È particolarmente utile per negozi B2B, attività all’ingrosso e store che offrono bundle di prodotti.
Nello Shopify App Store sono disponibili diversi tipi di app per questo scopo. Alcune app si concentrano sugli ordini in blocco con funzionalità come upload CSV e regole sulle quantità, mentre altre sono specializzate nei bundle con opzioni mix-and-match. Tra le opzioni più popolari ci sono app come SellUp, Bundler e varie app multi-buy che ti permettono di mostrare componenti aggiuntivi del prodotto subito sopra il pulsante “aggiungi al carrello” del prodotto principale.
Queste app permettono ai clienti di aggiungere più prodotti al carrello con un solo clic, migliorando drasticamente il valore medio dell’ordine o “AOV”. Avere un upsell con una sola spunta rende inoltre il processo fluido e senza attriti.
Quando scegli un’app, cerca funzionalità in linea con le tue esigenze: possibilità di ordini in blocco, creazione di bundle, automazione degli sconti, gestione dell’inventario e compatibilità mobile. La maggior parte delle app offre prove gratuite, così è facile testare quale soluzione funziona meglio per il tuo store.
