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

Trang này được in vào Dec 03, 2023. Để lấy phiên bản hiện tại, vui lòng truy cập https://help.shopify.com/vi/manual/shipping/shop-promise/product-page.

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 những đơn giao hàng đủ điều kiện và dự kiến được gửi nội địa tại Hoa Kỳ trong tối đa năm ngày theo lịch. Huy hiệu này cho khách hàng biết rằng đơn hàng của họ được giao nhanh chóng và đáng tin cậy.

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

Nếu huy hiệu không hiển thị chính xác thì bạn cần đặt mô-đun Shop Promise vào đúng vị trí theo cách thủ công.

Trên trang này

Đặt mô-đun Shop Promise vào đúng vị trí theo cách thủ công

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

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

Bạn cần thêm mã cho mô-đun Shop Promise vào biểu mẫu sản phẩm trên trang sản phẩm, mã này sẽ có dạng {%- form 'product', product -%}. Bạn có thể tìm thấy mô-đun Shop Promise tại nhiều vị trí tùy thuộc vào chủ đề của bạn. Dưới đây là những 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

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. Mở tệp 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 một dòng mới ngay bên dưới {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} và dán những mã sau vào dòng đó: 
<div class="delivery-promise__promise-container"></div>
  1. Nhấp vào Save (Lưu).

Kết quả sẽ có dạng như sau:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>
  1. Trong ứng dụng Shopify, chạm vào nút ….
  2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
  3. Nhấn vào Manage themes (Quản lý chủ đề).
  4. 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ã.
  5. Mở tệp liên quan.
  6. Tìm dòng có chứa {%- if block.settings.show_dynamic_checkout -%} hoặc {{ form | payment_button }}.
  7. Tạo một dòng mới ngay bên dưới {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} và dán những mã sau vào dòng đó: 
<div class="delivery-promise__promise-container"></div>
  1. Nhấp vào Save (Lưu).

Kết quả sẽ có dạng như sau:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>
  1. Trong ứng dụng Shopify, chạm vào nút ….
  2. Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến.
  3. Nhấn vào Manage themes (Quản lý chủ đề).
  4. 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ã.
  5. Mở tệp liên quan.
  6. Tìm dòng có chứa {%- if block.settings.show_dynamic_checkout -%} hoặc {{ form | payment_button }}.
  7. Tạo một dòng mới ngay bên dưới {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} và dán những mã sau vào dòng đó: 
<div class="delivery-promise__promise-container"></div>
  1. Nhấp vào Save (Lưu).

Kết quả sẽ có dạng 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 tự động sử dụng chủ đề nào 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 thành thạo đọc và chỉnh sửa mã chủ đề, bạn có thể ghi đè chủ đề đã chọn của mô-đun bằng cách thêm thuộc tính dữ liệu vào phần tử neo được sử dụng để đặt vị trí mô-đun Shop Promise theo cách thủ công.

Trước khi thực hiện thay đổi, nhân bản chủ đề và chỉnh sửa chủ đề đã nhân bản để có thể dễ dàng khôi phục các thay đổi.

Bước:

  1. Làm theo hướng dẫn để đặt vị trí mô-đun Shop Promise theo cách thủ công trên trang sản phẩm rồi để trình biên tập chủ đề luôn mở.
  2. Thêm thuộc tính dữ liệu chủ đề cho phần tử neo mới tạo được đặt thành tối hoặc sáng.
  3. Nhấp vào Save (Lưu).

Kết quả phải trông giống một trong những kết quả sau:

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

Hoặc

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

Kết quả phải trông giống một trong những kết quả sau:

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

Hoặc

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

Kết quả phải trông giống một trong những kết quả sau:

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

Hoặc

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

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

Dùng thử miễn phí