Cara Membuat Laci Keranjang di Shopify

Daftar Isi

Pendahuluan
Memahami Laci Keranjang
Membuat Laci Keranjang di Shopify
Praktik Terbaik untuk Laci Keranjang
Kesimpulan
FAQ

Pendahuluan

Bayangkan seorang pelanggan menjelajahi toko online Anda, dengan antusias menambahkan item ke keranjang mereka, hanya untuk tiba-tiba dialihkan ke halaman keranjang terpisah. Pengalaman ini bisa mengejutkan, sering kali mengakibatkan keranjang yang ditinggalkan dan penjualan yang hilang. Bagaimana jika ada cara yang lebih mulus bagi pelanggan untuk melihat keranjang mereka tanpa mengganggu pengalaman belanja mereka? Memperkenalkan laci keranjang—laci yang meluncur, di luar kanvas yang meningkatkan pengalaman pengguna dan meningkatkan tingkat konversi.

Sebuah laci keranjang memungkinkan pelanggan untuk melihat item yang mereka pilih dan total biaya tanpa meninggalkan halaman yang sedang dibuka, mendorong perjalanan belanja yang tidak terputus. Di tengah persaingan e-commerce yang ketat saat ini, mengoptimalkan aspek ini dari toko Anda sangat penting untuk mempertahankan pelanggan dan memaksimalkan penjualan.

Dalam postingan ini, kita akan membahas semua yang perlu Anda ketahui tentang cara membuat laci keranjang di Shopify. Kami akan menjelaskan manfaat dari penerapan fitur ini, memberikan panduan langkah-demi-langkah untuk pembuatannya, dan membahas bagaimana menjadikannya sebagai bagian dari strategi pengalaman pengguna Anda. Di akhir, Anda akan memiliki pemahaman yang komprehensif tentang cara membuat laci keranjang di Shopify, memastikan bahwa toko Anda tetap ramah pengguna dan efisien.

Apa yang Akan Anda Pelajari

Pentingnya laci keranjang dalam e-commerce.
Cara menerapkan laci keranjang kustom di toko Shopify Anda tanpa menggunakan aplikasi pihak ketiga.
Praktik terbaik untuk meningkatkan pengalaman pengguna dengan laci keranjang Anda.

Mari kita mulai!

Memahami Laci Keranjang

Apa itu Laci Keranjang?

Laci keranjang, sering disebut sebagai keranjang yang meluncur atau mini keranjang, adalah elemen antarmuka yang memungkinkan pelanggan melihat isi keranjang belanja mereka tanpa harus meninggalkan halaman yang sedang dibuka. Alih-alih mengalihkan pengguna ke halaman keranjang yang khusus, laci meluncur dari sisi layar, memberikan gambaran praktis tentang item yang dipilih. Pendekatan ini tidak hanya menyederhanakan pengalaman belanja tetapi juga mendorong pengguna untuk terus menjelajahi toko Anda, yang pada akhirnya mengarah pada tingkat konversi yang lebih tinggi.

Pentingnya Laci Keranjang

Memiliki laci keranjang di toko Shopify Anda memiliki banyak manfaat:

Peningkatan Pengalaman Pengguna: Pembeli dapat dengan cepat melihat isi keranjang mereka tanpa mengganggu alur penelusuran mereka.
Pengurangan Pengabaian Keranjang: Dengan memudahkan pelanggan untuk melihat barang dan total biaya mereka, laci keranjang dapat membantu mengurangi kemungkinan pengabaian keranjang.
Peningkatan Penjualan: Proses checkout yang mulus dapat menghasilkan lebih banyak transaksi yang diselesaikan, berdampak positif pada laba Anda.
Optimasi Mobile: Dengan semakin banyak konsumen berbelanja di perangkat seluler, laci keranjang menyediakan pengalaman yang lebih ramah pengguna di layar yang lebih kecil.
Opsi Kustomisasi: Laci keranjang yang dirancang dengan baik dapat disesuaikan agar sesuai dengan merek toko Anda, meningkatkan estetika keseluruhan.

Membuat Laci Keranjang di Shopify

Syarat-Syarat

Sebelum masuk ke proses pembuatan, pastikan Anda memiliki hal-hal berikut:

Akses ke panel admin toko Shopify Anda.
Pengetahuan dasar tentang HTML, CSS, dan JavaScript.
Sebuah tema yang mengizinkan pengkodean kustom (kebanyakan tema Shopify melakukannya).

Panduan Langkah-demi-Langkah

Langkah 1: Akses Editor Kode Shopify Anda

Masuk ke panel admin Shopify Anda.
Di sidebar sebelah kiri, navigasikan ke Toko Online dan klik pada Temanya.
Temukan tema aktif Anda dan klik Tindakan > Edit Kode.

Langkah 2: Buat Berkas yang Diperlukan

Di folder Aset, buat dua berkas baru: drawer.css dan drawer.js.

Buka drawer.css dan tambahkan gaya berikut untuk mengelola penampilan laci keranjang Anda:

.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);
}

Selanjutnya, buka drawer.js dan masukkan JavaScript berikut untuk mengelola fungsionalitas laci:

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

Langkah 3: Buat Struktur HTML

Di folder Bagian, buat berkas baru bernama drawer.liquid.

Masukkan struktur HTML berikut untuk mendefinisikan tata letak laci:

<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">Lanjutkan Belanja</div>
            <button class="drawer__close" data-drawer-close aria-label="Tutup Laci"></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="/id/checkout" class="btn btn--has-icon-after cart__continue-btn" style="width:100%;">Lanjutkan ke Checkout</a>
            </div>
        </div>
    </div>
</section>

Tambahkan JavaScript yang diperlukan untuk mengambil dan memperbarui data keranjang:

<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>Keranjang kosong</p>';
            }
        });
</script>

Langkah 4: Referensikan Laci di Tema Anda

Buka theme.liquid dan sertakan berkas CSS dan JavaScript yang Anda buat di bagian <head>:

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

Referensikan bagian drawer.liquid Anda dalam tag <body>:
```
{% section 'drawer' %}
```

Langkah 5: Memicu Laci dari Header

Buka berkas header.liquid di folder Bagian.

Cari tag anchor yang terkait dengan ikon keranjang Anda dan modifikasi untuk memicu laci seperti ini:

<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>

Simpan semua perubahan.

Menguji Laci Keranjang Anda

Setelah menyelesaikan langkah-langkah tersebut, penting untuk menguji laci keranjang di toko Shopify Anda:

Buka toko Anda di tab baru.
Tambahkan produk ke keranjang Anda.
Klik pada ikon keranjang di header dan amati fungsionalitas laci.
Pastikan bahwa keranjang diperbarui secara dinamis dan bahwa total harga memantulkan dengan akurat.

Praktik Terbaik untuk Laci Keranjang

Untuk mengoptimalkan efektivitas laci keranjang Anda, pertimbangkan praktik terbaik berikut:

Desain Ramah Pengguna: Pastikan bahwa laci keranjang menarik secara visual dan mudah dinavigasi. Gunakan tipografi yang jelas, jarak yang sesuai, dan penempatan tombol yang intuitif.
Desain Responsif: Uji laci keranjang Anda di berbagai perangkat dan ukuran layar untuk memastikan pengalaman yang mulus bagi semua pengguna, khususnya pembeli mobile.
Pembaruan Real-Time: Terapkan fungsionalitas yang memungkinkan pelanggan untuk memperbarui jumlah atau menghapus item langsung dalam laci tanpa menyegarkan halaman.
Encourage Additional Sales: Gunakan laci keranjang untuk menampilkan saran upsell atau cross-sell, menggoda pelanggan untuk menambahkan lebih banyak item ke keranjang mereka.
Panggilan untuk Bertindak yang Jelas: Pastikan tombol checkout menonjol dan mudah diakses dalam laci, mendorong pengguna untuk menyelesaikan pembelian mereka.

Kesimpulan

Membuat laci keranjang di Shopify adalah langkah strategis yang dapat secara signifikan meningkatkan pengalaman berbelanja bagi pelanggan Anda. Dengan mengikuti langkah-langkah yang diuraikan dalam panduan ini, Anda dapat menerapkan laci keranjang kustom yang efisien dan ramah pengguna yang menjaga pelanggan tetap terlibat dan mendorong mereka untuk menyelesaikan pembelian.

Seiring dengan terus berkembangnya e-commerce, memastikan bahwa toko Anda memenuhi harapan pembeli modern adalah hal yang sangat penting. Laci keranjang yang dirancang dengan baik tidak hanya meningkatkan pengalaman pengguna tetapi juga berfungsi sebagai alat yang kuat untuk meningkatkan tingkat konversi dan meningkatkan penjualan.

Jika Anda mencari bantuan lebih lanjut dalam mengoptimalkan toko Shopify Anda, pertimbangkan untuk menjelajahi layanan Praella. Keahlian mereka dalam Pengalaman Pengguna & Desain, Pengembangan Web & Aplikasi, dan Strategi, Keberlanjutan, dan Pertumbuhan dapat membantu Anda menciptakan pengalaman belanja yang tak terlupakan yang sesuai dengan pelanggan.

Siap untuk meningkatkan toko Shopify Anda? Mulailah menerapkan laci keranjang Anda hari ini dan lihat perbedaan yang dihasilkannya!

FAQ

Apa itu laci keranjang?

Laci keranjang adalah fitur antarmuka di toko online yang memungkinkan pelanggan untuk melihat isi keranjang mereka tanpa harus pergi dari halaman yang sedang dibuka. Ia biasanya meluncur dari samping dan memberikan gambaran cepat tentang item yang ditambahkan ke keranjang.

Bagaimana laci keranjang meningkatkan pengalaman pengguna?

Laci keranjang meningkatkan pengalaman pengguna dengan memungkinkan pelanggan untuk melihat barang di keranjang mereka tanpa meninggalkan sesi penelusuran saat ini, mendorong perjalanan belanja yang lebih lancar dan mengurangi tingkat pengabaian keranjang.

Bisakah saya menyesuaikan desain laci keranjang saya?

Ya, Anda dapat menyesuaikan desain laci keranjang Anda dengan CSS untuk memastikan ia sejalan dengan estetika merek Anda dan menyediakan antarmuka pengguna yang menarik.

Keahlian teknis apa yang saya perlukan untuk membuat laci keranjang?

Pengetahuan dasar tentang HTML, CSS, dan JavaScript sangat membantu untuk membuat laci keranjang. Shopify menyediakan dokumentasi yang luas dan sumber daya untuk membantu pemilik toko dalam menerapkan fitur kustom.

Bagaimana saya bisa menguji laci keranjang saya setelah implementasi?

Setelah menerapkan laci keranjang, tambahkan item ke keranjang Anda, klik ikon keranjang untuk memicu laci, dan pastikan semua item dan total harga diperbarui secara benar tanpa menyegarkan halaman. Uji di berbagai perangkat untuk memastikan responsivitas dan fungsionalitas.

Apakah perlu menggunakan aplikasi pihak ketiga untuk membuat laci keranjang?

Tidak, Anda dapat membuat laci keranjang menggunakan kode kustom tanpa mengandalkan aplikasi pihak ketiga. Ini memungkinkan fleksibilitas dan kustomisasi yang lebih besar berdasarkan kebutuhan toko Anda.

Cara Membuat Laci Keranjang di Shopify.