~ 1 min read

Hvordan lage en handlekurvskuff i Shopify.

How to Create a Cart Drawer in Shopify

Innholdsfortegnelse

  1. Introduksjon
  2. Forståelse av handlekurvskuffen
  3. Opprette en handlekurvskuff i Shopify
  4. Beste praksis for handlekurvskuffer
  5. Konklusjon
  6. FAQ

Introduksjon

Forestill deg en kunde som surfer på nettbutikken din, ivrig etter å legge til varer i kurven, bare for å bli brått omdirigert til en egen handlevognside. Denne opplevelsen kan være forstyrrende, og fører ofte til forlatte handlekurver og tapte salg. Hva om det fantes en mer sømløs måte for kundene å se kurven sin uten å avbryte handleopplevelsen? Her kommer handlekurvskuffen - en glidende, off-canvas kurv som forbedrer brukeropplevelsen og øker konverteringsratene.

En handlekurvskuff lar kundene se de valgte varene og totale kostnader uten å forlate den nåværende siden, noe som fremmer en uavbrutt shoppingreise. I dagens konkurransedyktige e-handelslandskap er det avgjørende å optimalisere dette aspektet av butikken din for å beholde kundene og maksimere salget.

I dette innlegget vil vi gå inn på alt du trenger å vite om å lage en handlekurvskuff i Shopify. Vi vil skissere fordelene ved å implementere denne funksjonen, gi en trinn-for-trinn-guide for oppretting, og diskutere hvordan du kan gjøre den til en del av strategien for brukeropplevelse. På slutten vil du ha en omfattende forståelse av hvordan du lager en handlekurvskuff i Shopify, og sikre at butikken din forblir brukervennlig og effektiv.

Hva du vil lære

  • Betydningen av en handlekurvskuff i e-handel.
  • Hvordan implementere en tilpasset handlekurvskuff på Shopify-butikken din uten å bruke tredjepartsapper.
  • Beste praksis for å forbedre brukeropplevelsen med handlekurvskuffen din.

La oss komme i gang!

Forståelse av handlekurvskuffen

Hva er en handlekurvskuff?

En handlekurvskuff, ofte referert til som en glide-ut kurv eller mini-kurv, er et grensesnitteelement som lar kundene se innholdet i handlekurven uten å navigere bort fra den nåværende siden. I stedet for å omdirigere brukerne til en dedikert handlevognside, glir skuffen inn fra siden av skjermen og presenterer en praktisk oversikt over de valgte varene. Denne tilnærmingen strømlinjeformer ikke bare handleopplevelsen, men oppfordrer også brukerne til å fortsette å utforske butikken din, noe som fører til høyere konverteringsrater.

Betydningen av en handlekurvskuff

Å ha en handlekurvskuff i Shopify-butikken din medfører mange fordeler:

  1. Forbedret brukeropplevelse: Shoppere kan raskt se innholdet i kurven uten å forstyrre surfeopplevelsen.

  2. Redusert forlatelse av kurver: Ved å gjøre det enkelt for kundene å se varene og totale kostnader, kan en handlekurvskuff bidra til å redusere sjansen for forlatte handlekurver.

  3. Økt salg: En jevn sjekkprosess kan føre til flere fullførte transaksjoner, og påvirke bunnlinjen positivt.

  4. Mobiloptimalisering: Med flere forbrukere som handler på mobile enheter, gir en handlekurvskuff en mer brukervennlig opplevelse på mindre skjermer.

  5. Tilpasningsmuligheter: En godt designet handlekurvskuff kan tilpasses for å matche butikkens merkevare, og forbedre den overordnede estetiske.

Opprette en handlekurvskuff i Shopify

Forutsetninger

Før du dykker inn i opprettingsprosessen, sørg for at du har følgende:

  • Tilgang til administrasjonspanelet for Shopify-butikken din.
  • Grunnleggende kunnskaper om HTML, CSS og JavaScript.
  • Et tema som tillater tilpasset koding (de fleste Shopify-temaer gjør det).

Trinn-for-trinn-guide

Trinn 1: Få tilgang til Shopify-kodeeditoren

  1. Logg inn på administrasjonspanelet i Shopify.
  2. I venstre siderute, naviger til Nettbutikk og klikk på Temaer.
  3. Finn ditt aktive tema og klikk på Handlinger > Rediger kode.

Trinn 2: Opprett nødvendige filer

  1. I Assets-mappen, opprett to nye filer: drawer.css og drawer.js.

  2. Åpne drawer.css og legg til følgende stiler for å håndtere utseendet til handlekurvskuffen:

    .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. Neste, åpne drawer.js og sett inn følgende JavaScript for å håndtere funksjonaliteten til 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();

Trinn 3: Opprett HTML-strukturen

  1. I Sections-mappen, opprett en ny fil med navn drawer.liquid.

  2. Sett inn følgende HTML-struktur for å 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">Fortsett å handle</div>
            <button class="drawer__close" data-drawer-close aria-label="Lukk skuff"></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="/no/checkout" class="btn btn--has-icon-after cart__continue-btn" style="width:100%;">Fortsett til betaling</a>
            </div>
        </div>
    </div>
</section>

  3. Legg til nødvendig JavaScript for å hente og oppdatere handlekurvdata:

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

Trinn 4: Referere til skuffen i temaet ditt

  1. Åpne theme.liquid og inkluder CSS- og JavaScript-filene du opprettet i <head>-seksjonen:

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

  2. Referer til drawer.liquid-seksjonen din innenfor <body>-taggen:

    {% section 'drawer' %}

Trinn 5: Utløs skuffen fra hodet

  1. Åpne header.liquid-filen i Sections-mappen.

  2. Finn anker-taggen knyttet til handlekurvikonet ditt og endre den for å utløse skuffen som følger:

    <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. Lagre alle endringer.

Testing av handlekurvskuffen din

Etter å ha fullført trinnene, er det viktig å teste handlekurvskuffen på Shopify-butikken din:

  1. Åpne butikken din i en ny fane.
  2. Legg til et produkt i handlekurven din.
  3. Klikk på handlekurvikonet i hodet og observer skuffens funksjonalitet.
  4. Sørg for at kurven oppdateres dynamisk og at totalprisen reflekteres nøyaktig.

Beste praksis for handlekurvskuffer

For å optimalisere effektiviteten til handlekurvskuffen din, bør du vurdere følgende beste praksiser:

  • Brukervennlig design: Sørg for at handlekurvskuffen er visuelt tiltalende og enkel å navigere. Bruk klar typografi, passende mellomrom og intuitive plasseringer av knapper.

  • Responsivt design: Test handlekurvskuffen på forskjellige enheter og skjermstørrelser for å sikre en sømløs opplevelse for alle brukere, spesielt mobilshoppere.

  • Sanntidsoppdateringer: Implementer funksjonalitet som lar kundene oppdatere kvantiteten eller fjerne varer direkte i skuffen uten å oppdatere siden.

  • Oppfordre til ytterligere salg: Bruk handlekurvskuffen til å vise oppsalg eller kryssalg forslag, som frister kundene til å legge til flere varer til kurven.

  • Klar oppfordring til handling: Sørg for at betalingsknappen skiller seg ut og er lett tilgjengelig i skuffen, slik at brukerne oppfordres til å fullføre kjøpet.

Konklusjon

Å lage en handlekurvskuff i Shopify er et strategisk trekk som kan betydelig forbedre handleopplevelsen for kundene dine. Ved å følge trinnene som er skissert i denne guiden, kan du implementere en tilpasset, effektiv og brukervennlig handlekurvskuff som holder kundene engasjert og oppmuntrer dem til å fullføre kjøpene.

Etter hvert som e-handel fortsetter å utvikle seg, er det avgjørende å sikre at butikken din møter forventningene til moderne shoppere. En velutformet handlekurvskuff forbedrer ikke bare brukeropplevelsen, men fungerer også som et kraftig verktøy for å øke konverteringsratene og øke salget.

Hvis du ser etter ytterligere hjelp til å optimalisere Shopify-butikken din, bør du vurdere å utforske Praellas tjenester. Deres ekspertise innen Brukeropplevelse & Design, Nett- og apputvikling og Strategi, kontinuitet og vekst kan hjelpe deg med å skape uforglemmelige handleopplevelser som resonnerer med kundene.

Klar til å forbedre Shopify-butikken din? Begynn å implementere handlekurvskuffen din i dag og se forskjellen det gjør!

FAQ

Hva er en handlekurvskuff?

En handlekurvskuff er et grensesnittfunksjon i nettbutikker som lar kundene se innholdet i handlekurven uten å navigere bort fra den nåværende siden. Den glir vanligvis inn fra siden og gir en rask oversikt over varene som er lagt til i kurven.

Hvordan forbedrer en handlekurvskuff brukeropplevelsen?

En handlekurvskuff forbedrer brukeropplevelsen ved å la kundene se varene i kurven uten å forlate den nåværende nettleserøkten, noe som fremmer en jevnere handleopplevelse og reduserer antall forlatte kurver.

Kan jeg tilpasse designet på handlekurvskuffen min?

Ja, du kan tilpasse designet på handlekurvskuffen din med CSS for å sikre at det stemmer overens med merkets estetikk og gir et engasjerende brukergrensesnitt.

Hvilke tekniske ferdigheter trenger jeg for å lage en handlekurvskuff?

Grunnleggende kunnskap om HTML, CSS og JavaScript er nyttig for å lage en handlekurvskuff. Shopify tilbyr omfattende dokumentasjon og ressurser for å hjelpe butikkseiere med å implementere tilpassede funksjoner.

Hvordan kan jeg teste handlekurvskuffen min etter implementering?

Etter å ha implementert handlekurvskuffen, legg til varer i kurven, klikk på handlekurvikonet for å utløse skuffen, og sørg for at varene og totalprisen oppdateres korrekt uten å oppdatere siden. Test på forskjellige enheter for å sikre responsivitet og funksjonalitet.

Er det nødvendig å bruke tredjepartsapper for å lage en handlekurvskuff?

Nei, du kan lage en handlekurvskuff med tilpasset kode uten å være avhengig av tredjepartsapper. Dette gir større fleksibilitet og tilpasning basert på butikkens behov.

Previous
Hvordan lage en kjøpsknapp i Shopify: En omfattende guide
Next
Hvordan lage en utsjekkingsside i Shopify
de fire en en

Låse opp suksessen din for netthandel

Shopify POS for nybegynnere: Sette opp for suksess
Shopify POS for nybegynnere: Sette opp for suksess
Read Article
s