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:
<a href="/collections/all" title="Continue shopping">Continue shopping</a>
### For a link that goes to your home page

To add a link that goes to your home page, paste the following code on a new line either before or after the code for the **Checkout** button:
<a href="/" title="Continue shopping">Continue shopping</a>
### For a link that goes to the last collection viewed

To add a link that goes to the last collection viewed, paste the following code on a new line either before or after the code for the **Checkout** button:
<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í