Kuinka luoda ostoskorin laatikko Shopifyssa.

Sisällysluettelo

1. Johdanto
2. Ostoskorin laatikon ymmärtäminen
3. Ostoskorin laatikon luominen Shopifyssa
4. Parhaat käytännöt ostoskorin laatikoille
5. Yhteenveto
6. Usein kysytyt kysymykset

Johdanto

Kuvittele asiakas selailessaan verkkokauppaasi, innokkaasti lisäten tuotteita ostoskoriinsa, vain saadessaan äkillisesti uudelleenohjauksen erilliselle ostosivulle. Tämä kokemus voi olla häiritsevä, ja se johtaa usein hylättyihin koreihin ja menetettyihin myynteihin. Entä jos olisi sujuvampi tapa, jolla asiakkaat voivat tarkastella ostoskoriansa keskeyttämättä ostokokemustaan? Tervetuloa ostoskorin laatikkoon – liukuva, off-canvas-ostoskorin ominaisuus, joka parantaa käyttäjäkokemusta ja lisää konversioprosentteja.

Ostoskorin laatikko mahdollistaa asiakkaiden tarkastella valittuja tuotteitaan ja kokonaiskustannuksiaan ilman, että heidän tarvitsee poistua nykyiseltä sivulta, edistäen keskeytyksetöntä ostosmatkaa. Tänä päivänä kilpailullisessa verkkokauppaympäristössä tämän osa-alueen optimointi on ratkaisevan tärkeää asiakasuskollisuuden säilyttämiseksi ja myynnin maksimoimiseksi.

Ennen kuin aloitamme, tarkastellaan, mitä kaikkea tarvitse tietää ostoskorin laatikon luomisesta Shopifyssa. Esittelemme tämän ominaisuuden hyödyt, tarjoamme vaiheittaisen oppaan sen luomiseen ja keskustelemme siitä, miten tehdä siitä osa käyttäjäkokemusstrategiaasi. Lopuksi sinulla on kattava ymmärrys siitä, kuinka luoda ostoskorin laatikko Shopifyssa, varmistaen, että kauppasi pysyy käyttäjäystävällisenä ja tehokkaana.

Mitä opit

• Ostoskorin laatikon merkitys verkkokaupassa.
• Kuinka toteuttaa mukautettu ostoskorin laatikko Shopify-kaupassasi ilman kolmannen osapuolen sovellusten käyttöä.
• Parhaat käytännöt käyttäjäkokemuksen parantamiseksi ostoskorin laatikollasi.

Aloitetaan!

Ostoskorin laatikon ymmärtäminen

Mikä on ostoskorin laatikko?

Ostoskorin laatikko, jota usein kutsutaan liukuvaksi ostoskoriksi tai minikoriksi, on käyttöliittymäelementti, joka sallii asiakkaille heidän ostoskorinsa sisällön tarkastelun ilman, että heidän tarvitsee siirtyä pois nykyiseltä sivulta. Sen sijaan, että käyttäjiä ohjattaisiin omalle ostosivulle, laatikko liukuu näytön sivusta ja esittää kätevän yleiskatsauksen valituista tuotteista. Tämä lähestymistapa ei ainoastaan virtaviivaista ostoskokemusta, vaan myös kannustaa käyttäjiä jatkamaan kaupassasi tutustumista, mikä lopulta johtaa korkeampiin konversioprosentteihin.

Ostoskorin laatikon tärkeys

Ostoskorin laatikon mukana tulee useita etuja:

1. Parannettu käyttäjäkokemus: Ostajat voivat nopeasti tarkastella ostoskorinsa sisältöä ilman selausprosessin keskeyttämistä.

2. Vähennetty ostoskorin hylkääminen: Tehtyään asiakkaiden helppoa nähdä tuotteensa ja kokonaiskustannukset, ostoskorin laatikko voi auttaa vähentämään ostoskorin hylkäämisen todennäköisyyttä.

3. Kohonnut myynti: Sujuva kassaprosessi voi johtaa useampiin toteutuneisiin liiketoimiin, mikä vaikuttaa positiivisesti tulokseesi.

4. Responsiivisuus mobiililaitteilla: Kun yhä useammat kuluttajat shoppaavat mobiililaitteilla, ostoskorin laatikko tarjoaa käyttäjäystävällisemmän kokemuksen pienemmillä näytöillä.

5. Mukauttamisen mahdollisuudet: Hyvin suunniteltu ostoskorin laatikko voidaan mukauttaa vastaamaan kauppasi brändäystä, vahvistaen yleistä esteettisyyttäsi.

Ostoskorin laatikon luominen Shopifyssa

Ehdot

Ennen kuin sukellamme luomisprosessiin, varmista, että sinulla on seuraavat asiat:

• Pääsy Shopify-kauppasi hallintapaneeliin.
• Perustiedot HTML:stä, CSS:stä ja JavaScriptistä.
• Teema, joka sallii mukautetun koodauksen (useimmat Shopify-teemat sallivat tämän).

Vaiheittainen opas

Vaihe 1: Pääsy Shopify-koodieditoriin

1. Kirjaudu Shopify-hallintapaneeliisi.
2. Vasemman sivupalkin kautta siirry Verkkokauppaan ja napsauta Teemat.
3. Etsi aktiivinen teema ja napsauta Toimet > Muokkaa koodia.

Vaihe 2: Luo tarvittavat tiedostot

1. Assets-kansiossa luo kaksi uutta tiedostoa: drawer.css ja drawer.js.

2. Avaa drawer.css ja lisää seuraavat tyylit hallitaksesi ostoskorin laatikon ulkoasua:

   .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. Avaa seuraavaksi drawer.js ja lisää seuraava JavaScript hallitaksesi laatikon toimintaa:

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

Vaihe 3: Luo HTML-rakenne

1. Luodaksesi Sections-kansioon uusi tiedosto, nimeä se drawer.liquid.

2. Lisää seuraava HTML-rakenne määrittääksesi laatikon asettelun:

   <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">Jatka ostoksia</div>
               <button class="drawer__close" data-drawer-close aria-label="Sulje laatikko"></button>
           </div>
           <div class="drawer__content" id="cart__drawer">
               <div id="cart__drawer_items"></div>
               <div style="margin-top: 50px">
                   <h4>Yhteensä: <span id="cart__total_price"></span></h4>
                   <a id="cart__checkout_btn" href="/fi/checkout" class="btn btn--has-icon-after cart__continue-btn" style="width:100%;">Siirry kassalle</a>
               </div>
           </div>
       </div>
   </section>
   

3. Lisää tarvittava JavaScript ostoskoritietojen hakemiseen ja päivittämiseen:

   <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>Ostoskorisi on tyhjät</p>';
               }
           });
   </script>
   

Vaihe 4: Viittaa laatikkoon teemaasi

1. Avaa theme.liquid ja sisällytä luomasi CSS- ja JavaScript-tiedostot <head>-osioon:

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

2. Viittaa drawer.liquid-osioon <body>-tagin sisällä:

   {% section 'drawer' %}
   

Vaihe 5: Aktivoi laatikko ylävalikosta

1. Avaa header.liquid tiedosto Sections-kansiossa.

2. Etsi ankkuri-tag, joka liittyy ostoskorikuvakkeeseesi, ja muokkaa sitä aktivoinnin laittamiseksi laatikolle näin:

   <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. Tallenna kaikki muutokset.

Ostoskorin laatikon testaaminen

Kun olet suorittanut vaiheet, on tärkeää testata ostoskorin laatikko Shopify-kaupassasi:

1. Avaa kauppasi uudessa välilehdessä.
2. Lisää tuote ostoskoriisi.
3. Napsauta ostoskorikuvaketta yläpalkissa ja tarkkaile laatikon toimintaa.
4. Varmista, että ostoskori päivittyy dynaamisesti ja että kokonais hinta on oikein.

Parhaat käytännöt ostoskorin laatikoille

Tehostaaksesi ostoskorin laatikkosi tehokkuutta, harkitse seuraavia parhaita käytäntöjä:

• Käyttäjäystävällinen muotoilu: Varmista, että ostoskorin laatikko on visuaalisesti miellyttävä ja helppo navigoida. Käytä selkeää typografiaa, sopivia välejä ja intuitiivisia painikkeiden sijainteja.

• Responsiivinen muotoilu: Testaa ostoskorin laatikkosi eri laitteilla ja näytön kooilla varmistaaksesi saumattoman kokemuksen kaikille käyttäjille, erityisesti mobiilikäyttäjille.

• Reaaliaikaiset päivitykset: Toteuta toiminto, joka sallii asiakkaille päivittää määriä tai poistaa tuotteita suoraan laatikosta ilman sivun päivittämistä.

• Lisämyynnin kannustaminen: Käytä ostoskorin laatikkoa näyttämään lisämyynti- tai ristiinmyyntiehdotuksia, houkuttelemalla asiakkaita lisäämään tuotteita ostoskoriinsa.

• Selkeät toimintakehotteet: Varmista, että kassapainike erottuu ja on helposti saatavilla laatikossa, kannustaen käyttäjiä täydentämään ostoksensa.

Yhteenveto

Ostoskorin laatikon luominen Shopifyssa on strateginen päätös, joka voi merkittävästi parantaa asiakkaidesi ostokokemusta. Noudattamalla tämän oppaan esittämiä vaiheita, voit toteuttaa mukautetun, tehokkaan ja käyttäjäystävällisen ostoskorin laatikon, joka pitää asiakkaat aktiivisina ja kannustaa heitä toteuttamaan ostoksensa.

Koska verkkokauppa jatkaa kehittymistään, on ratkaisevaa varmistaa, että kauppasi vastaa nykyaikaisten ostajien odotuksia. Hyvin suunniteltu ostoskorin laatikko ei ainoastaan paranna käyttäjäkokemusta, vaan se toimii myös voimakkaana työkaluna konversioprosenttien lisäämiseen ja myynnin boostaamiseen.

Jos etsit lisäapua Shopify-kauppasi optimointiin, harkitse Praellan palvelujen tutkimista. Heidän asiantuntemuksensa Käyttäjäkokemus ja muotoilu, Verkkosivujen ja sovellusten kehitys ja Strategia, jatkuvuus ja kasvu voi auttaa sinua luomaan unohtumattomia ostokokemuksia, jotka resonoivat asiakkaidesi kanssa.

Valmis parantamaan Shopify-kauppaasi? Aloita ostoskorin laatikon toteuttaminen tänään ja katso, kuinka se vaikuttaa!

Usein kysytyt kysymykset

Mikä on ostoskorin laatikko?

Ostoskorin laatikko on käyttöliittymäominaisuus verkkokaupoissa, joka sallii asiakkaille heidän ostoskorinsa sisällön tarkastelun ilman, että heidän tarvitsee siirtyä pois nykyiseltä sivulta. Se yleensä liukuu sivulta ja tarjoaa nopean yleiskatsauksen lisätyistä tuotteista.

Miten ostoskorin laatikko parantaa käyttäjäkokemusta?

Ostoskorin laatikko parantaa käyttäjäkokemusta antaen asiakkaille mahdollisuuden tarkastella ostoskorinsa tuotteita ilman, että heidän tarvitsee lopettaa nykyistä selausistuntoaan, mikä edistää sujuvampaa ostosmatkaa ja vähentää ostoskorin hylkäämisprosenttia.

Voinko mukauttaa ostoskorin laatikkoni ulkoasua?

Kyllä, voit mukauttaa ostoskorin laatikkosi ulkoasun CSS:n avulla varmistaaksesi, että se vastaa brändisi estetiikkaa ja tarjoaa osallistavan käyttäjäliittymän.

Mitkä tekniset taidot tarvitsen ostoskorin laatikon luomiseksi?

Perustiedot HTML:stä, CSS:stä ja JavaScriptistä ovat hyödyksi ostoskorin laatikon luomisessa. Shopify tarjoaa laajan dokumentaation ja resursseja kauppiaiden avuksi mukautettujen ominaisuuksien toteuttamisessa.

Miten voin testata ostoskorin laatikkoani toteutuksen jälkeen?

Ostoskorin laatikon toteuttamisen jälkeen lisää tuotteita ostoskoriisi, napsauta ostoskorin ikonia aktivoiaksesi laatikon ja varmista, että tuotteet ja kokonais hinta päivittyvät oikein ilman sivun päivittämistä. Testaa eri laitteilla varmistaaksesi responsiivisuuden ja toimivuuden.

Onko tarpeen käyttää kolmannen osapuolen sovelluksia ostoskorin laatikon luomiseen?

Ei, voit luoda ostoskorin laatikon räätälöidyn koodin avulla ilman kolmannen osapuolen sovellusten käyttöä. Tämä mahdollistaa suuremman joustavuuden ja mukauttamisen kauppasi tarpeiden mukaan.