Hiển thị đơn giá

Lưu ý

Hướng dẫn này chỉ dành cho những thương nhân bán hàng tại Đức. Nếu bạn đang bán sản phẩm tại Đức nhưng doanh nghiệp của bạn không có trụ sở tại Đức, hãy liên hệ với Bộ phận hỗ trợ của Shopify để kích hoạt tính năng này.

Nếu bán sản phẩm theo số lượng hoặc kích thước, có thể bạn sẽ cần hiển thị giá cho mỗi đơn vị của một số sản phẩm nhất định. Khi bạn nhập đơn giá cho sản phẩm, đơn giá được hiển thị trên trang sản phẩm, trang bộ sưu tập, trang giỏ hàng, trang thanh toán và thông báo xác nhận đơn hàng.

Thêm đơn giá cho sản phẩm

Máy tính để bàn

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

2. Nhấp vào sản phẩm bạn muốn chỉnh sửa.

3. Không bắt buộc: Nếu sản phẩm có nhiều mẫu mã thì trong mục Mẫu mã, nhấp vào mẫu mã bạn muốn chỉnh sửa.

4. Trong mục Định giá, chọn Hiển thị đơn giá cho sản phẩm này.

5. Trong trường Tổng kích thước sản phẩm, nhập tổng kích thước của sản phẩm, sau đó chọn đơn vị đo lường.

6. Không bắt buộc: Trong trường Phép đo cơ sở, thêm phép đo cơ sở, sau đó chọn đơn vị đo. Ví dụ: Đối với sản phẩm nặng 1 kg, bạn có thể chọn đơn vị cơ sở là 100 g.

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

iPhone

1. Trong Ứng dụng Shopify, vào mục Sản phẩm > All products (Tất cả sản phẩm).
2. Chạm vào sản phẩm bạn muốn chỉnh sửa.
3. Chạm vào khu vực giá sản phẩm.
4. Chọn Hiển thị đơn giá.
5. Trong trường Tổng kích thước sản phẩm, nhập tổng kích thước của sản phẩm, sau đó chọn đơn vị đo lường.
6. Không bắt buộc: Trong trường Phép đo cơ sở, thêm phép đo cơ sở, sau đó chọn đơn vị đo. Ví dụ: Đối với sản phẩm nặng 1 kg, bạn có thể chọn đơn vị cơ sở là 100 g.
7. Chạm vào Save (Lưu).

Android

1. Trong Ứng dụng Shopify, vào mục Sản phẩm > All products (Tất cả sản phẩm).
2. Chạm vào sản phẩm bạn muốn chỉnh sửa.
3. Chạm vào khu vực giá sản phẩm.
4. Chọn Hiển thị đơn giá.
5. Trong trường Tổng kích thước sản phẩm, nhập tổng kích thước của sản phẩm, sau đó chọn đơn vị đo lường.
6. Không bắt buộc: Trong trường Phép đo cơ sở, thêm phép đo cơ sở, sau đó chọn đơn vị đo. Ví dụ: Đối với sản phẩm nặng 1 kg, bạn có thể chọn đơn vị cơ sở là 100 g.
7. Chạm vào ✓.

Hiển thị đơn giá trên cửa hàng trực tuyến

Tất cả chủ đề Online Store 2.0 đều có tính năng đơn giá. Không cần thực hiện thao tác nào để hiển thị đơn giá trên cửa hàng trực tuyến.

Nếu có chủ đề cổ điển và không thể cập nhật lên phiên bản hỗ trợ tính năng đơn giá, bạn có thể tùy chỉnh mã chủ đề theo cách thủ công để hiển thị đơn giá.

Hiển thị đơn giá trên chủ đề cũ

Cẩn trọng

Sao lưu chủ đề trước khi bắt đầu chỉnh sửa mã. Dưới đây là các hướng dẫn nâng cao. Nếu cần trợ giúp thêm tính năng này vào chủ đề, bạn có thể cân nhắc nhận hỗ trợ về tùy chỉnh.

Có nhiều bước tùy chỉnh khác nhau phụ thuộc vào chủ đề bạn chọn. Nhấp vào nút chủ đề của bạn trước khi thực hiện theo hướng dẫn dưới đây:

Debut

Các bước thực hiện dành cho chủ đề Khai trương

Có thể sử dụng đơn giá trong chủ đề Khai trương cho các phiên bản từ 12.1.0 trở lên. Nếu không thể cập nhật chủ đề lên phiên bản mới nhất, bạn có thể thêm tùy chỉnh đơn giá cho các phiên bản trước của chủ đề Khai trương.

Sửa đoạn mã giá sản phẩm

1. Trong thư mục Đoạn mã, nhấp vào tệp product-price.liquid.

2. Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm data-price:

<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}" data-price>

1. Thay thế mã bằng đoạn mã sau:

<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}{% if available and variant.unit_price_measurement %} price--unit-available{% endif %}" data-price>

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm price__sale:

<div class="price__sale">
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="price-item price-item--sale" data-sale-price>
      {{ money_price }}
    </span>
    <span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
  </dd>
</div>

1. Thêm mã sau vào phía dưới thẻ có kết thúc là </div>:

{% if variant.unit_price_measurement %}
<div class="price__unit">
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd class="price-unit-price">
    {%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if available and variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
  </dd>
</div>
{% endif %}

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Sửa trang giỏ hàng

1. Trong thư mục Sections, nhấp vào tập tin cart-template.liquid.

2. Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm cart__price-wrapper:

{%- if item.original_price != item.final_price -%}
  <dl>
    <dt>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      <s>{{ item.original_price | money }}</s>
    </dd>
    <dt>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="order-discount">{{ item.final_price | money }}</span>
    </dd>
  </dl>
{%- else -%}
  {{ item.original_price | money }}
{%- endif -%}

1. Thay thế mã bằng đoạn mã sau:

<dl>
  {%- if item.original_price != item.final_price -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    <s>{{ item.original_price | money }}</s>
  </dd>
  <dt>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="order-discount">{{ item.final_price | money }}</span>
  </dd>
  {%- else -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    {{ item.original_price | money }}
  </dd>
  {%- endif -%}
  {%- if item.unit_price_measurement -%}
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd>
    <span class="price-unit-price">
      {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
      {%- if item.unit_price_measurement.reference_value != 1 -%}
      {{- item.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ item.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </dd>
  {%- endif -%}
</dl>

Sau khi chỉnh sửa, tệp cart-template.liquid sẽ có dạng như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Chỉnh sửa trang bộ sưu tập

1. Trong thư mục Sections, nhấp vào tập tin collection.liquid.

2. Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm grid-view-item__title:

{% include 'product-price' %}

1. Thay thế mã bằng đoạn mã sau:

{% include 'product-price', variant: nil %}

Sau khi chỉnh sửa, tệp collection.liquid sẽ có dạng như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Sửa lưới thẻ sản phẩm

1. Trong thư mục Đoạn mã, nhấp vào tệp product-card-grid.liquid.

2. Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm grid-view-item__title:

{% include 'product-price', variant: product %}

1. Thay thế mã bằng đoạn mã sau:

{% include 'product-price', variant: product.selected_or_first_available_variant %}

Sau khi chỉnh sửa, tệp product-card-grid.liquid sẽ có dạng như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Chỉnh sửa danh sách thẻ sản phẩm

1. Trong thư mục Đoạn mã, nhấp vào tệp product-card-list.liquid.

2. Dùng phím tắt tìm kiếm để tìm mã sau đây bằng cách tìm kiếm {% if product.available %}:

{% include 'product-price', variant: product %}

1. Thay thế mã bằng đoạn mã sau:

{% include 'product-price', variant: product.selected_or_first_available_variant %}

Sau khi chỉnh sửa, tệp product-card-list.liquid sẽ có dạng như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Chỉnh sửa trang đơn hàng

1. Trong thư mục Templates, nhấp vào tập tin customers/order.liquid.

2. Dùng phím tắt tìm kiếm để tìm mã sau đây bằng cách tìm kiếm data-label="{{ 'customer.order.price' | t }}":

{%- if line_item.original_price != line_item.final_price -%}
  <dl>
    <dt>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      <s>{{ line_item.original_price | money }}</s>
    </dd>
    <dt>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="order-discount">{{ line_item.final_price | money }}</span>
    </dd>
  </dl>
{%- else -%}
  {{ line_item.original_price | money }}
{%- endif -%}

1. Thay thế mã bằng đoạn mã sau:

<dl>
  {%- if line_item.original_price != line_item.final_price -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    <s>{{ line_item.original_price | money }}</s>
  </dd>
  <dt>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="order-discount">{{ line_item.final_price | money }}</span>
  </dd>
  {%- else -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    {{ line_item.original_price | money }}
  </dd>
  {%- endif -%}
  {%- if line_item.unit_price_measurement -%}
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd>
    <span class="price-unit-price">
      {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
      {%- if line_item.unit_price_measurement.reference_value != 1 -%}
      {{- line_item.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ line_item.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      <span data-unit-price>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </dd>
  {%- endif -%}
</dl>

Sau khi chỉnh sửa, tệp customers/order.liquid sẽ có dạng như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Chỉnh sửa kiểu chủ đề

1. Trong thư mục Tài sản, nhấp vào tệp theme.scss.liquid.

2. Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm .price__vendor {:

.price__vendor {
  color: $color-body-text;
  font-size: 0.9em;
  font-weight: $font-weight-body;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 5px 0 10px;
  width: 100%;
  @include flex-basis(100%);
}

1. Thêm đoạn mã sau vào phía dưới mã ở bước 2:

.price__unit {
  @include flex-basis(100%);
  display: none;

  .price--unit-available & {
    display: block;
  }
}
.price-unit-price {
  color: $color-body-text;
  font-size: 0.8em;
}

Sau khi chỉnh sửa, tệp theme.scss.liquid sẽ có dạng như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Sửa mã chủ đề javascript

1. Trong thư mục Tài sản, nhấp vào tệp theme.js.

2. Dùng phím tắt tìm kiếm để tìm mã sau:

salePrice: '[data-sale-price]'

1. Thêm đoạn mã sau vào phía trên mã ở bước 2:

unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm mã sau:

productOnSale: 'price--on-sale',

1. Thêm đoạn mã sau vào phía sau mã ở bước 4:

productUnitAvailable: 'price--unit-available',

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm mã sau:

var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]';

1. Thay thế mã bằng đoạn mã sau:

var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$]';

1. Dùng phím tắt tìm kiếm để tìm mã sau:

var salePrice = '';

1. Thêm đoạn mã sau vào phía dưới mã ở bước 8:

var unitLabel = '';
var unitPrice = '';
if (variant.unit_price_measurement) {
  unitLabel = theme.strings.unitPrice;
  unitPrice =
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat) +
    ' ' +
    theme.strings.unitPriceSeparator +
    ' ' +
    this._getBaseUnit(variant);
}

1. Dùng phím tắt tìm kiếm để tìm mã sau:

.replace('[$]', salePrice)

1. Thêm đoạn mã sau vào phía dưới mã ở bước 10:

.replace('[UnitPrice]', unitLabel)
.replace('[$$$]', unitPrice)

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm mã sau:

_updatePrice: function(evt) {

1. Thêm đoạn mã sau vào phía trước mã ở bước 12:

_getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;
},

1. Dùng phím tắt tìm kiếm để tìm mã sau:

var $salePrice = $(this.selectors.salePrice, $priceContainer);

1. Thêm đoạn mã sau vào phía dưới mã ở bước 14:

var $unitPrice = $(this.selectors.unitPrice, $priceContainer);
var $unitPriceBaseUnit = $(
  this.selectors.unitPriceBaseUnit,
  $priceContainer
);

1. Dùng phím tắt tìm kiếm để tìm mã sau:

.removeClass(this.classes.productOnSale)

1. Thêm đoạn mã sau vào phía dưới mã ở bước 16:

.removeClass(this.classes.productUnitAvailable)

1. Dùng phím tắt tìm kiếm để tìm mã sau:

else {
  // Regular price
  $regularPrice.html(
    theme.Currency.formatMoney(variant.price, theme.moneyFormat)
  );
}

1. Thêm đoạn mã sau vào phía dưới mã ở bước 18:

// Unit price
if (variant.unit_price_measurement) {
  $unitPrice.html(
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat)
  );
  $unitPriceBaseUnit.html(this._getBaseUnit(variant));
  $priceContainer.addClass(this.classes.productUnitAvailable);
}

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Chỉnh sửa bản dịch tiếng Anh

1. Trong thư mục Locales, nhấp vào tập tin en.default.json.

2. Dùng phím tắt tìm kiếm để tìm mã sau:

"selection_help": "press the space key then arrow keys to make a selection"

1. Thêm đoạn mã sau vào phía trên mã ở bước 2:

"unit_price_separator": "per",

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm mã sau:

"include_taxes": "Tax included.",

1. Thêm đoạn mã sau vào phía dưới mã ở bước 4:

"unit_price_label": "Unit price",

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Chỉnh sửa bố cục chủ đề

1. Trong thư mục Layout, nhấp vào tập tin theme.liquid.

2. Dùng phím tắt tìm kiếm để tìm mã sau:

regularPrice: {{ 'products.product.regular_price' | t | json }},

1. Thêm đoạn mã sau vào phía dưới mã ở bước 2:

unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},

Sau khi chỉnh sửa, tệp theme.liquid sẽ có dạng như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

(Không bắt buộc) Thêm bản dịch cho các ngôn ngữ khác

1. Truy cập vào trang Chủ đề trong phần Quản trị viên Shopify.

2. Nhấp vào nút ... > Chỉnh sửa nội dung chủ đề mặc định.

3. Nhấp vào Change theme language (Thay đổi ngôn ngữ chủ đề), rồi chọn ngôn ngữ bạn muốn chỉnh sửa. Chỉ thực hiện được trên chủ đề đã đăng.

4. Nhập Unit Price vào trường tìm kiếm.

5. Cập nhật trường Dấu phân cách đơn giá trong phần Cài đặt chung / Khả năng truy cập.

6. Cập nhật trường Unit price label (Nhãn đơn giá) trong phần Sản phẩm / Sản phẩm.

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

Brooklyn

Các bước dành cho chủ đề Brooklyn

Có thể sử dụng đơn giá trong chủ đề Brooklyn cho các phiên bản từ 13.1.0 trở lên. Nếu không thể cập nhật chủ đề lên phiên bản mới nhất thì bạn có thể thêm tùy chỉnh đơn giá cho các phiên bản trước của chủ đề Brooklyn.

Thêm đoạn mã giá sản phẩm

1. Trong thư mục Đoạn mã, nhấp vào Thêm đoạn mã mới.

2. Nhập product-price vào trường tên.

3. Sao chép và dán mã sau vào tập tin.

<div class="price-container{% if variant.unit_price_measurement %} price-container--unit-available{% endif %}" data-price-container>
  {%- if variant.compare_at_price > variant.price -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper" aria-hidden="false">
      <span id="ComparePrice" class="product-single__price--compare-at">
        {{ variant.compare_at_price | money }}
      </span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
  {%- else -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper hide" aria-hidden="true">
      <span id="ComparePrice" class="product-single__price--compare-at"></span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
  {%- endif -%}
  <span id="ProductPrice"
    class="product-single__price{% if variant.compare_at_price > variant.price %} on-sale{% endif %}"
    itemprop="price"
    content="{{ variant.price | divided_by: 100.00 }}">
    {{ variant.price | money }}
  </span>
  <div class="product-single__unit">
    {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span class="product-unit-price">
      <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </div>
</div>

1. Nhấp vào Lưu để xác nhận thay đổi.

Sửa trang sản phẩm nổi bật

1. Trong thư mục Sections (Phần), nhấp vào tập tin featured-product.liquid.

2. Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm itemprop="offers":

<div data-price-container>
    {% comment %}
        Optionally show the 'compare at' or original price of the product.
    {% endcomment %}
    {% if compare_at_price > price %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper" aria-hidden="false">
        <span id="ComparePrice" class="product-single__price--compare-at">
            {{ compare_at_price | money }}
        </span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper hide" aria-hidden="true">
        <span id="ComparePrice" class="product-single__price--compare-at"></span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
    {% endif %}
    <span id="ProductPrice"
        class="product-single__price{% if compare_at_price > price %} on-sale{% endif %}"
        itemprop="price"
        content="{{ price | divided_by: 100.00 }}"
        {% unless current_variant.available %}aria-hidden="true"{% endunless %}>
        {{ price | money }}
    </span>
</div>

1. Thay thế mã bằng đoạn mã sau:

{% include 'product-price', variant: current_variant %}

Sau khi chỉnh sửa, tệp featured-product.liquid sẽ có dạng như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Sửa trang sản phẩm

1. Trong thư mục Sections (Phần), nhấp vào tập tin product-template.liquid.

2. Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm itemprop="offers":

<div data-price-container>
    {% comment %}
        Optionally show the 'compare at' or original price of the product.
    {% endcomment %}
    {% if current_variant.compare_at_price > current_variant.price %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper" aria-hidden="false">
        <span id="ComparePrice" class="product-single__price--compare-at">
            {{ current_variant.compare_at_price | money }}
        </span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper hide" aria-hidden="true">
        <span id="ComparePrice" class="product-single__price--compare-at"></span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
    {% endif %}
    <span id="ProductPrice"
        class="product-single__price{% if current_variant.compare_at_price > current_variant.price %} on-sale{% endif %}"
        itemprop="price"
        content="{{ current_variant.price | divided_by: 100.00 }}"
        {% unless current_variant.available %}aria-hidden="true"{% endunless %}>
        {{ current_variant.price | money }}
    </span>
</div>

1. Thay thế mã bằng đoạn mã sau:

{% include 'product-price', variant: current_variant %}

Sau khi chỉnh sửa, tệp product-template.liquid sẽ có dạng như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Chỉnh sửa giỏ hàng ajax

1. Trong thư mục Đoạn mã, nhấp vào tệp ajax-cart-template.liquid.

2. Dùng phím tắt tìm kiếm để tìm mã sau đây bằng cách tìm kiếm <span class="ajaxcart__price">{{{price}}}</span>:

{{#if discountsApplied}}
    <span class="visually-hidden">{% endraw %}{{ 'products.general.regular_price' | t }}{% raw %}</span>
    <del class="ajaxcart__price">{{{price}}}</del>
    <span class="visually-hidden">{% endraw %}{{ 'products.general.sale_price' | t }}{% raw %}</span>
    <span class="ajaxcart__price">{{{discountedPrice}}}</span>
    {{else}}
    <span class="ajaxcart__price">{{{price}}}</span>
{{/if}}

1. Thêm mã sau vào bên dưới {{/if}} ở bước 2:

{{#if unitPrice}}
    <span class="visually-hidden">{% endraw %}{{ 'products.general.unit_price' | t }}{% raw %}</span>
    <span class="cart__unit-price">
        {% endraw %}
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{'general.accessibility.unit_price_separator' | t}}&nbsp;</span>
        {%- endcapture -%}
        {% raw %}
        <span>{{{ unitPrice.price }}}</span>{{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
    </span>
{{/if}}

Sau khi chỉnh sửa, tệp ajax-cart-template.liquid sẽ có dạng như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Chỉnh sửa mục của lưới sản phẩm

1. Trong thư mục Đoạn mã, nhấp vào tệp product-grid-template.liquid.

2. Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm capture img_id_class:

{% capture img_id_class %}ProductImage-{{ product.featured_image.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_image.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

1. Thêm đoạn mã sau vào phía trước mã ở bước 2:

{%- assign variant = product.selected_or_first_available_variant -%}

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm mã sau đây bằng cách tìm kiếm {{ product.price | money_without_trailing_zeros }}:

<span class="grid-product__price">
    {% if on_sale %}
        <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    {% endif %}
    {% if product.price_varies %}
        {{ product.price_min | money_without_trailing_zeros }}
        <span class="icon-fallback-text">
        <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
        <span class="fallback-text">+</span>
        </span>
    {% else %}
        {{ product.price | money_without_trailing_zeros }}
    {% endif %}
</span>

1. Thêm mã sau vào bên dưới </span>:

{%- if product.price_varies == false and variant.unit_price_measurement -%}
    {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
        <span>
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
        </span>
    {%- endcapture -%}
    <span class="product-unit-price">
        <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
        <span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Sửa trang giỏ hàng

1. Trong thư mục Templates, nhấp vào tập tin cart.liquid.

2. Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm <span class="cart__price">:

{%- if item.original_line_price != item.final_line_price -%}
  <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
  <del class="cart__price">{{ item.original_line_price | money }}</del>
  <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
  <span class="order-discount cart__price">{{ item.final_line_price | money }}</span>
{%- else -%}
  <span class="cart__price">{{ item.original_line_price | money }}</span>
{%- endif -%}

Lưu ý

Nếu sử dụng phiên bản chủ đề cũ hơn, bạn có thể sẽ không tìm thấy đoạn mã này. Trong trường hợp đó, hãy thêm mã ở bước 3 vào ngay phía dưới phần tử <span class="cart__price">.

1. Thêm đoạn mã sau vào phía dưới mã ở bước 2:

{%- if item.unit_price_measurement -%}
    <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
    <span class="cart__unit-price">
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
        {%- capture unit_price_base_unit -%}
        {%- if item.unit_price_measurement.reference_value != 1 -%}
            {{- item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ item.unit_price_measurement.reference_unit }}
        {%- endcapture -%}
        <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

Sau khi chỉnh sửa, tệp cart.liquid sẽ có dạng như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Chỉnh sửa trang đơn hàng

1. Trong thư mục Templates, nhấp vào tập tin customers/order.liquid.

2. Dùng phím tắt tìm kiếm để tìm mã sau đây bằng cách tìm kiếm {{ line_item.original_price | money }}:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
    {%- if line_item.original_price != line_item.final_price -%}
        <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
        <del>{{ line_item.original_price | money }}</del>
        <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
        <span class="order-discount">{{ line_item.final_price | money }}</span>
    {%- else -%}
        {{ line_item.original_price | money }}
    {%- endif -%}
</td>

1. Thêm đoạn mã sau đây vào phía trước </td> ở bước 2:

{%- if line_item.unit_price_measurement -%}
    <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
    <span class="product-unit-price">
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
        {%- capture unit_price_base_unit -%}
        {%- if line_item.unit_price_measurement.reference_value != 1 -%}
            {{- line_item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ line_item.unit_price_measurement.reference_unit }}
        {%- endcapture -%}
        <span>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

Sau khi chỉnh sửa, tệp customers/order.liquid sẽ có dạng như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Sửa kiểu chủ đề - Phần 1

1. Trong thư mục Tài sản, nhấp vào tệp theme.scss.liquid.

2. Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm .ajaxcart__price {:

.ajaxcart__price {
    font-size: em(13px);
    display: block;
}

1. Thêm đoạn mã sau vào phía dưới mã ở bước 2:

.cart__unit-price {
    display: block;
}

Sau khi chỉnh sửa, tệp theme.scss.liquid sẽ có dạng như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Sửa kiểu chủ đề - Phần 2

1. Trong thư mục Tài sản, nhấp vào tệp timber.scss.liquid.

2. Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm .product-single__policies {:

.product-single__policies {
  margin: 15px 0 25px 0;
}

1. Thêm đoạn mã sau vào phía trên mã ở bước 2:

.product-single__unit {
  display: none;

  .price-container--unit-available & {
    display: block;
  }
}

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Đi đến cuối tệp và thêm mã sau:

.product-unit-price {
  color: $colorTextBody;
  display: block;
}

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Sửa mã chủ đề JavaScript

1. Trong thư mục Tài sản, nhấp vào tệp theme.js.liquid.

2. Dùng phím tắt tìm kiếm để tìm mã sau:

var prodImg;

1. Thêm đoạn mã sau vào phía dưới mã ở bước 2:

var unitPrice = null;

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm mã sau:

// Create item's data object and add to 'items' array

1. Thêm đoạn mã sau vào phía trên mã ở bước 4:

if (cartItem.unit_price_measurement) {
  unitPrice = {
    addRefererenceValue:
      cartItem.unit_price_measurement.reference_value !== 1,
    price: theme.Currency.formatMoney(
      cartItem.unit_price,
      settings.moneyFormat
    ),
    reference_value: cartItem.unit_price_measurement.reference_value,
    reference_unit: cartItem.unit_price_measurement.reference_unit
  };
}

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm mã sau:

vendor: cartItem.vendor

1. Thêm đoạn mã sau vào phía trên mã ở bước 6:

unitPrice: unitPrice,

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm mã sau:

productPrice: '#ProductPrice',

1. Thêm đoạn mã sau vào phía dưới mã ở bước 8:

unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm $(this.selectors.priceContainer, this.$container).removeClass(:

$(this.selectors.priceContainer, this.$container).removeClass(
  'visibility-hidden'
);

1. Thay thế mã bằng đoạn mã sau:

$(this.selectors.priceContainer, this.$container).removeClass(
  'visibility-hidden price-container--unit-available'
);

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm mã sau:

$(this.selectors.SKU).html(variant.sku);

1. Thêm đoạn mã sau vào phía trên mã ở bước 12:

if (variant.unit_price_measurement) {
  var $unitPrice = $(this.selectors.unitPrice, this.$container);
  var $unitPriceBaseUnit = $(
    this.selectors.unitPriceBaseUnit,
    this.$container
  );

  $unitPrice.html(
    theme.Currency.formatMoney(variant.unit_price, moneyFormat)
  );
  $unitPriceBaseUnit.html(this.getBaseUnit(variant));

  $(this.selectors.priceContainer, this.$container).addClass(
    'price-container--unit-available'
  );
}

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm mã sau bằng cách tìm this.destroyImageCarousel();:

onUnload: function() {
  this.$container.off(this.settings.namespace);
  this.destroyImageCarousel();
}

1. Thêm đoạn mã sau vào phía trên mã ở bước 14:

getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;
},

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Sửa bản dịch tiếng Anh

1. Trong thư mục Locales (Ngôn ngữ), nhấp vào tập tin en.default.json.

2. Dùng phím tắt tìm kiếm để tìm mã sau:

"refresh_page": "choosing a selection results in a full page refresh"

1. Thêm đoạn mã sau vào phía trên mã ở bước 2:

"unit_price_separator": "per",

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm mã sau:

"include_taxes": "Tax included.",

1. Thêm đoạn mã sau vào phía dưới mã ở bước 4:

"unit_price": "Unit price",

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

(Không bắt buộc) Thêm bản dịch cho các ngôn ngữ khác

1. Truy cập vào trang Chủ đề trong phần Quản trị viên Shopify.

2. Nhấp vào nút ... > Chỉnh sửa nội dung chủ đề mặc định

3. Nhấp vào Change theme language (Thay đổi ngôn ngữ chủ đề), rồi chọn ngôn ngữ bạn muốn chỉnh sửa. Chỉ thực hiện được trên chủ đề đã đăng.

4. Nhập Unit Price vào trường tìm kiếm.

5. Cập nhật trường Dấu phân cách đơn giá trong phần Cài đặt chung / Khả năng truy cập.

6. Cập nhật trường Unit price label (Nhãn đơn giá) trong phần Sản phẩm / Cài đặt chung.

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

Minimal

Các bước thực hiện dành cho chủ đề Minimal

Có thể sử dụng đơn giá trong chủ đề Minimal cho các phiên bản từ 12.1.0 trở lên. Nếu không thể cập nhật chủ đề lên phiên bản mới nhất thì bạn có thể thêm tùy chỉnh đơn giá cho các phiên bản trước của chủ đề Minimal.

Cập nhật Đoạn mã

1. Tìm và mở thư mục Snippets.

2. Chọn Thêm đoạn mã mới.

3. Nhập tên product-unit-price.

4. Sao chép và dán mã sau vào product-unit-price.liquid.

{%- unless available -%}
  {%- if variant.title -%}
    {%- assign available = variant.available -%}
  {%- else -%}
    {%- assign available = true -%}
  {%- endif -%}
{%- endunless -%}
<span class="product-unit-price{% unless available and variant.unit_price_measurement %} hide{% endunless %}{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}" data-unit-price-container>
  {%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}</span>
  {%- endcapture -%}
  {%- capture unit_price_base_unit -%}
    <span data-unit-price-base-unit>
      {%- if available and variant.unit_price_measurement -%}
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
          {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
      {%- endif -%}
    </span>
  {%- endcapture -%}
  <span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
  <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>

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

2. Tìm và chỉnh sửa tập tin product-grid-item.liquid.

3. Thay dòng sau:

{% capture price %}{{ featured.price | money }}{% endcapture %}

Bằng dòng sau:

{%- assign price = featured.price | money -%}

1. Dùng phím tắt tìm kiếm để tìm {{ price }} và thêm mã sau vào phía dưới:

{%- assign variant = featured.selected_or_first_available_variant -%}
{%- if variant.available and variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: variant, wrapper_class: 'grid-link__unit-price' %}
{%- endif -%}

Sau khi chỉnh sửa, tệp product-grid-item.liquid sẽ có dạng như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

2. Tìm và sửa tệp search-result.liquid

3. Dùng phím tắt tìm kiếm để tìm {% if item.object_type == 'product' %} và thêm mã sau vào dòng bên dưới:

{%- assign variant = item.selected_or_first_available_variant -%}

1. Bây giờ, dùng phím tắt tìm kiếm để tìm hai đoạn mã sau:

<s><small>{{ item.compare_at_price_max | money }}</small></s>

Và

<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span itemprop="price">
  {{ item.price | money }}
</span>

1. Thêm khối mã sau vào phía dưới cả hai đoạn mã được liệt kê trong bước trước.

{%- if variant.available and variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: variant %}
{%- endif -%}

Sau khi chỉnh sửa, tệp search-result.liquid sẽ có dạng như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Cập nhật kiểu

1. Tìm và mở thư mục Assets.

2. Chỉnh sửa tập tin theme.scss.liquid.

3. Dùng phím tắt tìm kiếm để tìm khối mã sau:

.grid-link__title,
.grid-link__meta {
  position: relative;
  margin-bottom: 5px;

1. Chèn khối mã sau đây vào bên dưới đoạn mã bạn đã tìm thấy ở bước trước:

font-family: $headerFontStack;

1. Dùng phím tắt tìm kiếm để tìm đoạn mã sau:

.grid-link__sale_price {
  opacity: 0.95;
  filter: alpha(opacity=95);
}

1. Chèn khối mã sau đây vào bên dưới đoạn mã bạn đã tìm thấy ở bước trước:

.grid-link__unit-price {
  font-size: 1em;
}

1. Dùng phím tắt tìm kiếm để tìm đoạn mã sau:

.order-discount--list {
  margin: 0.8em 0 0.6em 1.3em;
  list-style: none;
  padding: 0;
}

1. Chèn khối mã sau đây vào bên dưới đoạn mã bạn đã tìm thấy ở bước trước:

.order-discount--price {
  margin-bottom: 0;
}

1. Dùng phím tắt tìm kiếm để tìm đoạn mã sau:

.cart__product-title {
  display: inline-block;

1. Chèn khối mã sau đây vào bên dưới đoạn mã bạn đã tìm thấy ở bước trước:

font-weight: $bodyFontWeightBold;

Sau khi chỉnh sửa, tệp theme.scss.liquid sẽ có dạng như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

2. Tìm và sửa tệp timber.scss.liquid.

3. Dùng phím tắt tìm kiếm để tìm mã sau:

.quantity-selector {
    display: inline-block;
  }
}

1. Chèn khối mã sau đây vào bên dưới đoạn mã bạn đã tìm thấy ở bước trước:

.product-single__title {
  font-weight: $bodyFontWeightBold;
}

1. Chèn mã sau vào cuối tập tin:

.product-unit-price {
  color: rgba($colorTextBody, 0.6);
  display: block;
  font-family: $headerFontStack;
  font-size: em(12px);
}

Sau khi chỉnh sửa, tệp timber.scss.liquid sẽ có dạng như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Cập nhật mẫu

1. Tìm và mở thư mục Templates.

2. Tìm và sửa tệp customers/order.liquid.

3. Dùng phím tắt tìm kiếm để tìm mã sau:

{%- else -%}
  {{ line_item.original_price | money }}
{%- endif -%}

1. Thêm mã sau vào phía dưới mã ở bước 3:

{%- if line_item.unit_price_measurement -%}
  {% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}

Sau khi chỉnh sửa, tệp customers/order.liquid sẽ có dạng như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Cập nhật JavaScript

1. Tìm và chỉnh sửa theme.js trong thư mục Assets.

2. Dùng phím tắt tìm kiếm để tìm dòng chứa .shopify-payment-button rồi thay bằng:

$shopifyPaymentButton: $('.shopify-payment-button', this.$container),
$unitPrice: $('[data-unit-price]', this.$container),
$unitPriceBaseUnit: $('[data-unit-price-base-unit]', this.$container),
$unitPriceContainer: $('[data-unit-price-container]', this.$container)

Khối mã đó trông sẽ như sau:

1. Hãy tìm mã sau:

else {
  this.selectors.$comparePrice.addClass('hide').html('');
  this.selectors.$comparePriceA11y.attr('aria-hidden', 'true');
}

1. Thêm mã sau vào phía dưới:

// Unit price
this.selectors.$unitPriceContainer.addClass('hide');
if (variant.unit_price) {
  this.selectors.$unitPrice.html(
      Shopify.formatMoney(variant.unit_price, theme.moneyFormat)
  );
  this.selectors.$unitPriceBaseUnit.html(this.getBaseUnit(variant));
  this.selectors.$unitPriceContainer.removeClass('hide');
}

Kết quả trông sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm mã sau:

.attr('data-zoom')
  });
});

1. Chèn khối mã sau đây vào bên dưới đoạn mã bạn đã tìm thấy ở bước trước:

},
getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;

Kết quả trông sẽ như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Cập nhật mẫu giỏ hàng

1. Tìm và mở rộng thư mục Các phần.

2. Chỉnh sửa tập tin cart-template.liquid.

3. Dùng phím tắt tìm kiếm để tìm mã <span class="order-discount h5">{{ item.final_price | money }}</span>.

4. Thay dòng này bằng mã sau:

<span class="order-discount order-discount--price h5">{{ item.final_price | money }}</span>

1. Tìm lần xuất hiện đầu tiên của mã {%- if item.line_level_discount_allocations != blank -%}:

{%- if item.line_level_discount_allocations != blank -%}
  <ul class="order-discount order-discount--list order-discount--title order-discount--cart medium-down--hide" aria-label="{{ 'customer.order.discount' | t }}">
    {%- for discount_allocation in item.line_level_discount_allocations -%}
      <li class="order-discount__item">
        <span class="icon icon-saletag" aria-hidden="true"></span>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
      </li>
    {%- endfor -%}
  </ul>
{%- endif -%}

1. Thêm khối mã sau vào phía trên mã ở bước 5:

{%- if item.variant.available and item.variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: item, available: item.variant.available %}
{%- endif -%}

Sau khi chỉnh sửa, tệp cart-template.liquid sẽ có dạng như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Cập nhật sản phẩm nổi bật

1. Tìm và mở rộng thư mục Các phần.

2. Chỉnh sửa tập tin featured-product.liquid.

3. Dùng phím tắt tìm kiếm để tìm dòng chứa itemprop="name" rồi thay bằng:

<h1 class="product-single__title" itemprop="name">{{ title }}</h1>

1. Tìm mã chứa id="PriceA11y":

{% if compare_at_price > price %}
  <span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  <s id="ComparePrice" class="product-single__sale-price">
    { compare_at_price | money }}
  </s>
{% endif %}

1. Chèn khối mã sau đây vào bên dưới đoạn mã bạn đã tìm thấy ở bước trước:

{% include 'product-unit-price', variant: variant, available: true %}

Sau khi chỉnh sửa, tệp featured-product.liquid sẽ có dạng như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Cập nhật mẫu sản phẩm

1. Tìm và mở rộng thư mục Các phần.

2. Chỉnh sửa tập tin product-template.liquid.

3. Dùng phím tắt tìm kiếm để tìm dòng chứa itemprop="name" rồi thay bằng:

<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>

1. Dùng phím tắt tìm kiếm để tìm mã sau:

{% else %}
  <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.product.sale_price' | t }}</span>
    <s id="ComparePrice" class="product-single__sale-price hide">
      {{ product.compare_at_price_max | money }}
    </s>
{% endif %}

1. Thêm dòng sau vào phía dưới:

{% include 'product-unit-price', variant: variant, available: true %}

Sau khi chỉnh sửa, tệp product-template.liquid sẽ có dạng như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Cập nhật ngôn ngữ

1. Tìm và mở rộng thư mục Vị trí.

2. Mở và chỉnh sửa tập tin en.default.json.

3. Dùng phím tắt tìm kiếm để tìm dòng chứa refresh_page rồi thay bằng:

"refresh_page": "choosing a selection results in a full page refresh",
"unit_price_separator": "per"

Kết quả trông sẽ như sau:

1. Tìm dòng có chứa full_details rồi thay bằng:

"full_details": "Full details",
"unit_price_label": "Unit price"

Kết quả trông sẽ như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

(Không bắt buộc) Thêm bản dịch cho các ngôn ngữ khác

1. Truy cập vào trang Chủ đề trong phần Quản trị viên Shopify.

2. Nhấp vào nút ... > Chỉnh sửa nội dung chủ đề mặc định.

3. Nhấp vào Change theme language (Thay đổi ngôn ngữ chủ đề), rồi chọn ngôn ngữ bạn muốn chỉnh sửa. Chỉ thực hiện được trên chủ đề đã đăng.

4. Nhập Unit Price vào trường tìm kiếm.

5. Cập nhật trường Dấu phân cách đơn giá trong phần Cài đặt chung / Khả năng truy cập.

6. Cập nhật trường Unit price label (Nhãn đơn giá) trong phần Sản phẩm / Sản phẩm.

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

Venture

Các bước thực hiện dành cho chủ đề Venture

Đơn giá đã được thêm vào chủ đề Venture cho các phiên bản từ 9.4.0 trở lên. Nếu bạn không thể cập nhật chủ đề lên phiên bản mới nhất, hãy làm theo các bước sau để áp dụng mục tùy chỉnh đơn giá cho những phiên bản trước của chủ đề Venture.

Chỉnh sửa tập tin ngôn ngữ của chủ đề

1. Trong thư mục Locales, nhấp vào en.default.json.

2. Dùng phím tắt tìm kiếm để tìm dòng chứa refresh_page:

"refresh_page": "choosing a selection results in a full page refresh"

1. Thêm mã sau vào phía trên dòng ở bước 2:

"unit_price_separator": "per",

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm dòng chứa stock_unavailable:

"stock_unavailable": "The item could not be added to your cart because there are not enough in stock."

1. Thêm mã sau vào phía trên dòng ở bước 4:

"unit_price_label": "Unit price",

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Chỉnh sửa bảng kiểu của chủ đề

1. Trong thư mục Assets, nhấp vào theme.scss.liquid.

2. Dùng phím tắt tìm kiếm để tìm dòng .product-single__policies {:

.product-single__policies {
    font-size: em($font-size-base - 1);
  }

1. Thêm mã sau đây vào phía dưới thẻ có kết thúc là } của khối mã tìm thấy ở bước 2:

.product-unit-price {
    font-size: em(12);
    color: $color-body-text;
  }

  .product-card__unit-price {
    display: block;
  }

Sau khi chỉnh sửa, tệp theme.scss.liquid sẽ có dạng như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Thêm đoạn mã đơn giá sản phẩm

1. Trong thư mục Đoạn mã, nhấp vào Thêm đoạn mã mới.

2. Nhập tên product-unit-price.

3. Thêm mã sau đây vào product-unit-price.liquid:

<span class="product-unit-price{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}{% unless product_variant.unit_price_measurement %} hide{% endunless %}" data-unit-price-container>
  {%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}</span>
  {%- endcapture -%}
  {%- capture unit_price_base_unit -%}
    <span data-unit-price-base-unit>
      {%- if product_variant.unit_price_measurement.reference_value != 1 -%}
        {{- product_variant.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ product_variant.unit_price_measurement.reference_unit }}
    </span>
  {%- endcapture -%}
  <span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
  <span data-unit-price>{{ product_variant.unit_price | money }}</span>
  {{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Chỉnh sửa đoạn mã thẻ sản phẩm

1. Trong thư mục Snippets (Đoạn mã), nhấp vào product-card.liquid.

2. Dùng phím tắt tìm kiếm để tìm dòng <a href="{{ product.url | within: collection }}".

3. Thêm mã sau vào phía trên dòng ở bước 2:

{%- assign current_variant = product.selected_or_first_available_variant -%}

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm dòng <div class="product-card__price">:

<div class="product-card__price">
  {% if product.compare_at_price > product.price %}
    {% comment %}
      Product is on sale
    {% endcomment %}
    {% if product.price_varies %}
      {% assign sale_price = product.price | money_without_trailing_zeros %}
      {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
    {% else %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <s class="product-card__regular-price">{{ product.compare_at_price | money_without_trailing_zeros }}</s>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
      {{ product.price | money_without_trailing_zeros }}
    {% endif %}
  {% else %}
    {% comment %}
      Not on sale, but could still have varying prices
    {% endcomment %}
    {% if product.price_varies %}
      {% assign price = product.price | money_without_trailing_zeros %}
      {{ 'products.product.from_text_html' | t: price: price }}
    {% else %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      {{ product.price | money_without_trailing_zeros }}
    {% endif %}
  {% endif %}
</div>

1. Thêm mã sau đây vào phía trên thẻ có kết thúc là </div> tìm thấy ở bước 5:

{%- unless product.price_varies -%}
  {%- if current_variant.unit_price_measurement -%}
    {% include 'product-unit-price', product_variant: current_variant, wrapper_class: "product-card__unit-price" %}
  {%- endif -%}
{%- endunless -%}

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Chỉnh sửa mẫu trang giỏ hàng

1. Trong thư mục Sections (Phần), nhấp vào cart-template.liquid.

2. Dùng phím tắt tìm kiếm để tìm lần xuất hiện đầu tiên của <td class="cart__cell--total">:

<td class="cart__cell--total">
  {%- if item.original_line_price != item.final_line_price -%}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <del class="cart__item-total">{{ item.original_line_price | money }}</del>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    <span class="cart__item-total">{{ item.final_line_price | money }}</span>
  {%- else -%}
    <span class="cart__item-total">{{ item.original_line_price | money }}</span>
  {%- endif -%}

1. Thêm mã sau vào phía dưới thẻ endif ở bước 2:

{%- if item.unit_price_measurement -%}
  {% include 'product-unit-price', product_variant: item %}
{%- endif -%}

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm lần xuất hiện thứ hai của <td class="cart__cell--total">:

<td class="cart__cell--total">
  {{#if discountsApplied}}
      <span class="visually-hidden">{% endraw %}{{ 'products.product.regular_price' | t }}{% raw %}</span>
    <del class="cart__item-total">{{{originalLinePrice}}}</del>
    <span class="visually-hidden">{% endraw %}{{ 'products.product.sale_price' | t }}{% raw %}</span>
    <span class="cart__item-total">{{{linePrice}}}</span>
  {{else}}
    <span class="cart__item-total">{{{originalLinePrice}}}</span>
  {{/if}}
  {{#if discountsApplied}}
    <ul class="order-discount order-discount--cart order-discount--list order-discount--title" aria-label="{% endraw %}{{ 'customer.order.discount' | t }}{% raw %}">
      {{#each discounts}}
        <li class="order-discount__item">
          {% endraw %}{%- include 'icon-saletag' -%}{% raw %}{{ this.discount_application.title }} (-{{{ this.formattedAmount }}})
        </li>
      {{/each}}
    </ul>
  {{/if}}

1. Thêm mã sau vào phía trên thẻ thứ hai có kết thúc là {{/if}} ở bước 4:

{{#if unitPrice}}
  <span class="visually-hidden">{% endraw %}{{ 'products.product.unit_price_label' | t }}{% raw %}</span>
  <span class="product-unit-price">
    {% endraw %}
      {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
    {% raw %}
    <span>{{{ unitPrice.price }}}</span>{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
  </span>
{{/if}}

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Chỉnh sửa mẫu trang sản phẩm nổi bật

1. Trong thư mục Sections (Phần), nhấp vào featured-product.liquid.

2. Dùng phím tắt tìm kiếm để tìm dòng {% assign current_variant = product.selected_or_first_available_variant %}.

3. Thêm mã sau vào phía dưới dòng ở bước 2:

{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm dòng chứa <ul class="product-single__meta-list:

<ul class="product-single__meta-list list--no-bullets list--inline">
  <li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
  <div class="product-tag">
    {{ 'products.product.on_sale' | t }}
  </div>
  </li>
  <li>
    {% unless product.compare_at_price_max > product.price %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    {% endunless %}
    <span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
      {{ current_variant.price | money }}
    </span>
  </li>
  {% if product.compare_at_price_max > product.price %}
    <li>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
        {{ current_variant.compare_at_price | money }}
      </s>
    </li>
  {% endif %}
  {% if section.settings.stock_enable %}

1. Phía dưới thẻ ul này, hãy tìm mã {% if section.settings.stock_enable %} .

2. Thêm mã sau vào phía trên khối if ở bước 6:

{%- if variants_with_unit_price.size > 0 -%}
  <li>
    {% include 'product-unit-price', product_variant: current_variant %}
  </li>
{%- endif -%}

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Sửa mẫu trang sản phẩm

1. Trong thư mục Sections (Phần), nhấp vào product-template.liquid.

2. Dùng phím tắt tìm kiếm để tìm dòng {% assign current_variant = product.selected_or_first_available_variant %}.

3. Thêm mã sau vào phía dưới dòng ở bước 2:

{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm dòng chứa <ul class="product-single__meta-list:

<ul class="product-single__meta-list list--no-bullets list--inline{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__price-container{% endif %}">
  <li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
    <div class="product-tag">
      {{ 'products.product.on_sale' | t }}
    </div>
  </li>
  <li>
    {% unless product.compare_at_price_max > product.price %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    {% endunless %}
    <span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
      {{ current_variant.price | money }}
    </span>
  </li>
  {% if product.compare_at_price_max > product.price %}
    <li>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
        {{ current_variant.compare_at_price | money }}
      </s>
    </li>
  {% endif %}
  {% if section.settings.stock_enable %}

1. Phía dưới thẻ ul này, hãy tìm mã {% if section.settings.stock_enable %} .

2. Thêm mã sau đây vào phía trên khối if tìm thấy ở bước 5:

{%- if variants_with_unit_price.size > 0 -%}
  <li>
    {% include 'product-unit-price', product_variant: current_variant %}
  </li>
{%- endif -%}

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Chỉnh sửa mẫu đơn hàng của khách hàng

1. Trong thư mục Templates, nhấp vào customers/order.liquid.

2. Dùng phím tắt tìm kiếm để tìm dòng <td class="text-right" data-label="{{ 'customer.order.price' | t }}"> :

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
  {%- if line_item.original_price != line_item.final_price -%}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <del>{{ line_item.original_price | money }}</del>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
      <span class="order-discount">{{ line_item.final_price | money }}</span>
  {%- else -%}
    {{ line_item.original_price | money }}
  {%- endif -%}
</td>

1. Thay mã ở bước 2 bằng mã sau:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
  <div>
    {%- if line_item.original_price != line_item.final_price -%}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <del>{{ line_item.original_price | money }}</del>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
      <span class="order-discount">{{ line_item.final_price | money }}</span>
    {%- else -%}
      {{ line_item.original_price | money }}
    {%- endif -%}
  </div>
  {%- if line_item.unit_price_measurement -%}
    {% include 'product-unit-price', product_variant: line_item %}
  {%- endif -%}
</td>

Sau khi chỉnh sửa, tệp customers/order.liquid sẽ có dạng như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

Chỉnh sửa tập tin JavaScript của chủ đề

1. Trong thư mục Assets, nhấp vào theme.js.

2. Dùng phím tắt tìm kiếm để tìm dòng // Create item's data object and add to 'items' array.

3. Thêm mã sau vào phía trên dòng ở bước 2:

var unitPrice = null;
if (cartItem.unit_price_measurement) {
  unitPrice = {
    addRefererenceValue:
      cartItem.unit_price_measurement.reference_value !== 1,
    price: theme.Currency.formatMoney(
      cartItem.unit_price,
      theme.moneyFormat
    ),
    reference_value: cartItem.unit_price_measurement.reference_value,
    reference_unit: cartItem.unit_price_measurement.reference_unit
  };
}

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm dòng vendor: cartItem.vendor,

2. Thêm mã sau vào phía dưới dòng ở bước 4:

unitPrice: unitPrice,

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm dòng shopifyPaymentButton: '.shopify-payment-button'.

2. Thay dòng tìm thấy ở bước 6 bằng mã sau:

shopifyPaymentButton: '.shopify-payment-button',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
unitPriceContainer: '[data-unit-price-container]'

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm dòng _updateSKU: function(evt) {.

2. Thêm mã sau vào phía trên dòng ở bước 8:

_getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
      variant.unit_price_measurement.reference_unit;
},

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm dòng this._updateIncomingInfo(variant);:

} else {
  // Variant is sold out, disable the submit button
  cache.$addToCart.prop('disabled', true).addClass('btn--sold-out');
  cache.$addToCartText.html(theme.strings.soldOut);
  $(this.selectors.shopifyPaymentButton, this.$container).hide();
  // Update when stock will be available
  this._updateIncomingInfo(variant);
}

1. Thêm mã sau vào phía dưới thẻ có kết thúc là } ở bước 10:

$(this.selectors.unitPriceContainer, this.$container).addClass('hide');

if (variant.unit_price_measurement) {
  var $unitPrice = $(this.selectors.unitPrice, this.$container);
  var $unitPriceBaseUnit = $(
    this.selectors.unitPriceBaseUnit,
    this.$container
  );

  $unitPrice.html(
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat)
  );
  $unitPriceBaseUnit.html(this._getBaseUnit(variant));

  $(this.selectors.unitPriceContainer, this.$container).removeClass(
    'hide'
  );
}

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Nhấp vào Save (Lưu) để xác nhận thay đổi.

(Không bắt buộc) Thêm bản dịch cho các ngôn ngữ khác

1. Truy cập vào trang Chủ đề trong phần Quản trị viên Shopify.

2. Nhấp vào nút ... > Chỉnh sửa nội dung chủ đề mặc định.

3. Nhấp vào Change theme language (Thay đổi ngôn ngữ chủ đề), rồi chọn ngôn ngữ bạn muốn chỉnh sửa. Chỉ thực hiện được trên chủ đề đã đăng.

4. Nhập Unit Price vào trường tìm kiếm.

5. Cập nhật trường Dấu phân cách đơn giá trong phần Cài đặt chung / Khả năng truy cập.

6. Cập nhật trường Unit price label (Nhãn đơn giá) trong phần Sản phẩm / Sản phẩm.

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

Supply

Các bước thực hiện dành cho chủ đề Cung ứng

Đơn giá đã được thêm vào chủ đề Cung ứng cho các phiên bản từ 8.3.0 trở lên. Nếu không thể cập nhật chủ đề lên phiên bản mới nhất, hãy làm theo các bước sau để áp dụng tùy chỉnh đơn giá cho các phiên bản trước của chủ đề Cung ứng.

Thêm đoạn mã đơn giá sản phẩm

1. Tìm và mở rộng thư mục Snippets (Đoạn mã).

2. Chọn Thêm đoạn mã mới.

3. Nhập tên product-unit-price.

4. Sao chép và dán mã sau vào tệp rồi chọn Lưu.

{%- unless available -%}
{%- if variant.title -%}
    {%- assign available = variant.available -%}
{%- else -%}
    {%- assign available = true -%}
{%- endif -%}
{%- endunless -%}
<div class="product-price-unit {% if available and variant.unit_price_measurement %} product-price-unit--available{% endif %}" data-unit-price-container>
<span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
{%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
    <span>
    {%- if available and variant.unit_price_measurement -%}
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
        {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
    {%- endif -%}
    </span>
{%- endcapture -%}
<span data-unit-price>{{ variant.unit_price | money }}</span>
{{- unit_price_separator -}}
<span data-unit-price-base-unit>{{- unit_price_base_unit -}}</span>
</div>

Sau khi chỉnh sửa, tệp product-unit-price.liquid sẽ có dạng như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Chỉnh sửa mẫu sản phẩm nổi bật

1. Tìm và mở rộng thư mục Các phần, sau đó chọn tệp featured-product.liquid.

2. Dùng phím tắt tìm kiếm để tìm dòng {% include 'price' with price %} trong tập tin:

<li>
  <span id="productPrice-{{ section.id }}" class="h1">
    {% include 'price' with price %}
  </span>
</li>

1. Thêm mã sau vào phía dưới đoạn mã có kết thúc là </span> ở bước 2:

{% include 'product-unit-price' variant: variant %}

Sau khi chỉnh sửa, tệp featured-product.liquid sẽ có dạng như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Chỉnh sửa mẫu sản phẩm

1. Tìm và mở rộng thư mục Các phần, sau đó chọn tệp product-template.liquid.

2. Dùng phím tắt tìm kiếm để tìm dòng {% include 'price' with variant.price %} trong tập tin:

<li>
  <span id="productPrice-{{ section.id }}" class="h1">
    {% include 'price' with variant.price %}
  </span>
</li>

1. Thêm mã sau vào phía dưới thẻ có kết thúc là </span> ở bước 2:

{% include 'product-unit-price', variant: variant %}

Sau khi chỉnh sửa, tệp product-template.liquid sẽ có dạng như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Chỉnh sửa đoạn mã mục của lưới sản phẩm

1. Tìm và mở rộng thư mục Đoạn mã, sau đó chọn tệp product-grid-item.liquid.

2. Dùng phím tắt tìm kiếm để tìm dòng {% if on_sale and section.settings.product_show_saved_amount %} trong tập tin:

{% if on_sale and section.settings.product_show_saved_amount %}
    <span class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
      {% assign compare_price = product.compare_at_price %}
      {% assign product_price = product.price %}
      {% include 'price-sale' %}
    </span>
  {% endif %}
</div>

1. Thay thế mã bằng đoạn mã sau:

{%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
{%- endif -%}
  </div>
{% if on_sale and section.settings.product_show_saved_amount %}
  <div class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
    {% assign compare_price = product.compare_at_price %}
    {% assign product_price = product.price %}
    {% include 'price-sale' %}
  </div>
{% endif %}

Sau khi chỉnh sửa, tệp product-grid-item.liquid sẽ có dạng như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Chỉnh sửa đoạn mã mục của danh sách sản phẩm

1. Tìm và mở rộng thư mục Đoạn mã, sau đó chọn tệp product-list-item.liquid.

2. Dùng phím tắt tìm kiếm để tìm dòng <div class="product-item--price text-center"> trong tập tin:

<div class="product-item--price text-center">
  <p class="h1 medium-down--left">
    {% if on_sale %}
      <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
    {% else %}
      <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
    {% endif %}
    {% include 'price' with product.price %}
    {% if on_sale and section.settings.product_show_compare_at_price %}
      <small>
        <s>
          <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
          {% include 'price' with product.compare_at_price %}
        </s>
      </small>
    {% endif %}
  </p>
  {% if on_sale and section.settings.product_show_saved_amount %}
    <span class="sale-tag medium-down--right{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
      {% assign compare_price = product.compare_at_price %}
      {% assign product_price = product.price %}
      {% include 'price-sale' %}
    </span>

1. Thay thế mã bằng đoạn mã sau:

<div class="text-center">
  <div class="product-item--price">
    <p class="h1 medium-down--left">
      {% if on_sale %}
        <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
      {% else %}
        <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
      {% endif %}
      {% include 'price' with product.price %}
      {% if on_sale and section.settings.product_show_compare_at_price %}
        <small>
          <s>
            <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
            {% include 'price' with product.compare_at_price %}
          </s>
        </small>
      {% endif %}
    </p>
    {%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
      {% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
    {%- endif -%}
  </div>
  {% if on_sale and section.settings.product_show_saved_amount %}
    <div class="sale-tag medium-down--right{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
      {% assign compare_price = product.compare_at_price %}
      {% assign product_price = product.price %}
      {% include 'price-sale' %}
    </div>

Sau khi chỉnh sửa, tệp product-list-item.liquid sẽ có dạng như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Sửa đoạn mã về kết quả tìm kiếm dạng lưới

1. Tìm và mở rộng thư mục Đoạn mã, sau đó chọn tệp search-result-grid.liquid.

2. Dùng phím tắt tìm kiếm để tìm dòng {% if on_sale and section.settings.product_show_saved_amount %} trong tập tin:

{% if on_sale and section.settings.product_show_saved_amount %}
    <span class="sale-tag medium--right">
      {% assign compare_price = item.compare_at_price %}
      {% assign product_price = item.price %}
      {% include 'price-sale' %}
    </span>
  {% endif %}
</div>

1. Thay thế mã bằng đoạn mã sau:

{%- if item.first_available_variant.available and item.first_available_variant.unit_price_measurement -%}
    {% include 'product-unit-price', variant: item.first_available_variant %}
  {%- endif -%}
</div>
{% if on_sale and section.settings.product_show_saved_amount %}
  <div class="sale-tag medium--right">
    {% assign compare_price = item.compare_at_price %}
    {% assign product_price = item.price %}
    {% include 'price-sale' %}
  </div>
{% endif %}

Sau khi chỉnh sửa, tệp search-result-grid.liquid sẽ có dạng như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Sửa mẫu giỏ hàng

1. Tìm và mở rộng thư mục Templates, rồi chọn tập tin cart.liquid.

2. Dùng phím tắt tìm kiếm để tìm dòng <del class="cart-original-price order-discount--cart-price"> trong tập tin:

<del class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</del>
  <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
  <span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
{%- else -%}
  <span class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</span>
{%- endif -%}

1. Thay thế mã bằng đoạn mã sau:

<small><s class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</s></small>
  <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
  <span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
{%- else -%}
  <span class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</span>
{%- endif -%}
{%- if item.variant.available and item.variant.unit_price_measurement -%}
  {% include 'product-unit-price' variant: item, available: item.variant.available %}
{%- endif -%}

Sau khi chỉnh sửa, tệp cart.liquid sẽ có dạng như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Chỉnh sửa mẫu Đơn hàng

1. Tìm và mở rộng thư mục Templates, rồi chọn tập tin customers/order.liquid.

2. Dùng phím tắt tìm kiếm để tìm dòng <td class="text-right" data-label="customer.order.price"> trong tập tin:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
  {%- if line_item.original_price != line_item.final_price -%}
    <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <del>{{ line_item.original_price | money }}</del>
    <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
    <span class="order-discount">{{ line_item.final_price | money }}</span>
  {%- else -%}
    {{ line_item.original_price | money }}
  {%- endif -%}
</td>

1. Thêm mã sau vào bên trên thẻ có kết thúc là </td> ở bước 2:

{%- if line_item.unit_price_measurement -%}
  {% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}

Sau khi chỉnh sửa, tệp customers/order.liquid sẽ có dạng như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Chỉnh sửa bố cục chủ đề

1. Tìm và mở rộng thư mục Layout (Bố cục) rồi chọn tập tin theme.liquid.

2. Dùng phím tắt tìm kiếm để tìm dòng chứa only_left: trong tập tin:

product:{
  unavailable: {{ 'products.product.unavailable' | t | json }},
  will_be_in_stock_after:{{ 'products.product.will_be_in_stock_after' | t: date: '[date]' | json }},
  only_left:{{ 'products.product.only_left' | t: count: '1' | json }}
},

1. Thêm mã sau vào phía trên only_left:{{ 'products.product.only_left' | t: count: '1' | json }} ở bước 2:

unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},

Sau khi chỉnh sửa, tệp theme.liquid sẽ có dạng như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Chỉnh sửa kiểu chủ đề

1. Tìm và mở rộng thư mục Các phần, sau đó chọn tệp theme.scss.liquid.

2. Dùng phím tắt tìm kiếm để tìm dòng .product-item--price { trong tập tin:

.product-item--price {
  @include clearfix;
  .h1 {
    margin-bottom: $gutter/2;
  }
  span {
    line-height: 22px;
  }
  small {
    white-space: nowrap;
  }
}

1. Thay thế mã bằng đoạn mã sau:

.product-item--price {
  @include clearfix;
  margin-bottom: $gutter/2;

  .h1 {
    margin-bottom: 0;
  }

  span {
    line-height: 22px;
  }

  small {
    white-space: nowrap;
  }
}

.product-price-unit {
  display: none;
  font-size: em(12px);
  margin-right: 10px;

  .cart-pricing &,
  .order-table & {
    margin-right: 0;
  }

  &.product-price-unit--available {
    display: block;
  }
}

Sau khi chỉnh sửa, tệp theme.scss.liquid sẽ có dạng như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Sửa mã chủ đề JavaScript

1. Tìm và mở rộng thư mục Assets (Tài sản) rồi chọn tập tin theme.js.liquid.

2. Dùng phím tắt tìm kiếm để tìm dòng originalSelectorId: 'productSelect-' + sectionId, trong tập tin:

selectors: {
  originalSelectorId: 'productSelect-' + sectionId,
  $addToCart: $('#addToCart-' + sectionId),
  $SKU: $('.variant-sku', this.$container),
  $productPrice: $('#productPrice-' + sectionId),
  $comparePrice: $('#comparePrice-' + sectionId),
  $addToCartText: $('#addToCartText-' + sectionId),
  $quantityElements: $('#quantity-selector-' + sectionId),
  $variantQuantity: $('#variantQuantity-' + sectionId),
  $variantQuantityMessage: $('#variantQuantity-' + sectionId + '__message'),
  $variantIncoming: $('#variantIncoming-' + sectionId),
  $variantIncomingMessage: $('#variantIncoming-' + sectionId + '__message'),
  $productImageContainer: $('#productPhotoContainer-' + sectionId),
  $productImageWrapper: $('[id^="productPhotoWrapper-' + sectionId + '"]'),
  $productImage: $('[id^="productPhotoImg-' + sectionId + '"]'),
  $productFullDetails: $('.full-details', this.$container),
  $thumbImages: $('#productThumbs-' + sectionId).find('a.product-photo-thumb'),
  $shopifyPaymentButton: '.shopify-payment-button'
}

1. Thêm mã sau vào bên trên originalSelectorId: 'productSelect-' + sectionId, ở bước 2:

unitPriceContainer: '[data-unit-price-container]',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm dòng productVariantCallback: function(variant) { trong tập tin:

productVariantCallback: function(variant) {
  var self = this;
  if (variant) {
    // Update variant image, if one is set
    if (variant.featured_image) {
      var newImg = variant.featured_image;
      var $newImage = this.settings.selectors.$productImageWrapper.filter('[data-image-id="' + newImg.id + '"]');
      var $otherImages = this.settings.selectors.$productImageWrapper.not('[data-image-id="' + newImg.id + '"]');

      $newImage.removeClass('hide');
      $otherImages.addClass('hide');
    }

1. Thêm mã sau đây vào bên dưới if (variant) { ở bước 2:

// Update unit price, if one is set
var $unitPriceContainer = $(this.settings.selectors.unitPriceContainer, this.$container);

$unitPriceContainer.removeClass('product-price-unit--available');

if (variant.unit_price_measurement) {
  var $unitPrice = $(this.settings.selectors.unitPrice, this.$container);
  var $unitPriceBaseUnit = $(this.settings.selectors.unitPriceBaseUnit, this.$container);

  $unitPrice.text(Shopify.formatMoney(variant.unit_price, moneyFormat));
  $unitPriceBaseUnit.text(this.getBaseUnit(variant));
  $unitPriceContainer.addClass('product-price-unit--available');
}

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm dòng customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; trong tập tin:

customPriceFormat = ' <span aria-hidden="true">' + customPrice + '</span>';
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
customPriceFormat += ' <span class="visually-hidden"><span class="visually-hidden">products.general.regular_price</span> ' + a11yComparePrice + '</span>';
customPriceFormat += ' <span class="visually-hidden"><span class="visually-hidden">products.general.sale_price</span> ' + a11yPrice + '</span>';

1. Thay dòng customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; bằng đoạn mã sau:

customPriceFormat += ' <span aria-hidden="true"><small><s>' + comparePrice + '</s></small></span>';

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm dòng $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide(); trong tập tin:

} else {
  // The variant doesn't exist, disable submit button.
  // This may be an error or notice that a specific variant is not available.
  this.settings.selectors.$addToCart.addClass('disabled').prop('disabled', true);
  this.settings.selectors.$addToCartText.html(theme.strings.product.unavailable);
  this.settings.selectors.$variantQuantity.removeClass('is-visible');
  this.settings.selectors.$quantityElements.hide();
  $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide();
}

1. Thêm đoạn mã sau vào phía dưới mã ở bước 11:

},

getBaseUnit: function (variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

Chỉnh sửa tập tin ngôn ngữ của chủ đề

1. Tìm và mở rộng thư mục Locales (Ngôn ngữ) rồi chọn tập tin en.default.json.

2. Dùng phím tắt tìm kiếm để tìm dòng chứa "refresh_page" trong tập tin:

"accessibility": {
  "refresh_page": "choosing a selection results in a full page refresh"
},

1. Thêm mã sau vào bên trên "refresh_page" ở bước 2:

"unit_price_separator": "per",

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Dùng phím tắt tìm kiếm để tìm dòng chứa "will_be_in_stock_after" trong tập tin:

"product": {
  "sold_out": "Sold Out",
  "will_not_ship_until": "Will not ship until ",
  "quantity": "Quantity",
  "add_to_cart": "Add to Cart",
  "unavailable": "Unavailable",
  "will_be_in_stock_after": "Will be in stock after ",
  "only_left": {
    "one": "Only  left!",
    "other": "Only  left!"
  },
  "full_details": "Full details"
}

1. Thêm mã sau vào phía sau "will_be_in_stock_after" ở bước 5:

"unit_price_label": "Unit price",

Sau khi chỉnh sửa, kết quả sẽ như sau:

1. Nhấp vào Lưu để xác nhận thay đổi.

(Không bắt buộc) Thêm bản dịch cho các ngôn ngữ khác

1. Truy cập vào trang Chủ đề trong phần Quản trị viên Shopify.

2. Nhấp vào nút ... > Chỉnh sửa nội dung chủ đề mặc định.

3. Nhấp vào Change theme language (Thay đổi ngôn ngữ chủ đề), rồi chọn ngôn ngữ bạn muốn chỉnh sửa. Chỉ thực hiện được trên chủ đề đã đăng.

4. Tìm kiếm Unit Price trên thanh nhập liệu.

5. Cập nhật trường Dấu phân cách đơn giá trong phần Cài đặt chung / Khả năng truy cập.

6. Cập nhật trường Unit price label (Nhãn đơn giá) trong phần Sản phẩm / Sản phẩm.

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

Hiển thị đơn giá trong thông báo về đơn hàng

Theo mặc định, thông báo xác nhận đơn hàng sẽ hiển thị đơn giá khi tính năng này đang hoạt động.

Nếu đã thêm đơn giá vào sản phẩm nhưng đơn giá không hiển thị trong thông báo xác nhận đơn hàng, có thể bạn cần cập nhật mẫu theo cách thủ công.

Bước:

1. Trong trang quản trị Shopify, vào mục Settings (Cài đặt) > Notifications (Thông báo).

2. Trong mục Đơn hàng, nhấp vào Xác nhận đơn hàng.

3. Nhấp vào Chỉnh sửa mã.

4. Thêm đoạn mã sau vào mẫu trong lớp "order-list__item-price":

{%- if line_item.unit_price_measurement -%}
  <div class="order-list__unit-price">
     {{ line_item.unit_price | money }}/
     {%- if line_item.unit_price_measurement.reference_value != 1 -%}
       {{- line_item.unit_price_measurement.reference_value -}}
     {%- endif -%}
     {{ line_item.unit_price_measurement.reference_unit }}
  </div>
{%- endif -%}

 5. Nhấp vào Lưu.

Mẹo

Đặt đơn hàng kiểm tra trong cửa hàng để xác nhận xem thông báo về đơn hàng có hiển thị đơn giá không.