Hiển thị Shop Promise trên trang sản phẩm

Huy hiệu Shop Promise hiển thị bên cạnh ngày giao hàng và trên trang sản phẩm đối với các đơn giao hàng đủ điều kiện dự kiến giao nội địa tại Hoa Kỳ trong vòng tối đa 5 ngày dương lịch. Huy hiệu này cho khách hàng biết đơn hàng của họ sẽ được giao nhanh chóng và đáng tin cậy.

Sau khi kích hoạt Shop Promise, hãy truy cập trang sản phẩm bằng trình biên tập chủ đề để xác nhận huy hiệu Shop Promise đang hiển thị chính xác.

Nếu huy hiệu không hiển thị chính xác, hãy đảm bảo cửa hàng đã kích hoạt nút thanh toán nhanh. Bạn cũng có nhiều tùy chọn để tùy chỉnh cách hiển thị huy hiệu Shop Promise.

Định vị thủ công mô-đun Shop Promise

Nếu quen với việc đọc và chỉnh sửa mã chủ đề, bạn có thể xác định vị trí cần thay đổicập nhật trang sản phẩm.

Xác định vị trí cần thay đổi

Mã của mô-đun Shop Promise cần được đưa vào biểu mẫu sản phẩm trên trang sản phẩm, tương tự như {%- form 'product', product -%}. Có thể tìm thấy mô-đun Shop Promise ở nhiều vị trí tùy thuộc vào chủ đề của bạn. Dưới đây là các vị trí phổ biến:

  • main-product.liquid
  • product-form.liquid
  • product-template.liquid
  • product.liquid

Cập nhật trang sản phẩm

Các bước thực hiện:

Máy tính để bàn
  1. Từ trang quản trị Shopify, đi tới Cửa hàng trực tuyến > Chủ đề.

  2. Tìm chủ đề muốn chỉnh sửa, nhấp vào biểu tượng Menu ngang để mở menu thao tác, rồi nhấp vào Chỉnh sửa mã.

  3. Mở tệp có liên quan.

  4. Tìm dòng có chứa {%- if block.settings.show_dynamic_checkout -%} hoặc {{ form | payment_button }}.

  5. Tạo dòng mới ngay bên dưới {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} và dán đoạn mã sau vào dòng đó:

<div class="delivery-promise__promise-container"></div>
  1. Nhấp vào Lưu.

Kết quả sẽ tương tự như sau:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>
Thiết bị di động
  1. Từ ứng dụng Shopify, chạm vào biểu tượng Menu.

  2. Trong mục Kênh bán hàng, chạm vào Cửa hàng trực tuyến > Quản lý tất cả chủ đề.

  3. Tìm chủ đề muốn chỉnh sửa, chạm vào nút để mở menu thao tác, rồi chạm vào Chỉnh sửa mã.

  4. Mở tệp có liên quan.

  5. Tìm dòng có chứa {%- if block.settings.show_dynamic_checkout -%} hoặc {{ form | payment_button }}.

  6. Tạo dòng mới ngay bên dưới {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} và dán đoạn mã sau vào dòng đó:

<div class="delivery-promise__promise-container"></div>
  1. Chạm vào Lưu hoặc .

Kết quả sẽ tương tự như sau:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>

Ghi đè thủ công chủ đề mô-đun Shop Promise

Mô-đun Shop Promise có chủ đề tối và sáng. Mô-đun sẽ tự động sử dụng chủ đề có tỷ lệ tương phản cao nhất so với màu nền của trang sản phẩm.

Nếu quen với việc đọc và chỉnh sửa mã chủ đề, bạn có thể ghi đè chủ đề của mô-đun đã chọn bằng cách thêm thuộc tính dữ liệu vào phần tử neo được dùng để định vị thủ công mô-đun Shop Promise.

Trước khi thực hiện, hãy nhân bản chủ đề và chỉnh sửa trên bản sao đó để dễ dàng hoàn tác các thay đổi.

Các bước thực hiện:

Máy tính để bàn
  1. Làm theo hướng dẫn để định vị thủ công mô-đun Shop Promise trên trang sản phẩm và vẫn mở trình biên tập chủ đề.
  2. Thêm thuộc tính dữ liệu chủ đề vào phần tử neo mới tạo của bạn và thiết lập thành dark hoặc light.
  3. Nhấp vào Lưu.

Kết quả sẽ tương tự như một trong các ví dụ sau:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

Hoặc

<div class="delivery-promise__promise-container" data-theme="light"></div>
Thiết bị di động
  1. Làm theo hướng dẫn để định vị thủ công mô-đun Shop Promise trên trang sản phẩm và vẫn mở trình biên tập chủ đề.
  2. Thêm thuộc tính dữ liệu chủ đề vào phần tử neo mới tạo của bạn và thiết lập thành dark hoặc light.
  3. Chạm vào Lưu.

Kết quả sẽ tương tự như một trong các ví dụ sau:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

Hoặc

<div class="delivery-promise__promise-container" data-theme="light"></div>

Thêm HTML hoặc Liquid tùy chỉnh cho mô-đun Promise

Nếu chủ đề hỗ trợ khối tùy chỉnh, bạn có thể dùng khối Liquid tùy chỉnh để thêm mô-đun Shop Promise vào trang sản phẩm mà không cần chỉnh sửa mã chủ đề.

Các bước thêm mô-đun Promise bằng khối Liquid tùy chỉnh:

Máy tính để bàn
  1. Từ trang quản trị Shopify, đi tới Cửa hàng trực tuyến > Chủ đề.

  2. Tìm chủ đề muốn chỉnh sửa rồi nhấp vào Chỉnh sửa chủ đề.

  3. Điều hướng đến trang sản phẩm bằng bộ chọn mẫu ở thanh menu trên cùng.

  4. Trong menu thanh bên, tìm mục Thông tin sản phẩm.

  5. Nhấp vào Thêm khối rồi chọn Liquid tùy chỉnh trong danh sách các khối hiện có.

  6. Trong trường văn bản Liquid tùy chỉnh, hãy dán mã sau:

<div class="delivery-promise__promise-container"></div>
  1. Định vị khối bằng cách kéo đến vị trí mong muốn, thường là bên dưới khối Nút mua.
  2. Nhấp vào Lưu để áp dụng thay đổi.

Nếu muốn chỉ định tùy chọn chủ đề (tối hoặc sáng), hãy dùng một trong các mã sau để thay thế:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

Hoặc

<div class="delivery-promise__promise-container" data-theme="light"></div>
Thiết bị di động
  1. Từ ứng dụng Shopify, chạm vào biểu tượng Menu.

  2. Trong mục Kênh bán hàng, chạm vào Cửa hàng trực tuyến > Quản lý tất cả chủ đề.

  3. Tìm chủ đề đang hoạt động rồi chạm vào Chỉnh sửa chủ đề.

  4. Điều hướng đến trang sản phẩm bằng bộ chọn mẫu ở trên cùng.

  5. Chạm vào mục Thông tin sản phẩm.

  6. Chạm vào Thêm khối rồi chọn Liquid tùy chỉnh.

  7. Trong trường văn bản Liquid tùy chỉnh, hãy dán mã sau:

<div class="delivery-promise__promise-container"></div>
  1. Định vị khối bằng cách kéo đến vị trí mong muốn, thường là bên dưới khối Nút mua.
  2. Chạm vào Lưu để áp dụng thay đổi.

Nếu muốn chỉ định tùy chọn chủ đề (tối hoặc sáng), hãy dùng một trong các mã sau để thay thế:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

Hoặc

<div class="delivery-promise__promise-container" data-theme="light"></div>

Ngôn ngữ được hỗ trợ cho huy hiệu Shop Promise

Tham khảo bảng sau để biết các ngôn ngữ có thể hiển thị huy hiệu Shop Promise. Nếu ngôn ngữ của cửa hàng bạn không được hỗ trợ, huy hiệu Shop Promise sẽ hiển thị bằng tiếng Anh.

Các ngôn ngữ có thể hiển thị huy hiệu Shop Promise.
Tiếng Trung (Giản thể)Tiếng Trung (Phồn thể)Tiếng CroatiaTiếng Séc
Tiếng Đan MạchTiếng Hà LanTiếng AnhTiếng Phần Lan
Tiếng PhápTiếng ĐứcTiếng Hy LạpTiếng Hindi
Tiếng HungaryTiếng IndonesiaTiếng ÝTiếng Nhật
Tiếng HànTiếng LitvaTiếng Mã LaiTiếng Na Uy (Bokmål)
Tiếng Ba LanTiếng Bồ Đào Nha (Brazil)Tiếng Bồ Đào Nha (Bồ Đào Nha)Tiếng Romania
Tiếng NgaTiếng SlovakiaTiếng SloveniaTiếng Tây Ban Nha
Tiếng Thụy ĐiểnTiếng TháiTiếng Thổ Nhĩ KỳTiếng Việt