显示单价

备注:单价仅适用于德国和法国的商家。

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

向您的产品添加单价

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

此自定义的步骤因您的模版而异。单击模版的按钮,然后按照以下说明操作:

Minimal 步骤

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

更新片段

  1. 找到并扩展 Snippets 文件夹。

  2. 选择添加新片段

  3. 输入名称 product-unit-price

  4. 将以下代码复制并粘贴到 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. 单击保存

  2. 查找并编辑文件 product-grid-item.liquid

  3. 替换此行:

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

使用此行:

{%- assign price = featured.price | money -%}
  1. 使用查找键盘快捷键查找 {{ 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 文件应如下所示:

product-grid-item.liquid 文件的更新版本

  1. 单击保存以确认更改。

  2. 找到并编辑文件 search-result.liquid

  3. 使用查找键盘快捷键查找 {% if item.object_type == 'product' %},并在下方的行中添加以下代码:

{%- assign variant = item.selected_or_first_available_variant -%}
  1. 现在使用查找键盘快捷键查找以下两个代码片段:
<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>
  1. 在上一步列出的两个代码片段下方分别添加以下代码块:
{%- if variant.available and variant.unit_price_measurement -%}
    {% include 'product-unit-price', variant: variant %}
  {%- endif -%}

编辑后,search-result.liquid 文件应如下所示:

search-result.liquid 文件的更新版本

  1. 单击保存以确认更改。

更新样式

  1. 找到并展开 Assets 文件夹。

  2. 编辑文件 theme.scss.liquid

  3. 使用查找键盘快捷键查找如下代码块:

.grid-link__title,
  .grid-link__meta {
    position: relative;
    margin-bottom: 5px;
  1. 在您在上一步中找到的代码片段下方插入以下代码块:
font-family: $headerFontStack;
  1. 使用查找键盘快捷键查找以下代码片段:
.grid-link__sale_price {
    opacity: 0.95;
    filter: alpha(opacity=95);
  }
  1. 在您在上一步中找到的代码片段下方插入以下代码块:
.grid-link__unit-price {
    font-size: 1em;
  }
  1. 使用查找键盘快捷键查找以下代码片段:
.order-discount--list {
    margin: 0.8em 0 0.6em 1.3em;
    list-style: none;
    padding: 0;
  }
  1. 在您在上一步中找到的代码片段下方插入以下代码块:
.order-discount--price {
    margin-bottom: 0;
  }
  1. 使用查找键盘快捷键查找以下代码片段:
.cart__product-title {
    display: inline-block;
  1. 在您在上一步中找到的代码片段下方插入以下代码块:
font-weight: $bodyFontWeightBold;

编辑后,theme.scss.liquid 文件应如下所示:

theme.scss.liquid 文件的更新版本 - 第 1 部分
theme.scss.liquid 文件的更新版本 - 第 2 部分
theme.scss.liquid 文件的更新版本 - 第 3 部分

  1. 单击保存以确认更改。

  2. 找到并编辑文件 timber.scss.liquid

  3. 使用查找键盘快捷键查找如下代码:

.quantity-selector {
      display: inline-block;
    }
  }
  1. 在您在上一步中找到的代码片段下方插入以下代码块:
.product-single__title {
    font-weight: $bodyFontWeightBold;
  }
  1. 将此代码插入文件末尾:
.product-unit-price {
    color: rgba($colorTextBody, 0.6);
    display: block;
    font-family: $headerFontStack;
    font-size: em(12px);
  }

编辑后,timber.scss.liquid 文件应如下所示:

timber.scss.liquid 文件的更新版本 - 第 1 部分
timber.scss.liquid 文件的更新版本 - 第 2 部分

  1. 单击保存以确认更改。

更新模板

  1. 找到并展开 Templates 文件夹。

  2. 找到并编辑文件 customers/order.liquid

  3. 使用查找键盘快捷键查找如下代码:

{%- else -%}
    {{ line_item.original_price | money }}
  {%- endif -%}
  1. 将此代码添加到步骤 3 中的代码下面:
{%- if line_item.unit_price_measurement -%}
    {% include 'product-unit-price', variant: line_item, available: true %}
  {%- endif -%}

编辑后,customers/order.liquid 文件应如下所示:

order.liquid 文件的更新版本

  1. 单击保存以确认更改。

更新 JavaScript

  1. 找到并编辑资产中的 theme.js

  2. 使用查找键盘快捷键查找包含 .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)

该代码块应如下所示:

theme.js 文件的更新版本

  1. 查找此代码:
else {
    this.selectors.$comparePrice.addClass('hide').html('');
    this.selectors.$comparePriceA11y.attr('aria-hidden', 'true');
  }
  1. 将以下代码添加到它下面:
// 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');
  }

结果应如下所示:

theme.js 文件的更新版本

  1. 使用查找键盘快捷键查找如下代码:
.attr('data-zoom')
    });
  });
  1. 在您在上一步中找到的代码片段下方插入以下代码块:
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;

结果应如下所示:

theme.js 文件的更新版本

  1. 单击保存以确认更改。

更新购物车模板

  1. 找到并展开 Sections 文件夹。

  2. 编辑文件 cart-template.liquid

  3. 使用查找键盘快捷键查找代码<span class="order-discount h5">{{ item.final_price | money }}</span>

  4. 将该行替换为以下代码:

<span class="order-discount order-discount--price h5">{{ item.final_price | money }}</span>
  1. 查找代码 {%- 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. 将此代码块添加到步骤 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 文件应如下所示:

cart-template.liquid 文件的更新版本

  1. 单击保存以确认更改。

更新特色产品

  1. 找到并展开 Sections 文件夹。

  2. 编辑文件 featured-product.liquid

  3. 使用查找键盘快捷键查找包含 itemprop="name" 的行,并将其替换为:

<h1 class="product-single__title" itemprop="name">{{ title }}</h1>
  1. 找到包含 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. 在您在上一步中找到的代码片段下方插入以下代码块:
{% include 'product-unit-price', variant: variant, available: true %}

编辑后,featured-product.liquid 文件应如下所示:

featured-product.liquid 文件的更新版本

  1. 单击保存以确认更改。

更新产品模板

  1. 找到并展开 Sections 文件夹。

  2. 编辑文件 product-template.liquid

  3. 使用查找键盘快捷键查找包含 itemprop="name" 的行,并将其替换为:

<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
  1. 使用查找键盘快捷键查找如下代码:
{% 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. 将此行添加到下方:
{% include 'product-unit-price', variant: variant, available: true %}

编辑后,product-template.liquid 文件应如下所示:

product-template.liquid 文件的更新版本

  1. 单击保存以确认更改。

更新区域设置

  1. 找到并展开 Locales 文件夹。

  2. 打开并编辑 en.default.json 文件。

  3. 使用查找键盘快捷键查找包含 refresh_page 的行,并将其替换为:

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

结果应如下所示:

en.default.json 文件的更新版本

  1. 找到包含 full_details 的行,并将其替换为:
"full_details": "Full details",
  "unit_price_label": "Unit price"

结果应如下所示:

en.default.json 文件的更新版本

  1. 单击保存以确认更改。

(可选)添加其他语言的翻译

  1. 转到 Shopify 后台的模版页面。

  2. 单击操作 > 编辑语言

  3. 单击更改模版语言,然后选择要编辑的语言(仅适用于已发布的模版)。

更改语言按钮

  1. 在搜索字段中输入 Unit Price

  2. 更新通用/辅助功能下的单价分隔符字段。

  3. 更新产品下的单价标签字段。

更新的字段

适用于 Venture 的步骤

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

编辑模版的语言文件

  1. Locales 目录中,单击 en.default.json

  2. 使用查找键盘快捷键查找包含 refresh_page 的行:

"refresh_page": "choosing a selection results in a full page refresh"
  1. 将以下代码添加到步骤 2 中找到的行的上方:
"unit_price_separator": "per",

编辑后,结果应如下所示:

en.default.json 文件的更新版本

  1. 使用查找键盘快捷键查找包含 stock_unavailable 的行:
"stock_unavailable": "The item could not be added to your cart because there are not enough in stock."
  1. 将以下代码添加到步骤 4 中找到的行的上方:
"unit_price_label": "Unit price",

编辑后,结果应如下所示:

en.default.json 文件的更新版本

  1. 单击保存以确认更改。

编辑模版的样式表

  1. Assets 目录中,单击 theme.scss.liquid

  2. 使用查找键盘快捷键查找行 .product-single__policies {

.product-single__policies {
      font-size: em($font-size-base - 1);
    }
  1. 将以下代码添加到步骤 2 中找到的代码块的结束 } 标记下方:
.product-unit-price {
      font-size: em(12);
      color: $color-body-text;
    }

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

编辑后,theme.scss.liquid 文件应如下所示:

theme.scss.liquid 文件的更新版本

  1. 单击保存以确认更改。

添加产品单价片段

  1. Snippets 目录中单击添加新片段

  2. 输入名称 product-unit-price

  3. 将以下代码添加到 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. 单击保存以确认更改。

编辑您的产品卡片段

  1. Snippets 目录中,单击 product-card.liquid

  2. 使用查找键盘快捷键找到代码 <a href="{{ product.url | within: collection }}"

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

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

编辑后,结果应如下所示:

product-card.liquid 文件的更新版本

  1. 使用查找键盘快捷键查找行 <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. 在从步骤 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 -%}

编辑后,结果应如下所示:

product-card.liquid 文件的更新版本

  1. 单击保存以确认更改。

编辑购物车页面模板

  1. Sections 目录中,单击 cart-template.liquid

  2. 使用查找键盘快捷键找到 <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. 在从步骤 2 中找到的 endif 标签下面添加以下代码:
{%- if item.unit_price_measurement -%}
    {% include 'product-unit-price', product_variant: item %}
  {%- endif -%}

编辑后,结果应如下所示:

cart-template.liquid 文件的更新版本

  1. 使用查找键盘快捷键找到 <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. 在从步骤 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}}

编辑后,结果应如下所示:

cart-template.liquid 文件的更新版本

  1. 单击保存以确认更改。

编辑特色产品页面模板

  1. Sections 目录中,单击 featured-product.liquid

  2. 使用查找键盘快捷键找到代码 {% assign current_variant = product.selected_or_first_available_variant %}

  3. 在从步骤 2 中找到的行下面添加以下代码:

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

编辑后,结果应如下所示:

featured-product.liquid 文件的更新版本

  1. 使用查找键盘快捷键查找包含 <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. 在此 ul 标签下方,找到 {% if section.settings.stock_enable %} 代码。

  2. 在从步骤 6 中找到的 if 块上方添加以下代码:

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

编辑后,结果应如下所示:

featured-product.liquid 文件的更新版本

  1. 单击保存以确认更改。

编辑产品页面模板

  1. Sections 目录中,单击 product-template.liquid

  2. 使用查找键盘快捷键找到代码 {% assign current_variant = product.selected_or_first_available_variant %}

  3. 在从步骤 2 中找到的行下面添加以下代码:

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

编辑后,结果应如下所示:

product-template.liquid 文件的更新版本

  1. 使用查找键盘快捷键查找包含 <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. 在此 ul 标签下方,找到 {% if section.settings.stock_enable %} 代码。

  2. 在从步骤 5 中找到的 if 块上方添加以下代码:

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

编辑后,结果应如下所示:

product-template.liquid 文件的更新版本

  1. 单击保存以确认更改。

编辑客户的订单模板

  1. Templates 目录中,单击 customers/order.liquid

  2. 使用查找键盘快捷键找到行 <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. 将从步骤 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 文件应如下所示:

customers/order.liquid 文件的更新版本

  1. 单击保存以确认更改。

编辑模版的 JavaScript 文件

  1. Assets 目录中,单击 theme.js

  2. 使用查找键盘快捷键找到行 // Create item's data object and add to 'items' array

  3. 将以下代码添加到步骤 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
  };
}

编辑后,结果应如下所示:

theme.js 文件的更新版本

  1. 使用查找键盘快捷键找到此行: vendor: cartItem.vendor,

  2. 在从步骤 4 中找到的行下面添加以下代码:

unitPrice: unitPrice,

编辑后,结果应如下所示:

theme.js 文件的更新版本

  1. 使用查找键盘快捷键找到行 shopifyPaymentButton: '.shopify-payment-button'

  2. 将从步骤 6 中找到的行替换为以下代码:

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

编辑后,结果应如下所示:

theme.js 文件的更新版本

  1. 使用查找键盘快捷键找到行 _updateSKU: function(evt) {

  2. 将以下代码添加到步骤 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;
},

编辑后,结果应如下所示:

theme.js 文件的更新版本

  1. 使用查找键盘快捷键查找行 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. 在从步骤 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'
  );
}

编辑后,结果应如下所示:

theme.js 文件的更新版本

  1. 单击保存以确认更改。

(可选)添加其他语言的翻译

  1. 转到 Shopify 后台的模版页面。

  2. 单击操作 > 编辑语言

  3. 单击更改模版语言,然后选择要编辑的语言(仅适用于已发布的模版)。

模版语言选择

  1. 在搜索字段中输入 Unit Price

  2. 更新通用/辅助功能下的单价分隔符字段。

  3. 更新产品下的单价标签字段。

更新版单价翻译

针对 Supply 的步骤

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

添加产品单价片段

  1. 找到并扩展 Snippets 文件夹。

  2. 选择添加新片段

  3. 输入名称 product-unit-price

  4. 将以下代码复制并粘贴到文件中,然后选择保存

{%- 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 文件应如下所示:

product-unit-price.liquid 文件的更新版本

  1. 单击保存以确认更改。

编辑特色产品模板

  1. 找到并展开 Sections 文件夹,然后选择 featured-product.liquid 文件。

  2. 使用查找键盘快捷键在文件中查找行 {% include 'price' with price %}

<li>
    <span id="productPrice-{{ section.id }}" class="h1">
      {% include 'price' with price %}
    </span>
  </li>
  1. 在步骤 2 的片段的结束 </span> 下方添加以下代码:
{% include 'product-unit-price' variant: variant %}

编辑后,featured-product.liquid 文件应如下所示:

featured-product.liquid 文件的更新版本

  1. 单击保存以确认更改。

编辑产品模板

  1. 找到并展开 Sections 文件夹,然后选择 product-template.liquid 文件。

  2. 使用查找键盘快捷键在文件中查找行 {% include 'price' with variant.price %}

<li>
    <span id="productPrice-{{ section.id }}" class="h1">
      {% include 'price' with variant.price %}
    </span>
  </li>
  1. 在步骤 2 的结束 </span> 下方添加以下代码:
{% include 'product-unit-price', variant: variant %}

编辑后,product-template.liquid 文件应如下所示:

product-template.liquid 文件的更新版本

  1. 单击保存以确认更改。

编辑产品网格项目片段

  1. 找到并展开 Snippets 文件夹,然后选择 product-grid-item.liquid 文件。

  2. 使用查找键盘快捷键在文件中查找行 {% 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>
  1. 将该代码替换为以下片段:
{%- 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 文件应如下所示:

product-grid-item.liquid 文件的更新版本

  1. 单击保存以确认更改。

编辑产品列表项片段

  1. 找到并展开 Snippets 文件夹,然后选择 product-list-item.liquid 文件。

  2. 使用查找键盘快捷键在文件中查找行 <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>
  1. 将该代码替换为以下片段:
<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 文件应如下所示:

product-price.liquid 文件的更新版本

  1. 单击保存以确认更改。

编辑搜索结果网格片段

  1. 找到并展开 Snippets 文件夹,然后选择 search-result-grid.liquid 文件。

  2. 使用查找键盘快捷键在文件中查找行 {% 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>
  1. 将该代码替换为以下片段:
{%- 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 文件应如下所示:

search-result-grid.liquid 文件的更新版本

  1. 单击保存以确认更改。

编辑购物车模板

  1. 找到并展开 Templates 文件夹,然后选择 cart.liquid 文件。

  2. 使用查找键盘快捷键在文件中查找行 <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 -%}
  1. 将该代码替换为以下片段:
<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 文件应如下所示:

cart.liquid 文件的更新版本

  1. 单击保存以确认更改。

编辑订单模板

  1. 找到并展开 Templates 文件夹,然后选择 customers/order.liquid 文件。

  2. 使用查找键盘快捷键在文件中查找行 <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>
  1. 从步骤 2 的结束 </td> 的上方添加以下代码:
{%- if line_item.unit_price_measurement -%}
    {% include 'product-unit-price', variant: line_item, available: true %}
  {%- endif -%}

编辑后,customers/order.liquid 文件应如下所示:

customers/order.liquid 文件的更新版本

  1. 单击保存以确认更改。

编辑模版布局

  1. 找到并展开 Layout 文件夹,然后选择 theme.liquid 文件。

  2. 使用查找键盘快捷键在文件中查找包含 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 }}
    },
  1. 在步骤 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 文件应如下所示:

theme.liquid 文件的更新版本

  1. 单击保存以确认更改。

编辑模版样式

  1. 找到并展开 Sections 文件夹,然后选择 theme.scss.liquid 文件。

  2. 使用查找键盘快捷键在文件中查找行 .product-item--price {

.product-item--price {
    @include clearfix;
    .h1 {
      margin-bottom: $gutter/2;
    }
    span {
      line-height: 22px;
    }
    small {
      white-space: nowrap;
    }
  }
  1. 将该代码替换为以下片段:
.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 文件应如下所示:

theme.scss.liquid 文件的更新版本

  1. 单击保存以确认更改。

编辑 JavaScript 模版代码

  1. 找到并展开 Assets 文件夹,然后选择 theme.js.liquid 文件。

  2. 使用查找键盘快捷键在文件中查找行 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'
    }
  1. 在步骤 2 的 originalSelectorId: 'productSelect-' + sectionId, 的上方添加以下代码:
unitPriceContainer: '[data-unit-price-container]',
    unitPrice: '[data-unit-price]',
    unitPriceBaseUnit: '[data-unit-price-base-unit]',

编辑后,结果应如下所示:

theme.js.liquid 文件的更新版本

  1. 使用查找键盘快捷键在文件中查找行 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');
    }
  1. 在步骤 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');
}

编辑后,结果应如下所示:

theme.js.liquid 文件的更新版本

  1. 使用查找键盘快捷键在文件中查找行 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>';
  1. 将行 customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; 替换为以下片段:
customPriceFormat += ' <span aria-hidden="true"><small><s>' + comparePrice + '</s></small></span>';

编辑后,结果应如下所示:

theme.js.liquid 文件的更新版本

  1. 使用查找键盘快捷键在文件中查找行 $(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();
}
  1. 在步骤 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;

编辑后,结果应如下所示:

theme.js.liquid 文件的更新版本

  1. 单击保存以确认更改。

编辑模版的语言文件

  1. 找到并展开 Locales 文件夹,然后选择 en.default.json 文件。

  2. 使用查找键盘快捷键在文件中查找包含 "refresh_page" 的行:

"accessibility": {
  "refresh_page": "choosing a selection results in a full page refresh"
},
  1. 在步骤 2 的 "refresh_page" 的上方添加以下代码:
"unit_price_separator": "per",

编辑后,结果应如下所示:

en.default.json 文件的更新版本

  1. 使用查找键盘快捷键在文件中查找包含 "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"
}
  1. 在步骤 5 的 "will_be_in_stock_after" 之后添加以下代码:
"unit_price_label": "Unit price",

编辑后,结果应如下所示:

en.default.json 文件的更新版本

  1. 单击保存以确认更改。

(可选)添加其他语言的翻译

  1. 转到模版页面

  2. 选择操作 > 编辑语言

  3. 单击更改模版语言,然后选择要编辑的语言(仅适用于已发布的模版)。

可选步骤 3

  1. 在输入栏中搜索“单价”

  2. 更新“通用/辅助功能”下的“单价分隔符”字段。

  3. 更新“产品”下的“单价标签”字段

可选步骤 6

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

如果您已向您的产品添加了单价,但您的单价未显示在您的订单确认通知中,那么您可能需要更新您的订单通知模板。

步骤:

  1. 在 Shopify 后台中,转到设置 > 通知

  2. 单击订单确认

  3. 将以下片段添加到模板中:

{%- if line_item.unit_price_measurement -%}
    {{ 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 }}
  {%- endif -%}
  1. 单击保存

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

免费试用