Cách Tạo Ngăn Kéo Giỏ Hàng Trong Shopify

Q: Những kỹ năng kỹ thuật nào tôi cần để tạo ngăn cart?

Kiến thức cơ bản về HTML, CSS và JavaScript rất hữu ích cho việc tạo ngăn cart. Shopify cung cấp tài liệu và tài nguyên phong phú để hỗ trợ các chủ cửa hàng trong việc triển khai các tính năng tùy chỉnh.

Danh sách nội dung

Giới thiệu
Hiểu về Ngăn Cart
Tạo Ngăn Cart trong Shopify
Những thực tiễn tốt nhất cho Ngăn Cart
Kết luận
Câu hỏi thường gặp

Giới thiệu

Hãy tưởng tượng một khách hàng đang duyệt cửa hàng trực tuyến của bạn, hào hứng thêm các mặt hàng vào giỏ, chỉ để bị chuyển hướng đột ngột đến một trang giỏ hàng riêng. Trải nghiệm này có thể gây khó chịu, thường dẫn đến việc bỏ giỏ và mất doanh thu. Liệu có một cách nào đó để khách hàng xem giỏ hàng của họ mà không làm gián đoạn trải nghiệm mua sắm của họ không? Hãy nghĩ đến ngăn cart - một giỏ hàng trượt, ngoài canvas, nâng cao trải nghiệm người dùng và tăng tỷ lệ chuyển đổi.

Một ngăn cart cho phép khách hàng xem các mục đã chọn và tổng chi phí mà không cần rời khỏi trang hiện tại, thúc đẩy một hành trình mua sắm không bị gián đoạn. Trong bối cảnh thương mại điện tử cạnh tranh ngày nay, tối ưu hóa khía cạnh này của cửa hàng của bạn là điều rất cần thiết để giữ chân khách hàng và tối đa hóa doanh số.

Trong bài viết này, chúng tôi sẽ đi sâu vào mọi thứ bạn cần biết về việc tạo một ngăn cart trong Shopify. Chúng tôi sẽ chỉ ra lợi ích của việc triển khai tính năng này, cung cấp một hướng dẫn từng bước để tạo ra nó và thảo luận về cách biến nó thành một phần trong chiến lược trải nghiệm người dùng của bạn. Cuối cùng, bạn sẽ có một hiểu biết toàn diện về cách tạo một ngăn cart trong Shopify, đảm bảo rằng cửa hàng của bạn vẫn thân thiện và hiệu quả.

Những gì bạn sẽ học được

Tầm quan trọng của ngăn cart trong thương mại điện tử.
Cách triển khai ngăn cart tùy chỉnh trên cửa hàng Shopify của bạn mà không sử dụng các ứng dụng bên thứ ba.
Những thực tiễn tốt nhất để nâng cao trải nghiệm người dùng với ngăn cart của bạn.

Hãy bắt đầu nào!

Hiểu về Ngăn Cart

Ngăn Cart là gì?

Ngăn cart, thường được gọi là giỏ hàng trượt hoặc giỏ nhỏ, là một phần tử giao diện cho phép khách hàng xem nội dung giỏ hàng của họ mà không cần rời khỏi trang hiện tại. Thay vì chuyển hướng người dùng đến một trang giỏ hàng riêng, ngăn trượt ra từ một bên của màn hình, trình bày cái nhìn tổng quan thuận tiện về các mục đã chọn. Cách tiếp cận này không chỉ giúp đơn giản hóa trải nghiệm mua sắm mà còn khuyến khích người dùng tiếp tục khám phá cửa hàng của bạn, cuối cùng dẫn đến tỷ lệ chuyển đổi cao hơn.

Tầm quan trọng của Ngăn Cart

Có một ngăn cart trong cửa hàng Shopify của bạn mang lại nhiều lợi ích:

Cải thiện Trải nghiệm Người dùng: Khách hàng có thể nhanh chóng xem nội dung giỏ của họ mà không làm gián đoạn luồng duyệt của họ.
Giảm Tỷ lệ Bỏ Giỏ: Bằng cách thuận tiện cho khách hàng thấy các mặt hàng và tổng chi phí của họ, ngăn cart có thể giúp giảm khả năng bỏ giỏ hàng.
Tăng Doanh số: Một quy trình thanh toán mượt mà có thể dẫn đến nhiều giao dịch hoàn thành hơn, ảnh hưởng tích cực đến lợi nhuận của bạn.
Tối ưu hóa Di động: Với nhiều người tiêu dùng mua sắm trên các thiết bị di động, một ngăn cart cung cấp trải nghiệm thân thiện hơn trên màn hình nhỏ hơn.
Các tùy chọn Tùy chỉnh: Một ngăn cart được thiết kế tốt có thể được tùy chỉnh để phù hợp với thương hiệu của bạn, nâng cao thẩm mỹ tổng thể của bạn.

Tạo Ngăn Cart trong Shopify

Các yêu cầu cần thiết

Trước khi bắt đầu quy trình tạo ra, hãy đảm bảo bạn có những điều sau:

Truy cập vào bảng điều khiển quản trị của cửa hàng Shopify của bạn.
Kiến thức cơ bản về HTML, CSS và JavaScript.
Một chủ đề cho phép mã tùy chỉnh (hầu hết các chủ đề Shopify đều cho phép).

Hướng dẫn từng bước

Bước 1: Truy cập Trình chỉnh sửa mã Shopify của bạn

Đăng nhập vào bảng điều khiển quản trị Shopify của bạn.
Trong thanh bên trái, điều hướng đến Cửa hàng trực tuyến và nhấp vào Chủ đề.
Tìm chủ đề đang hoạt động của bạn và nhấp vào Hành động > Chỉnh sửa mã.

Bước 2: Tạo các tệp cần thiết

Trong thư mục Tài nguyên, tạo hai tệp mới: drawer.css và drawer.js.

Mở drawer.css và thêm các kiểu sau để quản lý sự xuất hiện của ngăn cart của bạn:

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

Kế tiếp, mở drawer.js và chèn JavaScript sau để quản lý chức năng của ngăn:

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

Bước 3: Tạo Cấu trúc HTML

Trong thư mục Sections, tạo một tệp mới có tên là drawer.liquid.

Chèn cấu trúc HTML sau để định nghĩa bố cục của ngăn:

<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">Tiếp tục Mua sắm</div>
            <button class="drawer__close" data-drawer-close aria-label="Đóng Ngăn"></button>
        </div>
        <div class="drawer__content" id="cart__drawer">
            <div id="cart__drawer_items"></div>
            <div style="margin-top: 50px">
                <h4>Tổng: <span id="cart__total_price"></span></h4>
                <a id="cart__checkout_btn" href="/vi/checkout" class="btn btn--has-icon-after cart__continue-btn" style="width:100%;">Tiến hành Thanh toán</a>
            </div>
        </div>
    </div>
</section>

Thêm JavaScript cần thiết để lấy và cập nhật dữ liệu giỏ:

<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>Giỏ hàng trống</p>';
            }
        });
</script>

Bước 4: Tham chiếu Ngăn trong Chủ đề của bạn

Mở theme.liquid và bao gồm các tệp CSS và JavaScript bạn đã tạo trong phần <head>:
```
{{ 'drawer.css' | asset_url | stylesheet_tag }}
{{ 'drawer.js' | asset_url | script_tag }}
```
Tham chiếu phần drawer.liquid của bạn trong thẻ <body>:
```
{% section 'drawer' %}
```

Bước 5: Kích hoạt Ngăn từ Thanh đầu trang

Mở tệp header.liquid trong thư mục Sections.

Định vị thẻ liên kết liên quan đến biểu tượng giỏ hàng của bạn và sửa đổi nó để kích hoạt ngăn như sau:

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

Lưu tất cả các thay đổi.

Kiểm tra ngăn cart của bạn

Sau khi hoàn thành các bước, điều quan trọng là kiểm tra ngăn cart trên cửa hàng Shopify của bạn:

Mở cửa hàng của bạn trong một tab mới.
Thêm một sản phẩm vào giỏ hàng của bạn.
Nhấp vào biểu tượng giỏ hàng trên thanh đầu trang và quan sát chức năng của ngăn.
Đảm bảo rằng giỏ hàng cập nhật động và tổng giá phản ánh chính xác.

Những thực tiễn tốt nhất cho Ngăn Cart

Để tối ưu hóa hiệu quả của ngăn cart của bạn, hãy xem xét những thực tiễn tốt nhất sau:

Thiết kế Thân thiện Người dùng: Đảm bảo rằng ngăn cart hấp dẫn về mặt hình ảnh và dễ điều hướng. Sử dụng kiểu chữ rõ ràng, khoảng cách thích hợp và vị trí nút trực quan.
Thiết kế Phản hồi: Kiểm tra ngăn cart của bạn trên nhiều thiết bị và kích thước màn hình khác nhau để đảm bảo trải nghiệm liền mạch cho tất cả người dùng, đặc biệt là những người mua sắm trên di động.
Cập nhật Thời gian Thực: Triển khai chức năng cho phép khách hàng cập nhật số lượng hoặc xóa các mặt hàng trực tiếp trong ngăn mà không cần tải lại trang.
Khuyến khích Bán hàng Bổ sung: Sử dụng ngăn cart để hiển thị các gợi ý bán thêm hoặc bán chéo, khuyến khích khách hàng thêm nhiều mặt hàng vào giỏ hàng của họ.
Các Kêu gọi Hành động Rõ ràng: Đảm bảo rằng nút thanh toán nổi bật và dễ tiếp cận trong ngăn, khuyến khích người dùng hoàn tất giao dịch của họ.

Kết luận

Tạo một ngăn cart trong Shopify là một động thái chiến lược có thể nâng cao trải nghiệm mua sắm cho khách hàng của bạn một cách đáng kể. Bằng cách làm theo các bước được nêu trong hướng dẫn này, bạn có thể triển khai một ngăn cart tùy chỉnh, hiệu quả và thân thiện với người dùng, giữ khách hàng được tham gia và khuyến khích họ hoàn tất giao dịch của mình.

Khi thương mại điện tử tiếp tục phát triển, việc đảm bảo rằng cửa hàng của bạn đáp ứng được kỳ vọng của người tiêu dùng hiện đại là điều rất quan trọng. Một ngăn cart được thiết kế tốt không chỉ cải thiện trải nghiệm người dùng mà còn là một công cụ mạnh mẽ để tăng tỷ lệ chuyển đổi và thúc đẩy doanh số bán hàng.

Nếu bạn đang tìm kiếm sự hỗ trợ thêm trong việc tối ưu hóa cửa hàng Shopify của mình, hãy cân nhắc việc khám phá các dịch vụ của Praella. Chuyên môn của họ trong Trải nghiệm Người dùng & Thiết kế, Phát triển Web & Ứng dụng, và Chiến lược, Liên tục và Tăng trưởng có thể giúp bạn tạo ra những trải nghiệm mua sắm không thể quên, phù hợp với khách hàng.

Sẵn sàng để nâng cao cửa hàng Shopify của bạn? Bắt đầu triển khai ngăn cart của bạn ngay hôm nay và cảm nhận sự khác biệt mà nó mang lại!

Câu hỏi thường gặp

Ngăn cart là gì?

Ngăn cart là một tính năng giao diện trong các cửa hàng trực tuyến cho phép khách hàng xem nội dung giỏ hàng của họ mà không cần rời khỏi trang hiện tại. Nó thường trượt ra từ bên cạnh và cung cấp cái nhìn nhanh về các mặt hàng đã thêm vào giỏ hàng.

Ngăn cart cải thiện trải nghiệm người dùng như thế nào?

Ngăn cart cải thiện trải nghiệm người dùng bằng cách cho phép khách hàng xem các mặt hàng trong giỏ mà không phải rời khỏi phiên duyệt trang hiện tại, thúc đẩy hành trình mua sắm mượt mà hơn và giảm tỷ lệ bỏ giỏ.

Tôi có thể tùy chỉnh thiết kế của ngăn cart không?

Có, bạn có thể tùy chỉnh thiết kế của ngăn cart bằng CSS để đảm bảo nó phù hợp với thẩm mỹ của thương hiệu bạn và cung cấp một giao diện người dùng hấp dẫn.

Những kỹ năng kỹ thuật nào tôi cần để tạo ngăn cart?

Kiến thức cơ bản về HTML, CSS và JavaScript là rất hữu ích cho việc tạo ngăn cart. Shopify cung cấp tài liệu phong phú và tài nguyên để hỗ trợ các chủ cửa hàng trong việc triển khai các tính năng tùy chỉnh.

Làm thế nào để tôi có thể kiểm tra ngăn cart của mình sau khi triển khai?

Sau khi triển khai ngăn cart, hãy thêm các mặt hàng vào giỏ, nhấp vào biểu tượng giỏ hàng để kích hoạt ngăn và đảm bảo rằng các mặt hàng và tổng giá được cập nhật chính xác mà không cần tải lại trang. Kiểm tra trên nhiều thiết bị khác nhau để đảm bảo khả năng phản hồi và chức năng.

Có cần sử dụng các ứng dụng bên thứ ba để tạo ngăn cart không?

Không, bạn có thể tạo ngăn cart bằng cách sử dụng mã tùy chỉnh mà không cần phụ thuộc vào các ứng dụng bên thứ ba. Điều này cho phép có sự linh hoạt và tùy chỉnh lớn hơn dựa trên nhu cầu của cửa hàng của bạn.

Cách Tạo Ngăn Kéo Giỏ Hàng Trong Shopify.