Thay thế "Thêm vào giỏ hàng" bằng liên kết liên hệ

Cẩn trọng

Chủ đề cổ điển không có trong Cửa hàng chủ đề. Những chủ đề này không có các tính năng thuộc Chủ đề Online Store 2.0 của Shopify, và chủ đề Cổ điển miễn phí của Shopify sẽ không nhận được bản cập nhật ngoài bản sửa lỗi bảo mật.

Lưu ý

Nếu bạn sử dụng chủ đề miễn phí từ Shopify, bạn có thể liên hệ với Bộ phận hỗ trợ của Shopify để được trợ giúp về hướng dẫn này. Thời gian thiết kế yêu cầu 15 phút. Để tìm hiểu thêm, tham khảo Support cho themes.

Lưu ý

Tùy chỉnh này áp dụng cho chủ đề Shopify cổ điển và không áp dụng cho chủ đề Online Store 2.0.

• Khám phá phiên bản cấu trúc của chủ đề
• Khám phá nội dung tùy chỉnh của chủ đề Online Store 2.0

Bạn có thể thay thế nút Thêm vào giỏ hàng bằng liên kết email hoặc biểu mẫu liên hệ. Ví dụ: Bạn có thể thay thế nút Thêm vào giỏ hàng đối với sản phẩm hiện không được rao bán hoặc đối với sản phẩm được đặt hàng.

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

Lưu ý

Các bước hướng dẫn này khác nhau tùy thuộc vào việc bạn sử dụng chủ đề có phân mục hay không phân mục. Chủ đề có phân mục cho phép bạn kéo và thả để sắp xếp bố cục trang chủ còn chủ đề không phân mục thì không.

Để tìm hiểu xem chủ đề của bạn có hỗ trợ phân mục không, vào trang Edit code (Chỉnh sửa mã) của chủ đề. Nếu có tệp trong thư mục Sections thì bạn đang sử dụng chủ đề có phân mục. Chủ đề không phân mục được phát hành trước tháng 10 năm 2016 và không có tệp trong thư mục Sections.

Nếu bạn đang sử dụng chủ đề có phân mục, nhấp vào nút Chủ đề có phân mục và làm theo hướng dẫn. Nếu bạn đang sử dụng chủ đề cũ và không phân mục, nhấp vào nút Chủ đề không phân mục và làm theo hướng dẫn.

Các bước đối với Chủ đề có phân mục

Chọn chủ đề

Có nhiều bước tùy chỉnh khác nhau phụ thuộc vào việc bạn đang sử dụng chủ đề Narrative hay chủ đề miễn phí khác do Shopify phát triển. Nhấp vào nút dành cho chủ đề của bạn trước khi làm theo hướng dẫn dưới đây:

Narrative

Tạo mẫu sản phẩm mới trong chủ đề Narrative

Để thay thế nút Thêm vào giỏ hàng của sản phẩm, bạn cần tạo mẫu sản phẩm tùy chỉnh cho sản phẩm đó.

Bướ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ẫu, nhấp vào Thêm mẫu mới.

4. Tạo mẫu sản phẩm:

   • Trong menu thả xuống, chọn Sản phẩm.
   • Đặt tên cho mẫu requires-contact.
   • Nhấp vào Tạo mẫu.

5. Tìm mã sau:

{% section 'product-template' %}

Thay bằng:

{% section 'product-template-requires-contact' %}

Mã này liên kết mẫu mới với mục sản phẩm mới bạn sẽ tạo trong các bước tiếp theo.

1. Nhấp vào Save (Lưu).

Tạo mục sản phẩm mới

1. Trong thư mục Mục, nhấp vào Thêm mục mới.

2. Tạo mục:

   1. Đặt tên cho mục mới product-template-requires-contact.
   2. Nhấp vào Tạo mục.

3. Xóa tất cả mã mặc định trong tệp mục để làm trống tệp.

4. Trong thư mục Mục, nhấp vào product-template.liquid. Sao chép tất cả nội dung của tệp vào bảng nhớ tạm.

5. Quay lại mục product-template-requires-contact.liquid mới của bạn và dán mã vào tệp.

6. Nhấp vào Save (Lưu).

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

1. Trong tệp product-template-requires-contact.liquid mới, tìm mã HTML cho Biểu mẫu sản phẩm của trang sản phẩm. Bạn có thể tìm mã đó bằng cách tìm kiếm từ form trong tệp.

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

Đối với chủ đề Narrative, mã được sửa đổi sẽ có dạng như sau:

{% comment %}
{% include 'product-form' %}
{% endcomment %}

1. Nhấp vào Save (Lưu).

Thêm liên kết email hoặc biểu mẫu liên hệ

Vì đã ẩn nút Thêm vào giỏ hàng, bạn có thể thêm nội dung bạn muốn hiển thị thay vào đó.

Liên kết email

Bạn có thể thêm liên kết email sẽ mở chương trình email mặc định của khách hàng và nhập địa chỉ email liên hệ với khách hàng của cửa hàng vào phần người nhận. Để thêm liên kết email:

1. Trên một dòng mới phía dưới thẻ Liquid {% endcomment %} mà bạn đã thêm ở bước trước, hãy thêm mã HTML cho liên kết email:

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. Nhấp vào Save (Lưu).

Biểu mẫu liên hệ

Bạn có thể thêm biểu mẫu liên hệ vào mẫu sản phẩm mới bằng cách sao chép mã từ mẫu trang liên hệ của chủ đề. Để thêm biểu mẫu liên hệ:

1. Trong thư mục Templates, nhấp vào page.contact.liquid.
2. Tìm thẻ Liquid {% form 'contact' %} trong tệp.
3. Sao chép tất cả mã từ thẻ Liquid {% form 'contact' %} xuống thẻ Liquid {% endform %}. Thêm thẻ biểu mẫu Liquid vào mã bạn sao chép.
4. Quay lại tệp mới product.requires-contact.liquid của bạn trong thư mục Mẫu.

Trên một dòng mới bên dưới thẻ Liquid {% endcomment %} bạn đã thêm, dán mã cho biểu mẫu liên hệ.

1. Bước tiếp theo là đặt mã bạn vừa dán vào thẻ div HTML. Thuộc tính lớp có trong mã thẻ div sẽ đảm bảo biểu mẫu liên hệ của bạn kết xuất chính xác trên trang.

Trên một dòng mới phía trên {% form 'contact' %}, dán mã sau:

<div class="form-vertical">

Dán mã sau vào một dòng mới bên dưới {% endform %}:

</div>

1. Nhấp vào Save (Lưu).

Chỉ định mẫu mới cho sản phẩm

Vì mẫu đã hoàn tất, bạn có thể chỉ định mẫu cho tất cả sản phẩm bạn muốn ẩn nút Thêm vào giỏ hàng.

1. Trong trang quản trị Shopify, vào mục Sản phẩm.

2. Nhấp vào tên sản phẩm bạn muốn ẩn nút Thêm vào giỏ hàng.

3. Trên trang sản phẩm của trang quản trị Shopify, trong Cửa hàng trực tuyến, chọn mẫu requires-contact mới trong menu thả xuống Mẫu chủ đề.

4. Nhấp vào Save (Lưu).

Lặp lại những bước này đối với mỗi sản phẩm bạn muốn thêm mẫu mới.

Other

Tạo mẫu sản phẩm mới

Để thay thế nút Thêm vào giỏ hàng của sản phẩm, bạn cần tạo mẫu sản phẩm tùy chỉnh cho sản phẩm đó.

Bướ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ẫu, nhấp vào Thêm mẫu mới.

4. Tạo mẫu sản phẩm:

   • Trong menu thả xuống, chọn Sản phẩm.
   • Đặt tên cho mẫu requires-contact.
   • Nhấp vào Tạo mẫu.

5. Tìm mã sau:

{% section 'product-template' %}

Thay bằng:

{% section 'product-template-requires-contact' %}

Mã này liên kết mẫu mới với mục sản phẩm mới bạn sẽ tạo trong các bước tiếp theo.

1. Nhấp vào Save (Lưu).

Tạo mục sản phẩm mới

1. Trong thư mục Mục, nhấp vào Thêm mục mới.

2. Tạo mục:

   1. Đặt tên cho mục mới product-template-requires-contact.
   2. Nhấp vào Tạo mục.

3. Xóa tất cả mã mặc định trong tệp mục để làm trống tệp.

4. Trong thư mục Mục, nhấp vào product-template.liquid. Sao chép tất cả nội dung của tệp vào bảng nhớ tạm.

5. Quay lại mục product-template-requires-contact.liquid mới của bạn và dán mã vào tệp.

6. Nhấp vào Save (Lưu).

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

1. Trong tệp mục product-template-requires-contact.liquid mới, tìm mã HTML cho nút Thêm vào giỏ hàng của trang sản phẩm. Bạn có thể tìm mã đó bằng cách tìm kiếm từ cart trong tệp.

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

Đối với 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.

Với chủ đề Debut, mã được sửa đổi sẽ có dạng như sau:

{% 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 %}

Cẩn trọng

Đảm bảo bạn không bình luận về các thẻ <form> của trang sản phẩm. Không đặt thẻ bình luận xung quanh bất kỳ thẻ <form> hoặc </form> nào, nếu không khách hàng có thể gặp lỗi khi xem trang sản phẩm.

1. Nhấp vào Save (Lưu).

Thêm liên kết email hoặc biểu mẫu liên hệ

Vì đã ẩn nút Thêm vào giỏ hàng, bạn có thể thêm nội dung bạn muốn hiển thị thay vào đó.

Liên kết email

Bạn có thể thêm liên kết email sẽ mở chương trình email mặc định của khách hàng và nhập địa chỉ email liên hệ với khách hàng của cửa hàng vào phần người nhận. Để thêm liên kết email:

1. Trên một dòng mới phía dưới thẻ Liquid {% endcomment %} mà bạn đã thêm ở bước trước, hãy thêm mã HTML cho liên kết email:

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. Nhấp vào Save (Lưu).

Biểu mẫu liên hệ

Bạn có thể thêm biểu mẫu liên hệ vào mẫu sản phẩm mới bằng cách sao chép mã từ mẫu trang liên hệ của chủ đề. Để thêm biểu mẫu liên hệ:

1. Trong thư mục Templates, nhấp vào page.contact.liquid.
2. Tìm thẻ Liquid {% form 'contact' %} trong tệp.
3. Sao chép tất cả mã từ thẻ Liquid {% form 'contact' %} xuống thẻ Liquid {% endform %}. Thêm thẻ biểu mẫu Liquid vào mã bạn sao chép.
4. Quay lại tệp product-template-requires-contact.liquid mới trong thư mục Mục.
5. Tìm thẻ có kết thúc là </form> trong mã. Trên một dòng mới bên dưới thẻ có kết thúc là </form>, dán mã cho biểu mẫu liên hệ.
6. Bước tiếp theo là đặt mã bạn vừa dán vào thẻ div HTML. Thuộc tính lớp có trong mã thẻ div sẽ đảm bảo biểu mẫu liên hệ của bạn kết xuất chính xác trên trang.

Trên một dòng mới phía trên {% form 'contact' %}, dán mã sau:

<div class="form-vertical"></div>

Dán mã sau vào một dòng mới bên dưới {% endform %}:

</div>

1. Nhấp vào Save (Lưu).

Chỉ định mẫu mới cho sản phẩm

Vì mẫu đã hoàn tất, bạn có thể chỉ định mẫu cho tất cả sản phẩm bạn muốn ẩn nút Thêm vào giỏ hàng.

1. Trong trang quản trị Shopify, vào mục Sản phẩm.

2. Nhấp vào tên sản phẩm bạn muốn ẩn nút Thêm vào giỏ hàng.

3. Trên trang sản phẩm của trang quản trị Shopify, trong Cửa hàng trực tuyến, chọn mẫu requires-contact mới trong menu thả xuống Mẫu chủ đề.

4. Nhấp vào Save (Lưu).

Lặp lại những bước này đối với mỗi sản phẩm bạn muốn thêm mẫu mới.

Các bước đối với Chủ đề không phân mục

Tạo mẫu sản phẩm mới

Để thay thế nút Thêm vào giỏ hàng của sản phẩm, bạn cần tạo mẫu sản phẩm tùy chỉnh cho sản phẩm đó.

Bướ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ẫu, nhấp vào Thêm mẫu mới.
4. Tạo mẫu sản phẩm:
   • Trong menu thả xuống, chọn Sản phẩm.
   • Đặt tên cho mẫu requires-contact.
   • Nhấp vào Tạo mẫu.

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

1. Trong tệp mục product.requires-contact.liquid mới, tìm mã HTML cho nút Thêm vào giỏ hàng. Bạn có thể tìm từ cart.

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

Đối với 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.

Với chủ đề Debut, mã được sửa đổi sẽ có dạng như sau:

{% 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 %}

Cẩn trọng

Đảm bảo bạn không bình luận về các thẻ <form> của trang sản phẩm. Không đặt thẻ bình luận xung quanh bất kỳ thẻ <form> hoặc </form> nào, nếu không khách hàng có thể gặp lỗi khi xem trang sản phẩm.

1. Nhấp vào Save (Lưu).

Thêm liên kết email hoặc biểu mẫu liên hệ

Vì đã ẩn nút Thêm vào giỏ hàng, bạn có thể thêm nội dung bạn muốn hiển thị thay vào đó.

Liên kết email

1. Trên một dòng mới phía dưới thẻ Liquid {% endcomment %} mà bạn đã thêm ở bước trước, hãy thêm mã HTML cho liên kết email:

Please <a href="mailto:{{ shop.email }}">contact us</a> if you are
interested in this product.

1. Nhấp vào Save (Lưu).

Biểu mẫu liên hệ

Bạn có thể thêm biểu mẫu liên hệ vào mẫu sản phẩm mới bằng cách sao chép mã từ mẫu trang liên hệ của chủ đề. Để thêm biểu mẫu liên hệ:

1. Trong thư mục Templates, nhấp vào page.contact.liquid.
2. Tìm thẻ Liquid {% form 'contact' %} trong tệp.
3. Sao chép tất cả mã từ thẻ Liquid {% form 'contact' %} xuống thẻ Liquid {% endform %}. Thêm thẻ biểu mẫu Liquid vào mã bạn sao chép.
4. Quay lại tệp mới product.requires-contact.liquid của bạn trong thư mục Mẫu.
5. Tìm thẻ có kết thúc là </form> trong mã. Trên một dòng mới bên dưới thẻ có kết thúc là </form>, dán mã cho biểu mẫu liên hệ.
6. Bước tiếp theo là đặt mã bạn vừa dán vào thẻ div HTML. Thuộc tính lớp có trong mã thẻ div sẽ đảm bảo biểu mẫu liên hệ của bạn kết xuất chính xác trên trang.

Trên một dòng mới phía trên {% form 'contact' %}, dán mã sau:

<div class="form-vertical"></div>

Dán mã sau vào một dòng mới bên dưới {% endform %}:

</div>

1. Nhấp vào Save (Lưu).

Chỉ định mẫu mới cho sản phẩm

Vì mẫu đã hoàn tất, bạn có thể chỉ định mẫu cho tất cả sản phẩm bạn muốn ẩn nút Thêm vào giỏ hàng.

1. Trong trang quản trị Shopify, chuyển đến Sản phẩm.
2. Nhấp vào tên sản phẩm bạn muốn ẩn nút Thêm vào giỏ hàng.
3. Trên trang sản phẩm của trang quản trị Shopify, trong Cửa hàng trực tuyến, chọn mẫu requires-contact mới trong menu thả xuống Mẫu chủ đề.
4. Nhấp vào Save (Lưu).

Lặp lại những bước này đối với mỗi sản phẩm bạn muốn thêm mẫu mới.