~ 1 min read

Wie man eine Warenkorb-Schublade in Shopify erstellt.

How to Create a Cart Drawer in Shopify

Inhaltsverzeichnis

  1. Einführung
  2. Verstehen der Warenkorb-Schublade
  3. Erstellung einer Warenkorb-Schublade in Shopify
  4. Best Practices für Warenkorb-Schubladen
  5. Fazit
  6. Häufig gestellte Fragen

Einführung

Stellen Sie sich vor, ein Kunde durchstöbert Ihren Online-Shop und fügt begeistert Artikel zu seinem Warenkorb hinzu, nur um abrupt auf eine separate Warenkorbseite weitergeleitet zu werden. Diese Erfahrung kann abrupt sein und oft zu abgebrochenen Warenkörben und verlorenen Verkäufen führen. Was wäre, wenn es einen nahtloseren Weg gäbe, für Kunden ihren Warenkorb zu betrachten, ohne ihr Einkaufserlebnis zu unterbrechen? Willkommen bei der Warenkorb-Schublade—einer gleitenden, vom Bildschirmrand herausragenden Schublade, die die Benutzererfahrung verbessert und die Konversionsraten steigert.

Eine Warenkorb-Schublade ermöglicht es Kunden, ihre ausgewählten Artikel und Gesamtkosten anzuzeigen, ohne die aktuelle Seite zu verlassen, und fördert ein ununterbrochenes Einkaufserlebnis. In der heutigen wettbewerbsintensiven E-Commerce-Landschaft ist es entscheidend, diesen Aspekt Ihres Shops zu optimieren, um Kunden zu halten und den Umsatz zu maximieren.

In diesem Beitrag werden wir alles durchgehen, was Sie über die Erstellung einer Warenkorb-Schublade in Shopify wissen müssen. Wir werden die Vorteile der Implementierung dieser Funktion skizzieren, eine Schritt-für-Schritt-Anleitung zur Erstellung bereitstellen und diskutieren, wie Sie sie Teil Ihrer Benutzererfahrungsstrategie machen können. Am Ende werden Sie ein umfassendes Verständnis dafür haben, wie Sie eine Warenkorb-Schublade in Shopify erstellen, damit Ihr Shop benutzerfreundlich und effizient bleibt.

Was Sie lernen werden

  • Die Bedeutung einer Warenkorb-Schublade im E-Commerce.
  • Wie Sie eine benutzerdefinierte Warenkorb-Schublade in Ihrem Shopify-Shop implementieren, ohne Drittanbieter-Apps zu verwenden.
  • Best Practices zur Verbesserung der Benutzererfahrung mit Ihrer Warenkorb-Schublade.

Lasst uns anfangen!

Verstehen der Warenkorb-Schublade

Was ist eine Warenkorb-Schublade?

Eine Warenkorb-Schublade, oft auch als herausziehbarer Warenkorb oder Mini-Warenkorb bezeichnet, ist ein Interface-Element, das es Kunden ermöglicht, die Inhalte ihres Einkaufswagens anzusehen, ohne die aktuelle Seite zu verlassen. Anstelle die Benutzer auf eine eigene Warenkorbseite weiterzuleiten, schiebt sich die Schublade von der Seite des Bildschirms herein und bietet eine bequeme Übersicht über die ausgewählten Artikel. Dieser Ansatz rationalisiert nicht nur das Einkaufserlebnis, sondern ermutigt die Benutzer auch, weiterhin durch Ihren Shop zu stöbern, was letztendlich zu höheren Konversionsraten führt.

Die Bedeutung einer Warenkorb-Schublade

Eine Warenkorb-Schublade in Ihrem Shopify-Shop zu haben, bringt zahlreiche Vorteile mit sich:

  1. Verbesserte Benutzererfahrung: Käufer können schnell den Inhalt ihres Warenkorbs einsehen, ohne ihren stöbernden Fluss zu stören.

  2. Reduzierte Warenkorbabbrüche: Indem es den Kunden erleichtert wird, ihre Artikel und Gesamtkosten zu sehen, kann eine Warenkorb-Schublade helfen, die Wahrscheinlichkeit von Warenkorbabbrüchen zu verringern.

  3. Steigerung des Umsatzes: Ein reibungsloser Checkout-Prozess kann zu mehr abgeschlossenen Transaktionen führen und sich positiv auf Ihre Gewinnspanne auswirken.

  4. Mobile Optimierung: Da immer mehr Verbraucher über mobile Geräte einkaufen, bietet eine Warenkorb-Schublade eine benutzerfreundlichere Erfahrung auf kleineren Bildschirmen.

  5. Anpassungsoptionen: Eine gut gestaltete Warenkorb-Schublade kann an das Branding Ihres Shops angepasst werden, wodurch Ihre gesamte Ästhetik verbessert wird.

Erstellung einer Warenkorb-Schublade in Shopify

Voraussetzungen

Bevor Sie in den Erstellungprozess eintauchen, stellen Sie sicher, dass Sie Folgendes haben:

  • Zugang zum Admin-Panel Ihres Shopify-Shops.
  • Grundlagenkenntnisse in HTML, CSS und JavaScript.
  • Ein Theme, das benutzerdefiniertes Codieren ermöglicht (die meisten Shopify-Themes tun dies).

Schritt-für-Schritt-Anleitung

Schritt 1: Zugriff auf den Shopify-Code-Editor

  1. Loggen Sie sich in Ihr Shopify-Admin-Panel ein.
  2. Navigieren Sie im linken Sidebar zu Online-Shop und klicken Sie auf Themen.
  3. Finden Sie Ihr aktives Theme und klicken Sie auf Aktionen > Code bearbeiten.

Schritt 2: Erstellen Sie die erforderlichen Dateien

  1. Im Assets Ordner, erstellen Sie zwei neue Dateien: drawer.css und drawer.js.

  2. Öffnen Sie drawer.css und fügen Sie die folgenden Stile hinzu, um das Aussehen Ihrer Warenkorb-Schublade zu verwalten:

    .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. Nächster Schritt: Öffnen Sie drawer.js und fügen Sie das folgende JavaScript hinzu, um die Funktionalität der Schublade zu verwalten:

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

Schritt 3: Erstellen Sie die HTML-Struktur

  1. Im Sections Ordner erstellen Sie eine neue Datei mit dem Namen drawer.liquid.

  2. Fügen Sie die folgende HTML-Struktur ein, um das Layout der Schublade zu definieren:

    <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">Einkaufen fortsetzen</div>
            <button class="drawer__close" data-drawer-close aria-label="Schublade schließen"></button>
        </div>
        <div class="drawer__content" id="cart__drawer">
            <div id="cart__drawer_items"></div>
            <div style="margin-top: 50px">
                <h4>Gesamt: <span id="cart__total_price"></span></h4>
                <a id="cart__checkout_btn" href="/de/checkout" class="btn btn--has-icon-after cart__continue-btn" style="width:100%;">Zur Kasse gehen</a>
            </div>
        </div>
    </div>
</section>

  3. Fügen Sie das notwendige JavaScript hinzu, um die Warenkorbdaten abzurufen und zu aktualisieren:

    <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>Warenkorb ist leer</p>';
            }
        });
</script>

Schritt 4: Verweisen Sie auf die Schublade in Ihrem Theme

  1. Öffnen Sie theme.liquid und fügen Sie die CSS- und JavaScript-Dateien, die Sie erstellt haben, im <head>-Abschnitt ein:

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

  2. Verweisen Sie auf Ihren drawer.liquid-Abschnitt innerhalb des <body>-Tags:

    {% section 'drawer' %}

Schritt 5: Aktivieren Sie die Schublade aus dem Header

  1. Öffnen Sie die Datei header.liquid im Sections Ordner.

  2. Locate the anchor tag associated with your cart icon and modify it to trigger the drawer like so:

    <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. Speichern Sie alle Änderungen.

Testen Ihrer Warenkorb-Schublade

Nachdem Sie die Schritte abgeschlossen haben, ist es entscheidend, die Warenkorb-Schublade in Ihrem Shopify-Shop zu testen:

  1. Öffnen Sie Ihren Shop in einem neuen Tab.
  2. Fügen Sie ein Produkt zu Ihrem Warenkorb hinzu.
  3. Klicken Sie auf das Warenkorb-Symbol in der Kopfzeile und beobachten Sie die Funktionalität der Schublade.
  4. Stellen Sie sicher, dass sich der Warenkorb dynamisch aktualisiert und dass der Gesamtpreis genau angezeigt wird.

Best Practices für Warenkorb-Schubladen

Um die Effektivität Ihrer Warenkorb-Schublade zu optimieren, sollten Sie die folgenden Best Practices berücksichtigen:

  • Benutzerfreundliches Design: Stellen Sie sicher, dass die Warenkorb-Schublade visuell ansprechend und einfach zu navigieren ist. Verwenden Sie eine klare Typografie, angemessene Abstände und intuitive Buttonplatzierungen.

  • Responsive Design: Testen Sie Ihre Warenkorb-Schublade auf verschiedenen Geräten und Bildschirmgrößen, um sicherzustellen, dass alle Benutzer, insbesondere mobile Käufer, ein nahtloses Erlebnis haben.

  • Echtzeit-Updates: Implementieren Sie Funktionen, die es den Kunden ermöglichen, Mengen zu aktualisieren oder Artikel direkt in der Schublade zu entfernen, ohne die Seite zu aktualisieren.

  • Zusätzliche Verkäufe fördern: Nutzen Sie die Warenkorb-Schublade, um Upsell- oder Cross-Sell-Vorschläge anzuzeigen, die die Kunden dazu verleiten, weitere Artikel zu ihrem Warenkorb hinzuzufügen.

  • Klare Handlungsaufforderungen: Stellen Sie sicher, dass die Schaltfläche zur Kasse hervorsticht und leicht zugänglich ist, um die Benutzer zu ermutigen, ihre Käufe abzuschließen.

Fazit

Die Erstellung einer Warenkorb-Schublade in Shopify ist ein strategischer Schritt, der das Einkaufserlebnis Ihrer Kunden erheblich verbessern kann. Durch Befolgung der in diesem Leitfaden skizzierten Schritte können Sie eine benutzerdefinierte, effiziente und benutzerfreundliche Warenkorb-Schublade implementieren, die die Kunden bindet und sie ermutigt, ihre Einkäufe abzuschließen.

Da sich der E-Commerce ständig weiterentwickelt, ist es von größter Bedeutung, sicherzustellen, dass Ihr Shop den Erwartungen moderner Käufer entspricht. Eine gut gestaltete Warenkorb-Schublade verbessert nicht nur die Benutzererfahrung, sondern dient auch als leistungsstarkes Werkzeug zur Steigerung der Konversionsraten und zur Umsatzsteigerung.

Wenn Sie weitere Unterstützung bei der Optimierung Ihres Shopify-Shops suchen, sollten Sie die Dienstleistungen von Praella in Betracht ziehen. Ihre Expertise in Benutzererfahrung & Design, Web- & App-Entwicklung und Strategie, Kontinuität und Wachstum kann Ihnen dabei helfen, unvergessliche Einkaufserlebnisse zu schaffen, die bei Kunden Resonanz finden.

Bereit, Ihren Shopify-Shop zu verbessern? Beginnen Sie noch heute mit der Implementierung Ihrer Warenkorb-Schublade und sehen Sie den Unterschied, den es macht!

Häufig gestellte Fragen

Was ist eine Warenkorb-Schublade?

Eine Warenkorb-Schublade ist ein Interface-Feature in Online-Shops, das es Kunden ermöglicht, den Inhalt ihres Warenkorbs anzusehen, ohne die aktuelle Seite zu verlassen. Sie schiebt sich typischerweise von der Seite herein und bietet eine schnelle Übersicht über die dem Warenkorb hinzugefügten Artikel.

Wie verbessert eine Warenkorb-Schublade die Benutzererfahrung?

Eine Warenkorb-Schublade verbessert die Benutzererfahrung, indem sie es den Kunden ermöglicht, ihre Warenkorbartikel anzusehen, ohne ihre aktuelle Browsersitzung zu verlassen, was einen reibungsloseren Einkauf fördert und die Abbruchraten von Warenkörben senkt.

Kann ich das Design meiner Warenkorb-Schublade anpassen?

Ja, Sie können das Design Ihrer Warenkorb-Schublade mit CSS anpassen, um sicherzustellen, dass es mit der Ästhetik Ihrer Marke übereinstimmt und eine ansprechende Benutzeroberfläche bietet.

Welche technischen Fähigkeiten benötige ich, um eine Warenkorb-Schublade zu erstellen?

Ein grundlegendes Wissen in HTML, CSS und JavaScript ist hilfreich, um eine Warenkorb-Schublade zu erstellen. Shopify bietet umfassende Dokumentation und Ressourcen, um Shop-Besitzern bei der Implementierung benutzerdefinierter Funktionen zu helfen.

Wie kann ich meine Warenkorb-Schublade nach der Implementierung testen?

Fügen Sie nach der Implementierung der Warenkorb-Schublade Artikel zu Ihrem Warenkorb hinzu, klicken Sie auf das Warenkorb-Symbol, um die Schublade zu aktivieren, und stellen Sie sicher, dass sich die Artikel und der Gesamtpreis korrekt aktualisieren, ohne die Seite zu aktualisieren. Testen Sie auf verschiedenen Geräten, um die Reaktionsfähigkeit und Funktionalität sicherzustellen.

Ist es notwendig, Drittanbieter-Apps zur Erstellung einer Warenkorb-Schublade zu verwenden?

Nein, Sie können eine Warenkorb-Schublade mithilfe benutzerdefinierter Codes erstellen, ohne auf Drittanbieter-Apps angewiesen zu sein. Dies ermöglicht greater Flexibilität und Anpassung basierend auf den Bedürfnissen Ihres Shops.

Previous
Wie man einen Buy-Button in Shopify erstellt: Ein umfassender Leitfaden
Next
Wie man eine Checkout-Seite in Shopify erstellt
die vier Eins Eins

Die Freisetzung Ihres Ecommerce-Erfolgs

Shopify POS für Anfänger: Erfolgreiche Einrichtung
Shopify POS für Anfänger: Erfolgreiche Einrichtung
Read Article
s