显示单价

已于 Dec 02, 2023 打印了此页面。若要查看当前版本，请访问 https://help.shopify.com/zh-CN/manual/intro-to-shopify/initial-setup/sell-in-germany/price-per-unit。

如果您按数量或尺寸销售产品，那么您可能需要显示某些产品的单位价格。当您输入某一产品的单价后，此单价将显示在产品页面、产品系列页面、购物车页面和其他确认通知中。

本页相关主题

向您的产品添加单价
在您的在线商店中显示单价
在您的订单通知中显示单价

向您的产品添加单价

在 Shopify 后台中，转至产品。
点击要编辑的产品。
可选：如果您的产品具有多属性，请在多属性部分中点击要编辑的多属性。
在定价部分，选择显示此产品的单价。
在产品总计量字段中，输入产品的总计量，然后选择计量单位。
可选：在基本计量字段中，添加基本计量，然后选择计量单位。例如，对于重 1 千克的产品，您可能会选择 100 克作为基本单位。
点击保存。

在 Shopify 应用中，转至产品 > 所有产品。
点击您要编辑的产品。
轻触您的产品价格区域。
选择显示单价。
在产品总计量字段中，输入产品的总计量，然后选择计量单位。
可选：在基本计量字段中，添加基本计量，然后选择计量单位。例如，对于重 1 千克的产品，您可能会选择 100 克作为基本单位。
轻触保存。

在 Shopify 应用中，转至产品 > 所有产品。
点击您要编辑的产品。
轻触您的产品价格区域。
选择显示单价。
在产品总计量字段中，输入产品的总计量，然后选择计量单位。
可选：在基本计量字段中，添加基本计量，然后选择计量单位。例如，对于重 1 千克的产品，您可能会选择 100 克作为基本单位。
点击 ✓。

在您的在线商店中显示单价

所有 Online Store 2.0 模板均提供单价功能。您无需任何操作即可在您的在线商店中显示单价。

如果您有经典模板，并且无法更新到支持单价功能的版本，则您可以手动自定义模板代码以显示单价。

在经典模板中显示单价

此自定义的步骤因您的模板而异。点击模板的按钮，然后按照以下说明操作：

针对 Debut 的步骤

12.1.0 及更高版本的 Debut 模板中可使用单价。如果您无法将模板更新为最新版本，则可以将单价自定义添加到先前版本的 Debut 中。

编辑产品价格片段

在 Snippets 目录中，点击 product-price.liquid 文件。
使用查找键盘快捷键通过搜索 data-price 来查找以下代码：

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

将该代码替换为以下片段：

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

编辑后，结果应如下所示：

使用查找键盘快捷键通过搜索 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>

在结束 </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 %}

点击保存以确认更改。

编辑购物车页面

在 Sections 目录中，点击 cart-template.liquid 文件。
使用查找键盘快捷键通过搜索 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 -%}

将该代码替换为以下片段：

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

编辑后，cart-template.liquid 文件应如下所示：

点击保存以确认更改。

编辑产品系列页面

在 Sections 目录中，点击 collection.liquid 文件。
使用查找键盘快捷键通过搜索 grid-view-item__title 来查找以下代码：

{% include 'product-price' %}

将该代码替换为以下片段：

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

编辑后，collection.liquid 文件应如下所示：

点击保存以确认更改。

编辑产品卡网格

在 Snippets 目录中，点击 product-card-grid.liquid 文件。
使用查找键盘快捷键通过搜索 grid-view-item__title 来查找以下代码：

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

将该代码替换为以下片段：

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

编辑后，product-card-grid.liquid 文件应如下所示：

点击保存以确认更改。

编辑产品卡列表

在 Snippets 目录中，点击 product-card-list.liquid 文件。
使用查找键盘快捷键通过搜索 {% if product.available %} 来查找以下代码：

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

将该代码替换为以下片段：

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

编辑后，product-card-list.liquid 文件应如下所示：

点击保存以确认更改。

编辑订单页面

在 Templates 目录中，点击 customers/order.liquid 文件。
使用查找键盘快捷键通过搜索 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 -%}

将该代码替换为以下片段：

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

编辑后，customers/order.liquid 文件应如下所示：

点击保存以确认更改。

编辑模板风格

在 Assets 目录中，点击 theme.scss.liquid 文件。
使用查找键盘快捷键通过搜索 .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%);
}

在步骤 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;
}

编辑后，theme.scss.liquid 文件应如下所示：

点击保存以确认更改。

编辑 javascript 模板代码

在 Assets 目录中，点击 theme.js 文件。
使用查找键盘快捷键查找以下代码：

salePrice: '[data-sale-price]'

在步骤 2 的代码上方添加以下片段：

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

编辑后，结果应如下所示：

使用查找键盘快捷键查找以下代码：

productOnSale: 'price--on-sale',

在步骤 4 的代码后添加以下片段：

productUnitAvailable: 'price--unit-available',

编辑后，结果应如下所示：

使用查找键盘快捷键查找以下代码：

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

将该代码替换为以下片段：

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

使用查找键盘快捷键查找以下代码：

var salePrice = '';

在步骤 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);
}

使用查找键盘快捷键查找以下代码：

.replace('[$]', salePrice)

在步骤 10 的代码下方添加以下片段：

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

编辑后，结果应如下所示：

使用查找键盘快捷键查找以下代码：

_updatePrice: function(evt) {

在步骤 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;
},

使用查找键盘快捷键查找以下代码：

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

从步骤 14 的代码下方添加以下片段：

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

使用查找键盘快捷键查找以下代码：

.removeClass(this.classes.productOnSale)

在步骤 16 的代码下方添加以下片段：

.removeClass(this.classes.productUnitAvailable)

使用查找键盘快捷键查找以下代码：

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

在步骤 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);
}

编辑后，结果应如下所示：

点击保存以确认更改。

编辑英语翻译

在 Locales 目录中，点击 en.default.json 文件。
使用查找键盘快捷键查找以下代码：

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

在步骤 2 的代码上方添加以下片段：

"unit_price_separator": "per",

编辑后，结果应如下所示：

使用查找键盘快捷键查找以下代码：

"include_taxes": "Tax included.",

在步骤 4 的代码下添加以下片段：

"unit_price_label": "Unit price",

编辑后，结果应如下所示：

点击保存以确认更改。

编辑模板布局

在 Layout 目录中，点击 theme.liquid 文件。
使用查找键盘快捷键查找以下代码：

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

在步骤 2 的代码下添加以下片段：

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

编辑后，theme.liquid 文件应如下所示：

点击保存以确认更改。

（可选）添加其他语言的翻译

转到 Shopify 后台的模板页面。
点击 ... 按钮 > 编辑默认模板内容。
点击更改模板语言，然后选择要编辑的语言。此操作仅适用于已发布的模板。
在搜索字段中输入 Unit Price。
更新通用/辅助功能下的单价分隔符字段。
更新产品下的单价标签字段。
点击保存。

针对 Brooklyn 的步骤

13.1.0 及更高版本的 Brooklyn 模板中可使用单价。如果您无法将模板更新为最新版本，则可以将单价自定义添加到先前版本的 Brooklyn 中。

添加产品价格片段

在 Snippets 目录中点击添加新片段。
在名称字段中输入 product-price。
将以下代码复制并粘贴到文件中。

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

点击保存以确认更改。

编辑特色产品页面

在 Sections 目录中，点击 featured-product.liquid 文件。
使用查找键盘快捷键通过搜索 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>

将该代码替换为以下片段：

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

编辑后，featured-product.liquid 文件应如下所示：

点击保存以确认更改。

编辑产品页面

在 Sections 目录中，点击 product-template.liquid 文件。
使用查找键盘快捷键通过搜索 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>

将该代码替换为以下片段：

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

编辑后，product-template.liquid 文件应如下所示：

点击保存以确认更改。

编辑 ajax 购物车

在 Snippets 目录中，点击 ajax-cart-template.liquid 文件。
使用查找键盘快捷键通过搜索 <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}}

在步骤 2 的 {{/if}} 下方添加以下代码：

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

编辑后，ajax-cart-template.liquid 文件应如下所示：

点击保存以确认更改。

编辑产品网格项目

在 Snippets 目录中，点击 product-grid-template.liquid 文件。
使用查找键盘快捷键通过搜索 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.' -%}

在步骤 2 的代码之前添加以下片段：

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

编辑后，结果应如下所示：

使用查找键盘快捷键通过搜索 {{ 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>

在 </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 -%}

编辑后，结果应如下所示：

点击保存以确认更改。

编辑购物车页面

在 Templates 目录中，点击 cart.liquid 文件。
使用查找键盘快捷键通过搜索 <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 -%}

注：如果您的模板版本较旧，您可能无法找到此片段。在这种情况下，请直接在 <span class="cart__price"> 元素下方添加步骤 3 中的代码。

在步骤 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 -%}

编辑后，cart.liquid 文件应如下所示：

点击保存以确认更改。

编辑订单页面

在 Templates 目录中，点击 customers/order.liquid 文件。
使用查找键盘快捷键通过搜索 {{ 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>

在步骤 2 的 </td> 之前添加以下片段：

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

编辑后，customers/order.liquid 文件应如下所示：

点击保存以确认更改。

编辑模板风格 - 第 1 部分

在 Assets 目录中，点击 theme.scss.liquid 文件。
使用查找键盘快捷键通过搜索 .ajaxcart__price { 来查找以下代码：

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

在步骤 2 的代码下添加以下片段：

.cart__unit-price {
    display: block;
}

编辑后，theme.scss.liquid 文件应如下所示：

点击保存以确认更改。

编辑模板风格 - 第 2 部分

在 Assets 目录中，点击 timber.scss.liquid 文件。
使用查找键盘快捷键通过搜索 .product-single__policies { 来查找以下代码：

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

在步骤 2 的代码上方添加以下片段：

.product-single__unit {
  display: none;

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

编辑后，结果应如下所示：

转到文件的末尾并添加以下代码：

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

编辑后，结果应如下所示：

点击保存以确认更改。

编辑 JavaScript 模板代码

在 Assets 目录中，点击 theme.js.liquid 文件。
使用查找键盘快捷键查找以下代码：

var prodImg;

在步骤 2 的代码下添加以下片段：

var unitPrice = null;

编辑后，结果应如下所示：

使用查找键盘快捷键查找以下代码：

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

在步骤 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
  };
}

编辑后，结果应如下所示：

使用查找键盘快捷键查找以下代码：

vendor: cartItem.vendor

在步骤 6 的代码上方添加以下片段：

unitPrice: unitPrice,

编辑后，结果应如下所示：

使用查找键盘快捷键查找以下代码：

productPrice: '#ProductPrice',

在步骤 8 的代码下添加以下片段：

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

编辑后，结果应如下所示：

使用查找键盘快捷键通过搜索 $(this.selectors.priceContainer, this.$container).removeClass( 来查找以下代码：

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

将该代码替换为以下片段：

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

编辑后，结果应如下所示：

使用查找键盘快捷键查找以下代码：

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

在步骤 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'
  );
}

编辑后，结果应如下所示：

使用查找键盘快捷键通过搜索 this.destroyImageCarousel(); 来查找以下代码：

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

在步骤 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;
},

编辑后，结果应如下所示：

点击保存以确认更改。

编辑英语翻译

在 Locales 目录中，点击 en.default.json 文件。
使用查找键盘快捷键查找以下代码：

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

在步骤 2 的代码上方添加以下片段：

"unit_price_separator": "per",

编辑后，结果应如下所示：

使用查找键盘快捷键查找以下代码：

"include_taxes": "Tax included.",

在步骤 4 的代码下添加以下片段：

"unit_price": "Unit price",

编辑后，结果应如下所示：

点击保存以确认更改。

（可选）添加其他语言的翻译

转到 Shopify 后台的模板页面。
点击 ... 按钮 > 编辑默认模板内容
点击更改模板语言，然后选择要编辑的语言。此操作仅适用于已发布的模板。
在搜索字段中输入 Unit Price。
更新通用/辅助功能下的单价分隔符字段。
更新产品/通用下的单价标签字段。
点击保存。

Minimal 步骤

11.2.0 及更高版本的 Minimal 模板中可使用单价。如果您无法将模板更新为最新版本，则可以将单价自定义添加到先前版本的 Minimal 中。

更新片段

找到并扩展 Snippets 文件夹。
选择添加新片段。
输入名称 product-unit-price。
将以下代码复制并粘贴到 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>

点击保存。
查找并编辑文件 product-grid-item.liquid。
替换此行：

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

使用此行：

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

使用查找键盘快捷键查找 {{ price }}，并在下方添加此代码：

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

编辑后，product-grid-item.liquid 文件应如下所示：

点击保存以确认更改。
找到并编辑文件 search-result.liquid
使用查找键盘快捷键查找 {% if item.object_type == 'product' %}，并在下方的行中添加以下代码：

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

现在使用查找键盘快捷键查找以下两个代码片段：

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

和

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

在上一步列出的两个代码片段下方分别添加以下代码块：

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

编辑后，search-result.liquid 文件应如下所示：

点击保存以确认更改。

更新样式

找到并展开 Assets 文件夹。
编辑文件 theme.scss.liquid。
使用查找键盘快捷键查找如下代码块：

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

在您在上一步中找到的代码片段下方插入以下代码块：

font-family: $headerFontStack;

使用查找键盘快捷键查找以下代码片段：

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

在您在上一步中找到的代码片段下方插入以下代码块：

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

使用查找键盘快捷键查找以下代码片段：

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

在您在上一步中找到的代码片段下方插入以下代码块：

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

使用查找键盘快捷键查找以下代码片段：

.cart__product-title {
  display: inline-block;

在您在上一步中找到的代码片段下方插入以下代码块：

font-weight: $bodyFontWeightBold;

编辑后，theme.scss.liquid 文件应如下所示：

点击保存以确认更改。
找到并编辑文件 timber.scss.liquid。
使用查找键盘快捷键查找如下代码：

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

在您在上一步中找到的代码片段下方插入以下代码块：

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

将此代码插入文件末尾：

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

编辑后，timber.scss.liquid 文件应如下所示：

点击保存以确认更改。

更新模板

找到并展开 Templates 文件夹。
找到并编辑文件 customers/order.liquid。
使用查找键盘快捷键查找如下代码：

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

将此代码添加到步骤 3 中的代码下面：

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

编辑后，customers/order.liquid 文件应如下所示：

点击保存以确认更改。

更新 JavaScript

找到并编辑资产中的 theme.js。
使用查找键盘快捷键查找包含 .shopify-payment-button 的行，并将其替换为：

$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)

该代码块应如下所示：

查找此代码：

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

将以下代码添加到它下面：

// 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');
}

结果应如下所示：

使用查找键盘快捷键查找如下代码：

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

在您在上一步中找到的代码片段下方插入以下代码块：

},
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;

结果应如下所示：

点击保存以确认更改。

更新购物车模板

找到并展开 Sections 文件夹。
编辑文件 cart-template.liquid。
使用查找键盘快捷方式找到代码 <span class="order-discount h5">{{ item.final_price | money }}</span>。
将该行替换为以下代码：

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

查找代码 {%- 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 -%}

将此代码块添加到步骤 5 中的代码上方：

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

编辑后，cart-template.liquid 文件应如下所示：

点击保存以确认更改。

更新特色产品

找到并展开 Sections 文件夹。
编辑文件 featured-product.liquid。
使用查找键盘快捷键查找包含 itemprop="name" 的行，并将其替换为：

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

找到包含 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 %}

在您在上一步中找到的代码片段下方插入以下代码块：

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

编辑后，featured-product.liquid 文件应如下所示：

点击保存以确认更改。

更新产品模板

找到并展开 Sections 文件夹。
编辑文件 product-template.liquid。
使用查找键盘快捷键查找包含 itemprop="name" 的行，并将其替换为：

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

使用查找键盘快捷键查找如下代码：

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

将此行添加到下方：

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

编辑后，product-template.liquid 文件应如下所示：

点击保存以确认更改。

更新区域设置

找到并展开 Locales 文件夹。
打开并编辑 en.default.json 文件。
使用查找键盘快捷键查找包含 refresh_page 的行，并将其替换为：

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

结果应如下所示：

找到包含 full_details 的行，并将其替换为：

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

结果应如下所示：

点击保存以确认更改。

（可选）添加其他语言的翻译

转到 Shopify 后台的模板页面。
点击 ... 按钮 > 编辑默认模板内容。
点击更改模板语言，然后选择要编辑的语言。此操作仅适用于已发布的模板。
在搜索字段中输入 Unit Price。
更新通用/辅助功能下的单价分隔符字段。
更新产品下的单价标签字段。
点击保存。

适用于 Venture 的步骤

单价已添加到 9.4.0 及更高版本的 Venture 模板中。如果您无法将模板更新为最新版本，请按照以下步骤将单价自定义应用于以前版本的 Venture。

编辑模板的语言文件

在 Locales 目录中，点击 en.default.json。
使用查找键盘快捷键查找包含 refresh_page 的行：

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

将以下代码添加到步骤 2 中找到的行的上方：

"unit_price_separator": "per",

编辑后，结果应如下所示：

使用查找键盘快捷键查找包含 stock_unavailable 的行：

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

将以下代码添加到步骤 4 中找到的行的上方：

"unit_price_label": "Unit price",

编辑后，结果应如下所示：

点击保存以确认更改。

编辑模板的样式表

在 Assets 目录中，点击 theme.scss.liquid。
使用查找键盘快捷键查找行 .product-single__policies {：

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

将以下代码添加到步骤 2 中找到的代码块的结束 } 标记下方：

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

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

编辑后，theme.scss.liquid 文件应如下所示：

点击保存以确认更改。

添加产品单价片段

在 Snippets 目录中点击添加新片段。
输入名称 product-unit-price。
将以下代码添加到 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>

点击保存以确认更改。

编辑您的产品卡片段

在 Snippets 目录中，点击 product-card.liquid。
使用查找键盘快捷键找到代码 <a href="{{ product.url | within: collection }}"。
将以下代码添加到步骤 2 中找到的行的上方：

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

编辑后，结果应如下所示：

使用查找键盘快捷键查找行 <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>

在从步骤 5 中找到的结束 </div> 标签上方添加以下代码：

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

编辑后，结果应如下所示：

点击保存以确认更改。

编辑购物车页面模板

在 Sections 目录中，点击 cart-template.liquid。
使用查找键盘快捷键找到 <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 -%}

在从步骤 2 中找到的 endif 标签下面添加以下代码：

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

编辑后，结果应如下所示：

使用查找键盘快捷键找到 <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}}

在从步骤 4 中找到的第二个结束 {{/if}} 标签下面添加以下代码：

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

编辑后，结果应如下所示：

点击保存以确认更改。

编辑特色产品页面模板

在 Sections 目录中，点击 featured-product.liquid。
使用查找键盘快捷键找到代码 {% assign current_variant = product.selected_or_first_available_variant %}。
在从步骤 2 中找到的行下面添加以下代码：

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

编辑后，结果应如下所示：

使用查找键盘快捷键查找包含 <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 %}

在此 ul 标签下方，找到 {% if section.settings.stock_enable %} 代码。
在从步骤 6 中找到的 if 块上方添加以下代码：

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

编辑后，结果应如下所示：

点击保存以确认更改。

编辑产品页面模板

在 Sections 目录中，点击 product-template.liquid。
使用查找键盘快捷键找到代码 {% assign current_variant = product.selected_or_first_available_variant %}。
在从步骤 2 中找到的行下面添加以下代码：

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

编辑后，结果应如下所示：

使用查找键盘快捷键查找包含 <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 %}

在此 ul 标签下方，找到 {% if section.settings.stock_enable %} 代码。
在从步骤 5 中找到的 if 块上方添加以下代码：

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

编辑后，结果应如下所示：

点击保存以确认更改。

编辑客户的订单模板

在 Templates 目录中，点击 customers/order.liquid。
使用查找键盘快捷键找到行 <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>

将从步骤 2 中找到的代码替换为以下代码：

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

编辑后，customers/order.liquid 文件应如下所示：

点击保存以确认更改。

编辑模板的 JavaScript 文件

在 Assets 目录中，点击 theme.js。
使用查找键盘快捷键找到行 // Create item's data object and add to 'items' array。
将以下代码添加到步骤 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
  };
}

编辑后，结果应如下所示：

使用查找键盘快捷键找到此行： vendor: cartItem.vendor,
在从步骤 4 中找到的行下面添加以下代码：

unitPrice: unitPrice,

编辑后，结果应如下所示：

使用查找键盘快捷键找到行 shopifyPaymentButton: '.shopify-payment-button'。
将从步骤 6 中找到的行替换为以下代码：

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

编辑后，结果应如下所示：

使用查找键盘快捷键找到行 _updateSKU: function(evt) {。
将以下代码添加到步骤 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;
},

编辑后，结果应如下所示：

使用查找键盘快捷键查找行 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);
}

在从步骤 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'
  );
}

编辑后，结果应如下所示：

点击保存以确认更改。

（可选）添加其他语言的翻译

转到 Shopify 后台的模板页面。
点击 ... 按钮 > 编辑默认模板内容。
点击更改模板语言，然后选择要编辑的语言。此操作仅适用于已发布的模板。
在搜索字段中输入 Unit Price。
更新通用/辅助功能下的单价分隔符字段。
更新产品下的单价标签字段。
点击保存。

针对 Supply 的步骤

单价已添加到 8.3.0 及更高版本的 Supply 模板中。如果您无法将模板更新为最新版本，请按照以下步骤将单价自定义应用于以前版本的 Supply。

添加产品单价片段

找到并扩展 Snippets 文件夹。
选择添加新片段。
输入名称 product-unit-price。
将以下代码复制并粘贴到文件中，然后选择保存。

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

编辑后，product-unit-price.liquid 文件应如下所示：

点击保存以确认更改。

编辑特色产品模板

找到并展开 Sections 文件夹，然后选择 featured-product.liquid 文件。
使用查找键盘快捷键在文件中查找行 {% include 'price' with price %}：

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

在步骤 2 的片段的结束 </span> 下方添加以下代码：

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

编辑后，featured-product.liquid 文件应如下所示：

点击保存以确认更改。

编辑产品模板

找到并展开 Sections 文件夹，然后选择 product-template.liquid 文件。
使用查找键盘快捷键在文件中查找行 {% include 'price' with variant.price %}：

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

在步骤 2 的结束 </span> 下方添加以下代码：

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

编辑后，product-template.liquid 文件应如下所示：

点击保存以确认更改。

编辑产品网格项目片段

找到并展开 Snippets 文件夹，然后选择 product-grid-item.liquid 文件。
使用查找键盘快捷键在文件中查找行 {% if on_sale and section.settings.product_show_saved_amount %}：

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

将该代码替换为以下片段：

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

编辑后，product-grid-item.liquid 文件应如下所示：

点击保存以确认更改。

编辑产品列表项片段

找到并展开 Snippets 文件夹，然后选择 product-list-item.liquid 文件。
使用查找键盘快捷键在文件中查找行 <div class="product-item--price text-center">：

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

将该代码替换为以下片段：

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

编辑后，product-list-item.liquid 文件应如下所示：

点击保存以确认更改。

编辑搜索结果网格片段

找到并展开 Snippets 文件夹，然后选择 search-result-grid.liquid 文件。
使用查找键盘快捷键在文件中查找行 {% if on_sale and section.settings.product_show_saved_amount %}：

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

将该代码替换为以下片段：

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

编辑后，search-result-grid.liquid 文件应如下所示：

点击保存以确认更改。

编辑购物车模板

找到并展开 Templates 文件夹，然后选择 cart.liquid 文件。
使用查找键盘快捷键在文件中查找行 <del class="cart-original-price order-discount--cart-price">：

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

将该代码替换为以下片段：

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

编辑后，cart.liquid 文件应如下所示：

点击保存以确认更改。

编辑订单模板

找到并展开 Templates 文件夹，然后选择 customers/order.liquid 文件。
使用查找键盘快捷键在文件中查找行 <td class="text-right" data-label="customer.order.price">：

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

从步骤 2 的结束 </td> 的上方添加以下代码：

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

编辑后，customers/order.liquid 文件应如下所示：

点击保存以确认更改。

编辑模板布局

找到并展开 Layout 文件夹，然后选择 theme.liquid 文件。
使用查找键盘快捷键在文件中查找包含 only_left: 的行：

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 }}
},

在步骤 2 的 only_left:{{ 'products.product.only_left' | t: count: '1' | json }} 的上方添加以下代码：

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

编辑后，theme.liquid 文件应如下所示：

点击保存以确认更改。

编辑模板风格

找到并展开 Sections 文件夹，然后选择 theme.scss.liquid 文件。
使用查找键盘快捷键在文件中查找行 .product-item--price {：

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

将该代码替换为以下片段：

.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;
  }
}

编辑后，theme.scss.liquid 文件应如下所示：

点击保存以确认更改。

编辑 JavaScript 模板代码

找到并展开 Assets 文件夹，然后选择 theme.js.liquid 文件。
使用查找键盘快捷键在文件中查找行 originalSelectorId: 'productSelect-' + sectionId,：

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'
}

在步骤 2 的 originalSelectorId: 'productSelect-' + sectionId, 的上方添加以下代码：

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

编辑后，结果应如下所示：

使用查找键盘快捷键在文件中查找行 productVariantCallback: function(variant) {：

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');
    }

在步骤 2 的 if (variant) { 下方添加以下代码：

// 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');
}

编辑后，结果应如下所示：

使用查找键盘快捷键在文件中查找行 customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';：

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>';

将行 customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; 替换为以下片段：

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

编辑后，结果应如下所示：

使用查找键盘快捷键在文件中查找行 $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide();：

} 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();
}

在步骤 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;

编辑后，结果应如下所示：

点击保存以确认更改。

编辑模板的语言文件

找到并展开 Locales 文件夹，然后选择 en.default.json 文件。
使用查找键盘快捷键在文件中查找包含 "refresh_page" 的行：

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

在步骤 2 的 "refresh_page" 的上方添加以下代码：

"unit_price_separator": "per",

编辑后，结果应如下所示：

使用查找键盘快捷键在文件中查找包含 "will_be_in_stock_after" 的行：

"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"
}

在步骤 5 的 "will_be_in_stock_after" 之后添加以下代码：

"unit_price_label": "Unit price",

编辑后，结果应如下所示：

点击保存以确认更改。

（可选）添加其他语言的翻译

转到 Shopify 后台的模板页面。
点击 ... 按钮 > 编辑默认模板内容。
点击更改模板语言，然后选择要编辑的语言。此操作仅适用于已发布的模板。
在输入栏中搜索 Unit Price。
更新通用/辅助功能下的单价分隔符字段。
更新产品下的单价标签字段。
点击保存。

在您的订单通知中显示单价

默认情况下，当单价功能处于活跃状态时，订单确认通知会显示单价。

如果您为产品添加了单价，但订单确认通知中未显示单价，则您可能需要手动更新模板。

步骤：

在 Shopify 后台中，转至设置 > 通知。
在订单部分中，点击订单确认。
点击编辑代码。
将以下代码片段添加到模板的 "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 -%}

订单确认通知的电子邮件正文 (HTML) 窗口中的适当位置突出显示了单价代码片段。

5. 点击保存。

显示单价

本页相关主题

向您的产品添加单价

在您的在线商店中显示单价

在经典模板中显示单价

针对 Debut 的步骤

编辑产品价格片段

编辑购物车页面

编辑产品系列页面

编辑产品卡网格

编辑产品卡列表

编辑订单页面

编辑模板风格

编辑 javascript 模板代码

编辑英语翻译

编辑模板布局

（可选）添加其他语言的翻译

针对 Brooklyn 的步骤

添加产品价格片段

编辑特色产品页面

编辑产品页面

编辑 ajax 购物车

编辑产品网格项目

编辑购物车页面

编辑订单页面

编辑模板风格 - 第 1 部分

编辑模板风格 - 第 2 部分

编辑 JavaScript 模板代码

编辑英语翻译

（可选）添加其他语言的翻译

Minimal 步骤

更新片段

更新样式

更新模板

更新 JavaScript

更新购物车模板

更新特色产品

更新产品模板

更新区域设置

（可选）添加其他语言的翻译

适用于 Venture 的步骤

编辑模板的语言文件

编辑模板的样式表

添加产品单价片段

编辑您的产品卡片段

编辑购物车页面模板

编辑特色产品页面模板

编辑产品页面模板

编辑客户的订单模板

编辑模板的 JavaScript 文件

（可选）添加其他语言的翻译

针对 Supply 的步骤

添加产品单价片段

编辑特色产品模板

编辑产品模板

编辑产品网格项目片段

编辑产品列表项片段

编辑搜索结果网格片段

编辑购物车模板

编辑订单模板

编辑模板布局

编辑模板风格

编辑 JavaScript 模板代码

编辑模板的语言文件

（可选）添加其他语言的翻译

在您的订单通知中显示单价

步骤：

准备好开始使用 Shopify 进行销售了吗？