Thêm một liên kết tiếp tục mua sắm vào giỏ hàng của bạn

Bạn có thể thêm liên kết Tiếp tục mua sắm vào trang giỏ hàng để cho phép khách hàng dễ dàng quay lại phần duyệt sản phẩm sau khi thêm mặt hàng vào giỏ hàng. Bạn có thể chọn thêm liên kết đưa khách hàng quay lại trang danh mục, quay lại trang chủ hoặc quay lại trang bộ sưu tập gần nhất họ đang xem.

Tiếp tục mua sắm

Thêm liên kết Tiếp tục mua sắm vào trang giỏ hàng

Để thêm liên kết Tiếp tục mua sắm vào trang giỏ hàng:

  1. Trong thư mục Mục, nhấp vào cart-template.liquid. Nếu chủ đề chủa bạn không có tệp này, hãy nhấp vào cart.liquid trong thư mục Mẫu.

  2. Tìm mã của nút Thanh toán bằng cách tìm kiếm name="checkout" trong tệp. Dòng mã của nút thanh toán khác nhau tùy vào chủ đề nhưng sẽ có dạng như sau:

<button type="submit" id="checkout" name="checkout" class="btn">
  {{ 'cart.general.checkout' | t }}
</button>
  1. Bước tiếp theo là dán một dòng mã mới để tạo liên kết Tiếp tục mua sắm. Mã bạn dán sẽ phụ thuộc vào trang bạn muốn truy cập qua liên kết:

Đối với liên kết chuyển đến trang danh mục

Để thêm liên kết chuyển đến trang danh mục, dán mã sau vào dòng mới phía trước hoặc sau mã của nút Thanh toán:

<a href="/collections/all" title="Continue shopping">Continue shopping</a>

Đối với liên kết chuyển đến trang chủ

Để thêm liên kết chuyển đến trang chủ, dán mã sau vào một dòng mới trước hoặc sau mã dành cho nút Thanh toán:

<a href="/" title="Continue shopping">Continue shopping</a>

Đối với liên kết đến bộ sưu tập được xem gần nhất

Để thêm liên kết chuyển đến bộ sưu tập được xem gần nhất, dán mã sau vào một dòng mới phía trước hoặc sau mã của nút Thanh toán:

<a
  id="continue-shopping"
  href=""
  title="Continue shopping">
  Continue shopping
</a>
  1. Nhấp vào Lưu. Nếu bạn đã thêm liên kết chuyển đến trang danh mục hoặc trang chủ, nghĩa là bạn đã hoàn tất. Nếu đã thêm liên kết chuyển đến bộ sưu tập được xem gần nhất, bạn cần thêm một số JavaScript vào mã chủ đề của mình. hãy tiếp tục thực hiện theo các bước tiếp theo.

  2. Trong thư mục Layout, nhấp vào theme.liquid.

  3. Tìm thẻ có kết thúc là </body> ở gần cuối tệp. Dán mã sau vào phía trên của thẻ có kết thúc là </body>:

<script>
  if(Storage !== undefined) {

    var defaultLink = "/collections/all";

    {% if template contains 'collection' %}
      sessionStorage.collection = "{{ collection.url }}";
    {% endif %}

    {% if template contains 'cart' %}
      if( !sessionStorage.collection ) {
        sessionStorage.collection = defaultLink;
      }
      document.getElementById("continue-shopping").href = sessionStorage.collection;
    {% endif %}

    }
</script>
  1. Nhấp vào Save (Lưu).

Thêm kiểu nút (không bắt buộc)

Nếu sử dụng chủ đề Shopify miễn phí, bạn có thể áp dụng kiểu cho liên kết Tiếp tục mua sắm để liên kết trông giống nút. Bằng cách thêm thuộc tính lớp vào mã cho liên kết trên nút, bạn có thể đặt nút của mình khớp với kiểu của các nút khác trong chủ đề. Tất cả chủ đề Shopify miễn phí đều sử dụng cùng tên lớp cho kiểu nút chính và hầu hết đều sử dụng cùng tên lớp cho kiểu nút phụ.

Để áp dụng kiểu nút chính cho liên kết Tiếp tục mua sắm:

Thêm thuộc tính class="btn" vào dòng mã bạn đã dán để thêm liên kết Tiếp tục mua sắm. Mã của bạn sẽ có dạng như sau:

<a href="/collections/all" title="Continue shopping" class="btn">
  Continue shopping
</a>

Để áp dụng kiểu nút phụ cho liên kết Tiếp tục mua sắm:

Nếu bạn sử dụng chủ đề miễn phí không phải chủ đề Supply, hãy thêm thuộc tính class="btn--secondary" vào dòng mã bạn đã dán để thêm liên kết Tiếp tục mua sắm. Mã của bạn sẽ có dạng như sau:

<a href="/collections/all" title="Continue shopping" class="btn--secondary">
  Continue shopping
</a>

Nếu bạn dùng Supply, hãy thêm thuộc tính class="btn-secondary" vào dòng mã bạn đã dán để thêm liên kết Tiếp tục mua sắm. Mã của bạn sẽ có dạng như sau:

<a href="/collections/all" title="Continue shopping" class="btn-secondary">
  Continue shopping
</a>

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí