~ 1 min read

Hvordan man opretter en indkøbskurvskuffe i Shopify.

How to Create a Cart Drawer in Shopify

Indholdsfortegnelse

  1. Introduktion
  2. Forståelse af kurvskuffen
  3. Oprettelse af en kurvskuffe i Shopify
  4. Bedste praksis for kurvskuffer
  5. Konklusion
  6. FAQ

Introduktion

Forestil dig en kunde, der browser din online butik, spændt på at tilføje varer til deres kurv, kun for at blive abrupt omdirigeret til en separat kurvside. Denne oplevelse kan være chokerende og ofte føre til forladte kurve og tabt salg. Hvad hvis der var en mere sømløs måde for kunderne at se deres kurv på uden at afbryde deres shoppingoplevelse? Indfør kurvskuffen - en glidende, off-canvas kurv, der forbedrer brugeroplevelsen og øger konverteringsraterne.

En kurvskuffe gør det muligt for kunderne at se deres valgte varer og samlede omkostninger uden at forlade den aktuelle side, hvilket fremmer en uafbrudt shoppingrejse. I dagens konkurrenceprægede e-handelslandskab er det afgørende at optimere denne del af din butik for at bevare kunder og maksimere salget.

I dette indlæg vil vi dykke ned i alt, hvad du behøver at vide om at oprette en kurvskuffe i Shopify. Vi vil skitsere fordelene ved at implementere denne funktion, give en trin-for-trin-guide til dens oprettelse og diskutere, hvordan du kan gøre det til en del af din brugeroplevelsesstrategi. Ved slutningen vil du have en omfattende forståelse af, hvordan man opretter en kurvskuffe i Shopify, så din butik forbliver brugervenlig og effektiv.

Hvad du vil lære

  • Betydningen af en kurvskuffe i e-handel.
  • Hvordan man implementerer en brugerdefineret kurvskuffe på din Shopify-butik uden at bruge tredjepartsapps.
  • Bedste praksis for at forbedre brugeroplevelsen med din kurvskuffe.

Lad os komme i gang!

Forståelse af kurvskuffen

Hvad er en kurvskuffe?

En kurvskuffe, ofte omtalt som en slide-out kurv eller mini-kurv, er et interfacedel, der giver kunderne mulighed for at se indholdet af deres indkøbskurv uden at navigere væk fra den aktuelle side. I stedet for at omdirigere brugerne til en dedikeret kurvside, glider skuffen ind fra siden af skærmen og præsenterer et bekvemt overblik over valgte varer. Denne tilgang strømliner ikke kun shoppingoplevelsen, men opfordrer også brugerne til at fortsætte med at udforske din butik, hvilket i sidste ende fører til højere konverteringsrater.

Vigtigheden af en kurvskuffe

At have en kurvskuffe i din Shopify-butik medfører mange fordele:

  1. Forbedret brugeroplevelse: Shoppere kan hurtigt se indholdet af deres kurv uden at forstyrre deres browsingflow.

  2. Reduceret kurv-forladelse: Ved at gøre det nemt for kunderne at se deres varer og samlede omkostninger, kan en kurvskuffe hjælpe med at reducere sandsynligheden for kurv-forladelse.

  3. Øget salg: En glidende checkout-proces kan føre til flere gennemførte transaktioner, hvilket positivt påvirker dit resultat.

  4. Mobiloptimering: Med flere forbrugere, der handler på mobile enheder, giver en kurvskuffe en mere brugervenlig oplevelse på mindre skærme.

  5. Tilpasningsmuligheder: En veludformet kurvskuffe kan tilpasses for at matche din butiks branding og forbedre dit samlede æstetiske udtryk.

Oprettelse af en kurvskuffe i Shopify

Forudsætninger

Før du dykker ned i oprettelsesprocessen, skal du sikre dig, at du har følgende:

  • Adgang til din Shopify-butik's adminpanel.
  • Grundlæggende kendskab til HTML, CSS og JavaScript.
  • Et tema, der tillader brugerdefineret kodning (de fleste Shopify-temaer gør).

Trin-for-trin-guide

Trin 1: Adgang til din Shopify-kodeditor

  1. Log ind på dit Shopify-adminpanel.
  2. I venstre sidepanel navigerer du til Online butik og klikker på Temer.
  3. Find dit aktive tema, og klik på Handlinger > Rediger kode.

Trin 2: Oprettelse af de nødvendige filer

  1. I Assets-mappen skal du oprette to nye filer: drawer.css og drawer.js.

  2. Åbn drawer.css og tilføj følgende stilarter for at styre udseendet af din kurvskuffe:

    .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. Åbn derefter drawer.js og indsæt følgende JavaScript for at styre funktionaliteten af skuffen:

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

Trin 3: Oprettelse af HTML-strukturen

  1. I Sections-mappen skal du oprette en ny fil med navnet drawer.liquid.

  2. Indsæt følgende HTML-struktur for at definere skuffens layout:

    <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">Fortsæt med at shoppe</div>
            <button class="drawer__close" data-drawer-close aria-label="Luk skuffen"></button>
        </div>
        <div class="drawer__content" id="cart__drawer">
            <div id="cart__drawer_items"></div>
            <div style="margin-top: 50px">
                <h4>Total: <span id="cart__total_price"></span></h4>
                <a id="cart__checkout_btn" href="/da/checkout" class="btn btn--has-icon-after cart__continue-btn" style="width:100%;">Gå til Checkout</a>
            </div>
        </div>
    </div>
</section>

  3. Tilføj den nødvendige JavaScript til at hente og opdatere kurvdata:

    <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>Kurven er tom</p>';
            }
        });
</script>

Trin 4: Referere til skuffen i dit tema

  1. Åbn theme.liquid og inkluder de CSS- og JavaScript-filer, du har oprettet i <head>-sektionen:

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

  2. Referere til din drawer.liquid-sektion inden for <body>-tagget:

    {% section 'drawer' %}

Trin 5: Udløse skuffen fra headeren

  1. Åbn header.liquid filen i Sections mappen.

  2. Find anker-tagget, der er tilknyttet dit kurvikon, og modificer det for at udløse skuffen sådan:

    <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. Gem alle ændringer.

Test din kurvskuffe

Efter at have gennemført trinene er det afgørende at teste kurvskuffen på din Shopify-butik:

  1. Åbn din butik i en ny fane.
  2. Tilføj et produkt til din kurv.
  3. Klik på kurvikonet i headeren og observer skuffens funktionalitet.
  4. Sørg for, at kurven opdateres dynamisk, og at den samlede pris afspejler korrekt.

Bedste praksis for kurvskuffer

For at optimere effektiviteten af din kurvskuffe, overvej følgende bedste praksis:

  • Brugervenligt design: Sørg for, at kurvskuffen er visuelt tiltalende og let at navigere. Brug klar typografi, passende afstande og intuitive placeringer af knapperne.

  • Responsivt design: Test din kurvskuffe på forskellige enheder og skærmstørrelser for at sikre en sømløs oplevelse for alle brugere, især mobile shoppere.

  • Real-time opdateringer: Implementer funktionalitet, der giver kunderne mulighed for at opdatere mængder eller fjerne varer direkte i skuffen uden at opdatere siden.

  • Opfordre til yderligere salg: Brug kurvskuffen til at vise upsell- eller cross-sell-forslag, så kunderne fristes til at tilføje flere varer til deres kurv.

  • Klare opfordringer til handling: Sørg for, at checkout-knappen skiller sig ud og er let tilgængelig inden for skuffen, hvilket opfordrer brugerne til at gennemføre deres køb.

Konklusion

At oprette en kurvskuffe i Shopify er et strategisk skridt, der betydeligt kan forbedre shoppingoplevelsen for dine kunder. Ved at følge trinene i denne guide kan du implementere en brugerdefineret, effektiv og brugervenlig kurvskuffe, der holder kunderne engagerede og opmuntrer dem til at gøre deres køb.

Efterhånden som e-handel fortsætter med at udvikle sig, er det vigtigt at sikre, at din butik lever op til forventningerne fra moderne shoppere. En veldesignet kurvskuffe forbedrer ikke kun brugeroplevelsen, men fungerer også som et kraftfuldt værktøj til at øge konverteringsraterne og øge salget.

Hvis du leder efter yderligere hjælp til at optimere din Shopify-butik, kan du overveje at udforske Praellas tjenester. Deres ekspertise inden for Brugeroplevelse & Design, Web & App-udvikling og Strategi, Kontinuitet og Vækst kan hjælpe dig med at skabe uforglemmelige shoppingoplevelser, der resonerer med kunderne.

Er du klar til at forbedre din Shopify-butik? Begynd at implementere din kurvskuffe i dag og se forskellen, den gør!

FAQ

Hvad er en kurvskuffe?

En kurvskuffe er en interfacefunktion i online butikker, der giver kunderne mulighed for at se indholdet af deres kurv uden at navigere væk fra den aktuelle side. Den glider typisk ind fra siden og giver et hurtigt overblik over de varer, der er tilføjet til kurven.

Hvordan forbedrer en kurvskuffe brugeroplevelsen?

En kurvskuffe forbedrer brugeroplevelsen ved at give kunderne mulighed for at se deres kurv uden at forlade deres aktuelle browsing-session, hvilket fremmer en glattere shoppingrejse og reducerer kurv-forladelsesrater.

Kan jeg tilpasse designet af min kurvskuffe?

Ja, du kan tilpasse designet af din kurvskuffe med CSS for at sikre, at det stemmer overens med dit brands æstetik og giver en engagerende brugergrænseflade.

Hvilke tekniske færdigheder har jeg brug for at oprette en kurvskuffe?

Grundlæggende kendskab til HTML, CSS og JavaScript er nyttigt til at oprette en kurvskuffe. Shopify giver omfattende dokumentation og ressourcer til at hjælpe butiksejere med at implementere tilpassede funktioner.

Hvordan kan jeg teste min kurvskuffe efter implementeringen?

Efter implementeringen af kurvskuffen, tilføj varer til din kurv, klik på kurvikonet for at aktivere skuffen, og sørg for, at varerne og den samlede pris opdateres korrekt uden at opdatere siden. Test på forskellige enheder for at sikre responsivitet og funktionalitet.

Er det nødvendigt at bruge tredjepartsapps til at oprette en kurvskuffe?

Nej, du kan oprette en kurvskuffe ved hjælp af brugerdefineret kode uden at stole på tredjepartsapps. Dette giver større fleksibilitet og tilpasning baseret på dine butikbehov.

Previous
Hvordan man opretter en købsknap i Shopify: En omfattende guide
Next
Hvordan man opretter betalingsside i Shopify
den fire en en

Lås op for din e-handels succes

Shopify POS for begyndere: Opsætning til succes
Shopify POS for begyndere: Opsætning til succes
Read Article
s