~ 1 min read

Hur man skapar en varukorgslåda i Shopify.

How to Create a Cart Drawer in Shopify

Innehållsförteckning

  1. Introduktion
  2. Förstå varukorgslådan
  3. Skapa en varukorgslåda i Shopify
  4. Bästa praxis för varukorgslådor
  5. Slutsats
  6. FAQ

Introduktion

Föreställ dig en kund som surfar på din nätbutik, ivrigt lägger till artiklar i sin varukorg, bara för att plötsligt bli omdirigerad till en separat varukorgssida. Denna upplevelse kan vara chockerande och ofta leda till övergivna varukorgar och förlorad försäljning. Tänk om det fanns ett mer sömlöst sätt för kunder att se sin varukorg utan att avbryta sin shoppingupplevelse? Här kommer varukorgslådan in – en glidande, off-canvas varukorg som förbättrar användarupplevelsen och ökar konverteringsgraden.

En varukorgslåda gör att kunder kan se sina valda artiklar och totala kostnader utan att lämna den aktuella sidan, vilket främjar en oavbruten shoppingresa. I dagens konkurrensutsatta e-handelslandskap är det avgörande att optimera denna aspekt av din butik för att behålla kunder och maximera försäljningen.

I det här inlägget ska vi dyka ner i allt du behöver veta om att skapa en varukorgslåda i Shopify. Vi kommer att skissera fördelarna med att implementera denna funktion, ge en steg-för-steg-guide för dess skapande och diskutera hur man gör den till en del av din användarupplevelsestrategi. I slutet kommer du att ha en omfattande förståelse för hur man skapar en varukorgslåda i Shopify, vilket säkerställer att din butik förblir användarvänlig och effektiv.

Vad du kommer att lära dig

  • Betydelsen av en varukorgslåda i e-handel.
  • Hur man implementerar en anpassad varukorgslåda i din Shopify-butik utan att använda tredjepartsappar.
  • Bästa metoder för att förbättra användarupplevelsen med din varukorgslåda.

Låt oss börja!

Förstå varukorgslådan

Vad är en varukorgslåda?

En varukorgslåda, ofta kallad en slid-out-varukorg eller mini-varukorg, är en gränssnittselement som låter kunderna se innehållet i sin shoppingvagn utan att behöva navigera bort från den aktuella sidan. Istället för att omdirigera användarna till en dedikerad varukorgssida glider lådan in från sidan av skärmen och presenterar en bekväm översikt över valda artiklar. Detta tillvägagångssätt strömlinjeformar inte bara shoppingupplevelsen utan uppmuntrar också användarna att fortsätta utforska din butik, vilket slutligen leder till högre konverteringsgrader.

Betydelsen av en varukorgslåda

Att ha en varukorgslåda i din Shopify-butik har många fördelar:

  1. Förbättrad användarupplevelse: Kunderna kan snabbt se innehållet i sin varukorg utan att störa sitt surfande.

  2. Minskat övergivande av varukorgar: Genom att göra det enkelt för kunder att se sina artiklar och totala kostnader kan en varukorgslåda hjälpa till att minska sannolikheten för övergivande av varukorgar.

  3. Ökad försäljning: En smidig kassaprocess kan leda till fler slutförda transaktioner, vilket positivt påverkar ditt resultat.

  4. Mobiloptimering: Med fler konsumenter som handlar på mobila enheter ger en varukorgslåda en mer användarvänlig upplevelse på mindre skärmar.

  5. Anpassningsalternativ: En välutformad varukorgslåda kan anpassas för att matcha din butiks varumärkesidentitet och förbättra din övergripande estetik.

Skapa en varukorgslåda i Shopify

Förutsättningar

Innan du dyker ner i skapelseprocessen, se till att du har följande:

  • Åtkomst till din Shopify-butiks adminpanel.
  • Grundläggande kunskaper i HTML, CSS och JavaScript.
  • Ett tema som tillåter anpassad kodning (de flesta Shopify-teman gör det).

Steg-för-steg-guide

Steg 1: Åtkomst till din Shopify kodredigerare

  1. Logga in på din Shopify-adminpanel.
  2. I den vänstra sidopanelen navigerar du till Nätbutik och klickar på Teman.
  3. Hitta ditt aktiva tema och klicka på Åtgärder > Redigera kod.

Steg 2: Skapa de nödvändiga filerna

  1. I Assets-mappen, skapa två nya filer: drawer.css och drawer.js.

  2. Öppna drawer.css och lägg till följande stilar för att hantera utseendet på din varukorgslåda:

    .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ästa, öppna drawer.js och sätt in följande JavaScript för att hantera funktionen hos lådan:

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

Steg 3: Skapa HTML-strukturen

  1. I Sections-mappen, skapa en ny fil med namnet drawer.liquid.

  2. Infoga följande HTML-struktur för att definiera lådans 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ätt handla</div>
            <button class="drawer__close" data-drawer-close aria-label="Stäng låda"></button>
        </div>
        <div class="drawer__content" id="cart__drawer">
            <div id="cart__drawer_items"></div>
            <div style="margin-top: 50px">
                <h4>Totalt: <span id="cart__total_price"></span></h4>
                <a id="cart__checkout_btn" href="/sv/checkout" class="btn btn--has-icon-after cart__continue-btn" style="width:100%;">Fortsätt till kassan</a>
            </div>
        </div>
    </div>
</section>

  3. Lägg till den nödvändiga JavaScript för att hämta och uppdatera varukorgdata:

    <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>Varukorgen är tom</p>';
            }
        });
</script>

Steg 4: Återkoppla lådan i ditt tema

  1. Öppna theme.liquid och inkludera CSS- och JavaScript-filerna du skapade i <head>-delen:

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

  2. Referera din drawer.liquid-sektion inom <body>-taggen:

    {% section 'drawer' %}

Steg 5: Aktivera lådan från headern

  1. Öppna header.liquid-filen i Sections-mappen.

  2. Leta upp ankartaggen kopplad till din varukorgsikon och ändra den för att aktivera lådan så här:

    <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. Spara alla ändringar.

Testa din varukorgslåda

Efter att ha slutfört stegen är det avgörande att testa varukorgslådan i din Shopify-butik:

  1. Öppna din butik i en ny flik.
  2. Lägg till en produkt i din varukorg.
  3. Klicka på varukorgsikonen i headern och observera lådans funktionalitet.
  4. Se till att varukorgen uppdateras dynamiskt och att det totala priset återspeglar korrekt.

Bästa praxis för varukorgslådor

För att optimera effektiviteten hos din varukorgslåda, överväga följande bästa metoder:

  • Användarvänlig design: Se till att varukorgslådan är visuellt tilltalande och lätt att navigera. Använd tydlig typografi, lämpliga avstånd och intuitiva knappplaceringar.

  • Responsiv design: Testa din varukorgslåda på olika enheter och skärmstorlekar för att säkerställa en sömlös upplevelse för alla användare, särskilt mobilköpare.

  • Uppdateringar i realtid: Implementera funktionalitet som låter kunder uppdatera kvantiteter eller ta bort artiklar direkt inom lådan utan att sidan uppdateras.

  • Uppmuntra ytterligare försäljning: Använd varukorgslådan för att visa upp försäljnings- eller korsförsäljningsförslag, vilket lockar kunder att lägga till fler artiklar i sin varukorg.

  • Tydliga uppmaningar till handling: Se till att kassa-knappen sticker ut och är lättillgänglig inom lådan, vilket uppmuntrar användarna att slutföra sina inköp.

Slutsats

Att skapa en varukorgslåda i Shopify är ett strategiskt drag som kan förbättra shoppingupplevelsen för dina kunder avsevärt. Genom att följa stegen som skisserats i denna guide kan du implementera en anpassad, effektiv och användarvänlig varukorgslåda som håller kunderna engagerade och uppmuntrar dem att slutföra sina inköp.

Allt eftersom e-handeln fortsätter att utvecklas är det avgörande att säkerställa att din butik uppfyller moderna kunders förväntningar. En väl utformad varukorgslåda förbättrar inte bara användarupplevelsen utan fungerar också som ett kraftfullt verktyg för att öka konverteringsgraden och öka försäljningen.

Om du letar efter vidare hjälp med att optimera din Shopify-butik, överväg att utforska Praellas tjänster. Deras kompetens inom Användarupplevelse & Design, Webb- och apputveckling, och Strategi, kontinuitet och tillväxt kan hjälpa dig att skapa oförglömliga shoppingupplevelser som tilltalar kunder.

Redo att förbättra din Shopify-butik? Börja implementera din varukorgslåda idag och se vilken skillnad den gör!

FAQ

Vad är en varukorgslåda?

En varukorgslåda är en gränssnittsfeature i nätbutiker som låter kunder se innehållet i sin varukorg utan att navigera bort från den aktuella sidan. Den glider vanligtvis in från sidan och ger en snabb översikt över de varor som lagts till i varukorgen.

Hur förbättrar en varukorgslåda användarupplevelsen?

En varukorgslåda förbättrar användarupplevelsen genom att låta kunder se sina varukorgsartiklar utan att lämna sin nuvarande webbsession, vilket främjar en smidigare shoppingresa och minskar övergivna varukorgar.

Kan jag anpassa designen på min varukorgslåda?

Ja, du kan anpassa designen på din varukorgslåda med CSS för att säkerställa att den överensstämmer med ditt varumärkes estetik och ger en engagerande användargränssnitt.

Vilka tekniska färdigheter behöver jag för att skapa en varukorgslåda?

Grundläggande kunskap om HTML, CSS och JavaScript är hjälpsam för att skapa en varukorgslåda. Shopify tillhandahåller omfattande dokumentation och resurser för att hjälpa butiksägare att implementera anpassade funktioner.

Hur kan jag testa min varukorgslåda efter implementeringen?

Efter att ha implementerat varukorgslådan, lägg till artiklar i din varukorg, klicka på varukorgsikonen för att aktivera lådan, och se till att varorna och det totala priset uppdateras korrekt utan att sidan uppdateras. Testa på olika enheter för att säkerställa responsivitet och funktionalitet.

Är det nödvändigt att använda tredjepartsappar för att skapa en varukorgslåda?

Nej, du kan skapa en varukorgslåda med anpassad kod utan att förlita dig på tredjepartsappar. Detta ger större flexibilitet och anpassning baserat på din butiks behov.

Previous
Hur man skapar en köpknapp i Shopify: En omfattande guide
Next
Hur man skapar en kassasida i Shopify
de fyra ett ett

Låsa upp din e-handels framgång

Shopify POS för nybörjare: Ställa in för framgång
Shopify POS för nybörjare: Ställa in för framgång
Read Article
s