Come creare un'anta del carrello in Shopify

Indice dei Contenuti

Introduzione
Comprendere il Cassetto del Carrello
Creare un Cassetto del Carrello in Shopify
Migliori Pratiche per i Cassetti del Carrello
Conclusione
FAQ

Introduzione

Immagina un cliente che naviga nel tuo negozio online, aggiungendo con entusiasmo articoli al carrello, solo per essere bruscamente reindirizzato a una pagina separata del carrello. Questa esperienza può essere sconvolgente, portando spesso all'abbandono del carrello e a vendite perse. E se ci fosse un modo più fluido per i clienti di visualizzare il loro carrello senza interrompere la loro esperienza di shopping? Entra in gioco il cassetto del carrello: un carrello scorrevole, off-canvas che migliora l'esperienza utente e aumenta i tassi di conversione.

Un cassetto del carrello consente ai clienti di visualizzare i loro articoli selezionati e i costi totali senza lasciare la pagina corrente, promuovendo un viaggio di shopping ininterrotto. Nel panorama competitivo dell'e-commerce di oggi, ottimizzare questo aspetto del tuo negozio è cruciale per trattenere i clienti e massimizzare le vendite.

In questo post, approfondiremo tutto ciò che devi sapere su come creare un cassetto del carrello in Shopify. Delineeremo i vantaggi di implementare questa funzionalità, forniremo una guida passo-passo per la sua creazione e discuteremo come integrarla nella tua strategia di esperienza utente. Alla fine, avrai una comprensione completa di come creare un cassetto del carrello in Shopify, assicurando che il tuo negozio rimanga facile da usare ed efficiente.

Cosa Imparerai

Il significato di un cassetto del carrello nell'e-commerce.
Come implementare un cassetto del carrello personalizzato nel tuo negozio Shopify senza utilizzare app di terze parti.
Migliori pratiche per migliorare l'esperienza utente con il tuo cassetto del carrello.

Iniziamo!

Comprendere il Cassetto del Carrello

Che cos'è un Cassetto del Carrello?

Un cassetto del carrello, spesso chiamato carrello scorrevole o mini carrello, è un elemento dell'interfaccia che consente ai clienti di visualizzare il contenuto del loro carrello senza navigare via dalla pagina attuale. Invece di reindirizzare gli utenti a una pagina dedicata al carrello, il cassetto scorre dal lato dello schermo, presentando una panoramica conveniente degli articoli selezionati. Questo approccio non solo semplifica l'esperienza di shopping, ma incoraggia anche gli utenti a continuare a esplorare il tuo negozio, portando infine a tassi di conversione più elevati.

L'importanza di un Cassetto del Carrello

Avere un cassetto del carrello nel tuo negozio Shopify comporta numerosi vantaggi:

Esperienza Utente Migliorata: I clienti possono visualizzare rapidamente il contenuto del carrello senza interrompere il loro flusso di navigazione.
Riduzione dell'Abbandono del Carrello: Rendendo facile per i clienti vedere i loro articoli e il costo totale, un cassetto del carrello può aiutare a ridurre la probabilità di abbandono del carrello.
Aumento delle Vendite: Un processo di checkout fluido può portare a più transazioni completate, influenzando positivamente il tuo reddito.
Ottimizzazione per Dispositivi Mobili: Con un numero crescente di consumatori che fanno shopping su dispositivi mobili, un cassetto del carrello fornisce un'esperienza più user-friendly sugli schermi più piccoli.
Opzioni di Personalizzazione: Un cassetto del carrello ben progettato può essere personalizzato per allinearsi al branding del tuo negozio, migliorando l'estetica complessiva.

Creare un Cassetto del Carrello in Shopify

Requisiti Preliminari

Prima di immergerti nel processo di creazione, assicurati di avere i seguenti requisiti:

Accesso al pannello di amministrazione del tuo negozio Shopify.
Conoscenze di base di HTML, CSS e JavaScript.
Un tema che consenta la codifica personalizzata (la maggior parte dei temi Shopify lo fa).

Guida Passo-Passo

Passo 1: Accedi all'Editor di Codice di Shopify

Accedi al tuo pannello di amministrazione di Shopify.
Nella barra laterale sinistra, naviga su Negozio Online e clicca su Temi.
Cerca il tuo tema attivo e clicca su Azioni > Modifica Codice.

Passo 2: Crea i File Necessari

Nella cartella Assets, crea due nuovi file: drawer.css e drawer.js.

Apri drawer.css e aggiungi i seguenti stili per gestire l'aspetto del tuo cassetto del carrello:

.drawer {
    display: none;
}
.drawer__header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
}
.drawer__close {
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
}
.drawer__wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    max-width: 500px;
    z-index: 9999;
    overflow: auto;
    transition: transform 0.3s;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 6px #777;
}
.drawer.is-active {
    display: block;
}
.drawer.is-visible .drawer__wrapper {
    transform: translateX(0);
}

Successivamente apri drawer.js e inserisci il seguente JavaScript per gestire la funzionalità del cassetto:

var drawer = function () {
    var settings = {
        activeClass: 'is-active',
        visibleClass: 'is-visible',
        selectorTarget: '[data-drawer-target]',
        selectorTrigger: '[data-drawer-trigger]',
        selectorClose: '[data-drawer-close]',
    };

    var openDrawer = function (trigger) {
        var target = document.getElementById(trigger.getAttribute('aria-controls'));
        target.classList.add(settings.activeClass);
        document.documentElement.style.overflow = 'hidden';
        setTimeout(function () {
            target.classList.add(settings.visibleClass);
        }, 50);
    };

    var closeDrawer = function (event) {
        var closestParent = event.closest(settings.selectorTarget);
        closestParent.classList.remove(settings.visibleClass);
        document.documentElement.style.overflow = '';
        setTimeout(function () {
            closestParent.classList.remove(settings.activeClass);
        }, 350);
    };

    var clickHandler = function (event) {
        var toggle = event.target,
            open = toggle.closest(settings.selectorTrigger),
            close = toggle.closest(settings.selectorClose);

        if (open) {
            openDrawer(open);
        }
        if (close) {
            closeDrawer(close);
        }
        if (open || close) {
            event.preventDefault();
        }
    };

    document.addEventListener('click', clickHandler, false);
};

drawer();

Passo 3: Crea la Struttura HTML

Nella cartella Sections, crea un nuovo file chiamato drawer.liquid.

Inserisci la seguente struttura HTML per definire il layout del cassetto:

<section class="drawer" id="drawer-name" data-drawer-target>
    <div class="drawer__overlay" data-drawer-close tabindex="-1"></div>
    <div class="drawer__wrapper">
        <div class="drawer__header">
            <div class="drawer__title">Continua a Fare Shopping</div>
            <button class="drawer__close" data-drawer-close aria-label="Chiudi Cassetto"></button>
        </div>
        <div class="drawer__content" id="cart__drawer">
            <div id="cart__drawer_items"></div>
            <div style="margin-top: 50px">
                <h4>Totale: <span id="cart__total_price"></span></h4>
                <a id="cart__checkout_btn" href="/it/checkout" class="btn btn--has-icon-after cart__continue-btn" style="width:100%;">Procedi al Checkout</a>
            </div>
        </div>
    </div>
</section>

Aggiungi il JavaScript necessario per recuperare e aggiornare i dati del carrello:

<script>
    fetch('/cart.js')
        .then((resp) => resp.json())
        .then((data) => {
            if (data.items.length > 0) {
                data.items.forEach(function(product) {
                    document.getElementById('cart__drawer_items').innerHTML += '<img src="' + product.featured_image.url + '" alt="' + product.featured_image.alt + '"><h5>' + product.title + '</h5><p>' + product.quantity + ' x ' + Shopify.formatMoney(product.line_price) + '</p>';
                });
                document.getElementById('cart__total_price').innerHTML = Shopify.formatMoney(data.total_price);
            } else {
                document.getElementById('cart__drawer_items').innerHTML = '<p>Il carrello è vuoto</p>';
            }
        });
</script>

Passo 4: Riferisci il Cassetto nel Tuo Tema

Apri theme.liquid e includi i file CSS e JavaScript che hai creato nella sezione <head>:

{{ 'drawer.css' | asset_url | stylesheet_tag }}
{{ 'drawer.js' | asset_url | script_tag }}

Riferisci la tua sezione drawer.liquid all'interno del tag <body>:
```
{% section 'drawer' %}
```

Passo 5: Attiva il Cassetto dalla Testata

Apri il file header.liquid nella cartella Sections.

Cerca il tag di ancoraggio associato alla tua icona del carrello e modificalo per attivare il cassetto in questo modo:

<a href="#" class="site-header__icon site-header__cart" data-drawer-trigger aria-controls="drawer-name" aria-expanded="false">
    {% include 'icon-cart' %}
    <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
    <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}">
        <span data-cart-count>{{ cart.item_count }}</span>
    </div>
</a>

Salva tutte le modifiche.

Testare il Tuo Cassetto del Carrello

Dopo aver completato i passaggi, è fondamentale testare il cassetto del carrello nel tuo negozio Shopify:

Apri il tuo negozio in una nuova scheda.
Aggiungi un prodotto al tuo carrello.
Clicca sull'icona del carrello nella testata e osserva la funzionalità del cassetto.
Assicurati che il carrello si aggiorni dinamicamente e che il prezzo totale si rifletta correttamente.

Migliori Pratiche per i Cassetti del Carrello

Per ottimizzare l'efficacia del tuo cassetto del carrello, considera le seguenti migliori pratiche:

Design User-Friendly: Assicurati che il cassetto del carrello sia visivamente attraente e facile da navigare. Usa tipografia chiara, spaziatura appropriata e posizionamenti dei pulsanti intuitivi.
Design Reattivo: Testa il tuo cassetto del carrello su diversi dispositivi e dimensioni di schermo per garantire un'esperienza senza interruzioni per tutti gli utenti, in particolare per gli acquirenti mobili.
Aggiornamenti in Tempo Reale: Implementa funzionalità che consentano ai clienti di aggiornare le quantità o rimuovere articoli direttamente all'interno del cassetto senza aggiornare la pagina.
Incitare a Vendite Aggiuntive: Usa il cassetto del carrello per mostrare suggerimenti di upsell o cross-sell, attirando i clienti ad aggiungere più articoli al loro carrello.
Chiare Call to Action: Assicurati che il pulsante di checkout si distingua ed sia facilmente accessibile all'interno del cassetto, incoraggiando gli utenti a completare i loro acquisti.

Conclusione

Creare un cassetto del carrello in Shopify è una mossa strategica che può migliorare significativamente l'esperienza di shopping per i tuoi clienti. Seguendo i passaggi delineati in questa guida, puoi implementare un cassetto del carrello personalizzato, efficiente e user-friendly che tiene i clienti coinvolti e li incoraggia a completare i loro acquisti.

Poiché l'e-commerce continua a evolversi, garantire che il tuo negozio soddisfi le aspettative degli acquirenti moderni è fondamentale. Un cassetto del carrello ben progettato non solo migliora l'esperienza utente, ma serve anche come uno strumento potente per aumentare i tassi di conversione e incrementare le vendite.

Se stai cercando ulteriore assistenza per ottimizzare il tuo negozio Shopify, considera di esplorare i servizi di Praella. La loro esperienza in Esperienza Utente & Design, Sviluppo Web & App e Strategia, Continuità e Crescita può aiutarti a creare esperienze di shopping indimenticabili che risuonano con i clienti.

Pronto a migliorare il tuo negozio Shopify? Inizia a implementare il tuo cassetto del carrello oggi e vedrai la differenza che fa!

FAQ

Che cos'è un cassetto del carrello?

Un cassetto del carrello è una funzionalità dell'interfaccia nei negozi online che consente ai clienti di visualizzare il contenuto del proprio carrello senza navigare via dalla pagina attuale. Di solito scorre da un lato e fornisce una panoramica rapida degli articoli aggiunti al carrello.

In che modo un cassetto del carrello migliora l'esperienza utente?

Un cassetto del carrello migliora l'esperienza utente permettendo ai clienti di visualizzare gli articoli del carrello senza lasciare la loro sessione di navigazione attuale, promuovendo un viaggio di shopping più fluido e riducendo i tassi di abbandono del carrello.

Posso personalizzare il design del mio cassetto del carrello?

Sì, puoi personalizzare il design del tuo cassetto del carrello con CSS per assicurarti che si allinei con l'estetica del tuo marchio e fornisca un'interfaccia utente coinvolgente.

Quali competenze tecniche sono necessarie per creare un cassetto del carrello?

Una conoscenza di base di HTML, CSS e JavaScript è utile per creare un cassetto del carrello. Shopify fornisce documentazione e risorse approfondite per assistere i proprietari dei negozi nell'implementazione di funzionalità personalizzate.

Come posso testare il mio cassetto del carrello dopo l'implementazione?

Dopo aver implementato il cassetto del carrello, aggiungi articoli al tuo carrello, clicca sull'icona del carrello per attivare il cassetto e assicurati che gli articoli e il prezzo totale si aggiornino correttamente senza ricaricare la pagina. Testa su vari dispositivi per garantire reattività e funzionalità.

È necessario utilizzare app di terze parti per creare un cassetto del carrello?

No, puoi creare un cassetto del carrello utilizzando codice personalizzato senza fare affidamento su app di terze parti. Questo consente una maggiore flessibilità e personalizzazione in base alle esigenze del tuo negozio.

Come creare un'anta del carrello in Shopify.