Ẩn nút Thêm vào giỏ hàng

Trang này được in vào Apr 20, 2024. Để lấy phiên bản hiện tại, vui lòng truy cập https://help.shopify.com/vi/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/hide-add-to-cart-buttons.

Bạn có thể ẩn nút Thêm vào giỏ hàng trên trang chủ cửa hàng và hiển thị lại trong tương lai.

Chủ đề có phân mục và không phân mục

  1. Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
  2. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
  3. Trong thư mục Mục, nhấp để mở tệp product-template.liquid của bạn. Tìm mã HTML cho nút Thêm vào giỏ hàng. Bạn có thể bắt đầu bằng cách tìm kiếm từ khóa giỏ hàng.

Mỗi chủ đề sẽ có mã của nút thêm vào giỏ hàng khác nhau. Tìm thẻ <input> hoặc <button> có chữ như Add to cart, AddToCart hoặc add-to-cart.

Trong chủ đề Debut, mã nút thêm vào giỏ hàng có dạng như sau:

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
  1. Khi bạn tìm thấy mã, hãy đặt mã trong thẻ Liquid {% comment %} và {% endcomment %}. Như vậy, mã sẽ không hiển thị trên cửa hàng của bạn, nhưng bạn có thể hiển thị lại mã một cách dễ dàng hơn nếu muốn thay đổi mẫu mới sau này.

Khi sử dụng ví dụ trên, mã mới sẽ có dạng:

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}
  1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Khi bạn đã sẵn sàng hiển thị lại nút Thêm vào giỏ hàng, hãy quay lại tệp product-template.liquid trên trang Chỉnh sửa HTML/CSS, gỡ các thẻ {% comment %} và {% endcomment %}, rồi nhấp vào Lưu.

  1. Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
  2. Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
  3. Trong thư mục Templates, nhấp để mở tệp product.liquid. Tìm mã HTML cho nút Thêm vào giỏ hàng. Bạn có thể bắt đầu bằng cách tìm kiếm từ khóa giỏ hàng.

Mỗi chủ đề sẽ có mã của nút thêm vào giỏ hàng khác nhau. Tìm thẻ <input> hoặc <button> có chữ như Add to cart, AddToCart hoặc add-to-cart.

Trong chủ đề Minimal, mã nút thêm vào giỏ hàng có dạng như sau:

<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
  1. Khi bạn tìm thấy mã, hãy đặt mã trong thẻ Liquid {% comment %} và {% endcomment %}. Như vậy, mã sẽ không hiển thị trên cửa hàng của bạn, nhưng bạn có thể hiển thị lại mã một cách dễ dàng hơn nếu muốn thay đổi mẫu mới sau này.

Khi sử dụng ví dụ trên, mã mới sẽ có dạng:

{% comment %}
<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endcomment %}
  1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Khi bạn đã sẵn sàng hiển thị lại nút Thêm vào giỏ hàng, hãy quay lại mẫu product.liquid trên trang Chỉnh sửa HTML/CSS, bỏ thẻ {% comment %} và {% endcomment %}, sau đó nhấp vào Lưu.

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

Dùng thử miễn phí