~ 1 min read

Hoe een winkelwagentekst vak in Shopify te maken.

How to Create a Cart Drawer in Shopify

Inhoudsopgave

  1. Inleiding
  2. Begrijpen van de winkelwagentrek
  3. Een winkelwagentrek maken in Shopify
  4. Beste praktijken voor winkelwagentrekken
  5. Conclusie
  6. FAQ

Inleiding

Stel je voor dat een klant door je online winkel bladert, enthousiast artikelen aan hun winkelwagentje toevoegt, om vervolgens abrupt naar een aparte winkelwagentpagina te worden geleid. Deze ervaring kan schokkend zijn, wat vaak leidt tot verlaten winkelwagentjes en verloren verkopen. Wat als er een meer naadloze manier zou zijn voor klanten om hun winkelwagentje te bekijken zonder hun winkelervaring te onderbreken? Maak kennis met de winkelwagentrek—een schuif-, off-canvas winkelwagent die de gebruikerservaring verbetert en de conversiepercentages verhoogt.

Een winkelwagentrek stelt klanten in staat om hun geselecteerde artikelen en totale kosten te bekijken zonder de huidige pagina te verlaten, wat een ononderbroken winkelervaring bevordert. In het huidige competitieve e-commerce landschap is het optimaliseren van dit aspect van je winkel cruciaal voor het behouden van klanten en het maximaliseren van de verkopen.

In deze post zullen we alles bespreken wat je moet weten over het maken van een winkelwagentrek in Shopify. We zullen de voordelen van het implementeren van deze functie schetsen, een stapsgewijze gids voor de creatie bieden en bespreken hoe je het deel kunt laten uitmaken van je gebruikerservaringstrategie. Tegen het einde zul je een uitgebreide kennis hebben van hoe je een winkelwagentrek in Shopify maakt, zodat je winkel gebruiksvriendelijk en efficiënt blijft.

Wat je zult leren

  • De betekenis van een winkelwagentrek in e-commerce.
  • Hoe je een aangepaste winkelwagentrek op je Shopify-winkel kunt implementeren zonder externe apps te gebruiken.
  • Beste praktijken om de gebruikerservaring met je winkelwagentrek te verbeteren.

Laten we aan de slag gaan!

Begrijpen van de winkelwagentrek

Wat is een winkelwagentrek?

Een winkelwagentrek, vaak een schuif-winkelwagent of mini-winkelwagent genoemd, is een interface-element waarmee klanten de inhoud van hun winkelwagentje kunnen bekijken zonder van de huidige pagina te navigeren. In plaats van gebruikers om te leiden naar een specifieke winkelwagentpagina, schuift de trek van de zijkant van het scherm naar binnen en presenteert een handig overzicht van geselecteerde items. Deze aanpak stroomlijnt niet alleen de winkelervaring maar moedigt gebruikers ook aan om je winkel verder te verkennen, wat uiteindelijk leidt tot hogere conversiepercentages.

Het belang van een winkelwagentrek

Het hebben van een winkelwagentrek in je Shopify-winkel heeft tal van voordelen:

  1. Verbeterde gebruikerservaring: Klanten kunnen snel hun winkelwagentinhoud bekijken zonder hun browsestroom te verstoren.

  2. Vermindering van winkelwagent-abandonment: Door het gemakkelijker te maken voor klanten om hun artikelen en totale kosten te zien, kan een winkelwagentrek helpen de kans op het verlaten van het winkelwagentje te verminderen.

  3. Verhoogde verkopen: Een soepel afrekenproces kan leiden tot meer voltooide transacties, wat een positief effect heeft op je winst.

  4. Mobiele optimalisatie: Met meer consumenten die op mobiele apparaten winkelen, biedt een winkelwagentrek een vriendelijkere ervaring op kleinere schermen.

  5. Aanpassingsmogelijkheden: Een goed ontworpen winkelwagentrek kan worden aangepast om overeen te komen met de branding van je winkel, waardoor je algehele esthetiek wordt versterkt.

Een winkelwagentrek maken in Shopify

Vereisten

Voordat je aan het creatieproces begint, zorg ervoor dat je het volgende hebt:

  • Toegang tot het beheerderspaneel van je Shopify-winkel.
  • Basiskennis van HTML, CSS en JavaScript.
  • Een thema dat aangepaste codering toelaat (de meeste Shopify-thema's doen dat).

Stapsgewijze gids

Stap 1: Toegang tot je Shopify-code-editor

  1. Log in op je Shopify-beheerderspaneel.
  2. Navigeer in de linkerzijbalk naar Online Winkel en klik op Thema's.
  3. Zoek je actieve thema en klik op Acties > Code bewerken.

Stap 2: Maak de benodigde bestanden

  1. In de Assets-map, maak twee nieuwe bestanden aan: drawer.css en drawer.js.

  2. Open drawer.css en voeg de volgende stijlen toe om het uiterlijk van je winkelwagentrek te beheren:

    .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);
}

  3. Open vervolgens drawer.js en voeg de volgende JavaScript in om de functionaliteit van de trek te beheren:

    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();

Stap 3: Maak de HTML-structuur

  1. In de Sections-map, maak een nieuw bestand aan met de naam drawer.liquid.

  2. Voeg de volgende HTML-structuur in om de lay-out van de trek te definiëren:

    <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">Doorgaan met winkelen</div>
            <button class="drawer__close" data-drawer-close aria-label="Sluit trek"></button>
        </div>
        <div class="drawer__content" id="cart__drawer">
            <div id="cart__drawer_items"></div>
            <div style="margin-top: 50px">
                <h4>Totaal: <span id="cart__total_price"></span></h4>
                <a id="cart__checkout_btn" href="/nl/checkout" class="btn btn--has-icon-after cart__continue-btn" style="width:100%;">Ga verder naar afrekenen</a>
            </div>
        </div>
    </div>
</section>

  3. Voeg de noodzakelijke JavaScript toe om winkelwagentgegevens op te halen en bij te werken:

    <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>Winkelwagentje is leeg</p>';
            }
        });
</script>

Stap 4: Verwijs de trek in je thema

  1. Open theme.liquid en voeg de CSS- en JavaScript-bestanden die je hebt gemaakt toe in de <head> sectie:

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

  2. Verwijs naar je drawer.liquid sectie binnen de <body> tag:

    {% section 'drawer' %}

Stap 5: Activeer de trek vanuit de header

  1. Open het header.liquid bestand in de Sections map.

  2. Zoek de anker-tag die is gekoppeld aan je winkelwagent-icoon en pas deze aan om de trek te activeren zoals volgt:

    <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>

  3. Sla alle wijzigingen op.

Testing je winkelwagentrek

Na het voltooien van de stappen is het cruciaal om de winkelwagentrek op je Shopify-winkel te testen:

  1. Open je winkel in een nieuw tabblad.
  2. Voeg een product aan je winkelwagentje toe.
  3. Klik op het winkelwagentje-icoon in de header en observeer de functionaliteit van de trek.
  4. Zorg ervoor dat het winkelwagentje dynamisch wordt bijgewerkt en dat de totale prijs accuraat wordt weergegeven.

Beste praktijken voor winkelwagentrekken

Om de effectiviteit van je winkelwagentrek te optimaliseren, overweeg de volgende beste praktijken:

  • Gebruiksvriendelijk ontwerp: Zorg ervoor dat de winkelwagentrek visueel aantrekkelijk is en gemakkelijk te navigeren. Gebruik duidelijke typografie, passende spatiëring en intuïtieve knopplaatsingen.

  • Responsief ontwerp: Test je winkelwagentrek op verschillende apparaten en schermformaten om een naadloze ervaring voor alle gebruikers te waarborgen, met name mobiele shoppers.

  • Updates in real-time: Implementeer functionaliteit waarmee klanten hoeveelheden kunnen bijwerken of artikelen direct in de trek kunnen verwijderen zonder de pagina te verversen.

  • Extra verkopen aanmoedigen: Gebruik de winkelwagentrek om upsell- of cross-sellvoorstellen weer te geven, waardoor klanten worden verleid om meer artikelen aan hun winkelwagentje toe te voegen.

  • Duidelijke calls to action: Zorg ervoor dat de afrekenknop opvalt en gemakkelijk toegankelijk is binnen de trek, zodat gebruikers worden aangemoedigd om hun aankopen te voltooien.

Conclusie

Het creëren van een winkelwagentrek in Shopify is een strategische zet die de winkelervaring voor je klanten aanzienlijk kan verbeteren. Door de stappen in deze gids te volgen, kun je een aangepaste, efficiënte en gebruiksvriendelijke winkelwagentrek implementeren die klanten betrokken houdt en hen aanmoedigt om hun aankopen te voltooien.

Terwijl de e-commerce blijft evolueren, is het essentieel dat je winkel voldoet aan de verwachtingen van moderne shoppers. Een goed ontworpen winkelwagentrek verbetert niet alleen de gebruikerservaring, maar dient ook als een krachtig hulpmiddel om conversiepercentages te verhogen en de verkopen te stimuleren.

Als je op zoek bent naar verdere assistentie bij het optimaliseren van je Shopify-winkel, overweeg dan om de diensten van Praella te verkennen. Hun expertise in Gebruikservaring & Ontwerp, Web & App Ontwikkeling en Strategie, Continuïteit en Groei kan je helpen onvergetelijke winkelervaringen te creëren die resoneren met klanten.

Klaar om je Shopify-winkel te verbeteren? Begin vandaag nog met het implementeren van je winkelwagentrek en zie het verschil dat het maakt!

FAQ

Wat is een winkelwagentrek?

Een winkelwagentrek is een interfacefunctie in online winkels die klanten in staat stelt om de inhoud van hun winkelwagentje te bekijken zonder van de huidige pagina te navigeren. Het schuift meestal van de zijkant in en biedt een snel overzicht van de aan het winkelwagentje toegevoegde artikelen.

Hoe verbetert een winkelwagentrek de gebruikerservaring?

Een winkelwagentrek verbetert de gebruikerservaring door klanten de mogelijkheid te bieden hun krantitems te bekijken zonder hun huidige browsesessie te verlaten, waardoor een soepelere winkelervaring wordt bevorderd en het aantal verlaten winkelwagentjes wordt verminderd.

Kan ik het ontwerp van mijn winkelwagentrek aanpassen?

Ja, je kunt het ontwerp van je winkelwagentrek aanpassen met CSS zodat het aansluit bij de esthetiek van je merk en een aantrekkelijke gebruikersinterface biedt.

Welke technische vaardigheden heb ik nodig om een winkelwagentrek te maken?

Basiskennis van HTML, CSS en JavaScript is nuttig voor het maken van een winkelwagentrek. Shopify biedt uitgebreide documentatie en middelen om winkel eigenaren te helpen bij het implementeren van aangepaste functies.

Hoe kan ik mijn winkelwagentrek na implementatie testen?

Na het implementeren van de winkelwagentrek, voeg artikelen toe aan je winkelwagentje, klik op het winkelwagentje-icoon om de trek te activeren en zorg ervoor dat de artikelen en de totale prijs correct worden bijgewerkt zonder de pagina te vernieuwen. Test op verschillende apparaten om de responsiviteit en functionaliteit te waarborgen.

Is het noodzakelijk om externe apps te gebruiken voor het maken van een winkelwagentrek?

Nee, je kunt een winkelwagentrek maken met aangepaste code zonder afhankelijk te zijn van externe apps. Dit biedt meer flexibiliteit en aanpassing op basis van de behoeften van je winkel.

Previous
Hoe een Koopknop te Maken in Shopify: Een Uitgebreide Gids
Next
Hoe een Afrekenpagina in Shopify te Maken
de vier één één

Het ontsluiten van uw e-commerce succes

Shopify POS voor beginners: Succesvol instellen
Shopify POS voor beginners: Succesvol instellen
Read Article
s