显示单价

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

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

向您的产品添加单价

在 Shopify 后台中，转到产品。
点击要更改的产品的名称。
单击想要更新的多属性。
在定价下，选择显示此产品的单价。
在产品总计量字段中，输入您产品的单位数量。
使用选择单位下拉菜单来选择多属性的计量单位。要显示的单位类型因您销售的产品类型而异。例如，如果产品是 2 升的肥皂液，则选择升。
在单价字段中，输入产品的单位价格。
可选：对基本单位输入一个数字。例如，对于重 1 千克的产品，您可能会选择 100 克作为基本单位。
单击保存。

在Shopify 应用中，依次转到产品>所有产品。
在所有产品屏幕中点击一个产品。
点击想要更新的多属性。
在定价下，选择显示此产品的单价。
在产品总计量字段中，输入您产品的单位数量。
使用选择单位下拉菜单来选择多属性的计量单位。要显示的单位类型因您销售的产品类型而异。例如，如果产品是 2 升的肥皂液，则选择升。
在单价字段中，输入产品的单位价格。
可选：选择一个基本单位。例如，对于重 1 千克的产品，您可能会选择 100 克作为基本单位。
点击保存。

在Shopify 应用中，依次转到产品>所有产品。
在所有产品屏幕中点击一个产品。
点击想要更新的多属性。
在定价下，选择显示此产品的单价。
在产品总计量字段中，输入您产品的单位数量。
使用选择单位下拉菜单来选择多属性的计量单位。要显示的单位类型因您销售的产品类型而异。例如，如果产品是 2 升的肥皂液，则选择升。
在单价字段中，输入产品的单位价格。
可选：选择一个基本单位。例如，对于重 1 千克的产品，您可能会选择 100 克作为基本单位。
点击保存。

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

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

针对 Debut 的步骤

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

编辑产品价格片段

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

{%ifavailableandcompare_at_price>price%}price--on-sale{%endif%}" data-price>

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

{%ifavailableandcompare_at_price>price%}price--on-sale{%endif%}{%ifavailableandvariant.unit_price_measurement%}price--unit-available{%endif%}" data-price>

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

使用查找键盘快捷键通过搜索price__sale来查找以下代码：

  {{'products.product.sale_price'|t}} 
  {{money_price}} {{'products.product.on_sale'|t}}

在结束

标记下方添加以下代码：

{%ifvariant.unit_price_measurement%}  {{'products.product.unit_price_label'|t}} 
 {%-captureunit_price_separator-%}/{{'general.accessibility.unit_price_separator'|t}} {%-endcapture-%}{%-captureunit_price_base_unit-%}{%-ifavailableandvariant.unit_price_measurement-%}{%-ifvariant.unit_price_measurement.reference_value!=1-%}{{-variant.unit_price_measurement.reference_value-}}{%-endif-%}{{variant.unit_price_measurement.reference_unit}}{%-endif-%}{%-endcapture-%}{{variant.unit_price|money}}{{-unit_price_separator-}}{{-unit_price_base_unit-}}
 
{%endif%}

点击保存以确认更改。

编辑购物车页面

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

{%-ifitem.original_price!=item.final_price-%}  {{'products.product.regular_price'|t}} 
  {{item.original_price|money}} 
  {{'products.product.sale_price'|t}} 
  {{item.final_price|money}} 
 
{%-else-%}{{item.original_price|money}}{%-endif-%}

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

{%-ifitem.original_price!=item.final_price-%} {{'products.product.regular_price'|t}} 
  {{item.original_price|money}} 
  {{'products.product.sale_price'|t}} 
  {{item.final_price|money}} 
{%-else-%} {{'products.product.regular_price'|t}} 
 {{item.original_price|money}}
{%-endif-%}{%-ifitem.unit_price_measurement-%}< dt > < span class = " visually-hidden visually-hidden --inline">{{'products.product.unit_price_label'|t}}   {%-captureunit_price_separator-%}/{{'general.accessibility.unit_price_separator'|t}} {%-endcapture-%}{%-captureunit_price_base_unit-%}{%-ifitem.unit_price_measurement.reference_value!=1-%}{{-item.unit_price_measurement.reference_value-}}{%-endif-%}{{item.unit_price_measurement.reference_unit}}{%-endcapture-%}{{item.unit_price|money}}{{-unit_price_separator-}}{{-unit_price_base_unit-}} 
{%-endif-%}

编辑后，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 }}"来查找以下代码：

{%-ifline_item.original_price!=line_item.final_price-%}  {{'products.product.regular_price'|t}} 
  {{line_item.original_price|money}} 
  {{'products.product.sale_price'|t}} 
  {{line_item.final_price|money}} 
 
{%-else-%}{{line_item.original_price|money}}{%-endif-%}

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

{%-ifline_item.original_price!=line_item.final_price-%} {{'products.product.regular_price'|t}} 
  {{line_item.original_price|money}} 
  {{'products.product.sale_price'|t}} 
  {{line_item.final_price|money}} 
{%-else-%} {{'products.product.regular_price'|t}} 
 {{line_item.original_price|money}}
{%-endif-%}{%-ifline_item.unit_price_measurement-%}< dt > < span class = " visually-hidden visually-hidden --inline">{{'products.product.unit_price_label'|t}}   {%-captureunit_price_separator-%}/{{'general.accessibility.unit_price_separator'|t}} {%-endcapture-%}{%-captureunit_price_base_unit-%}{%-ifline_item.unit_price_measurement.reference_value!=1-%}{{-line_item.unit_price_measurement.reference_value-}}{%-endif-%}{{line_item.unit_price_measurement.reference_unit}}{%-endcapture-%}{{line_item.unit_price|money}}{{-unit_price_separator-}}{{-unit_price_base_unit-}} 
{%-endif-%}

编辑后，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:5px010px;width:100%;@includeflex-basis(100%);}

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

.price__unit{@includeflex-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',

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

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

varliveRegionText='[Availability] [Regular] [$$] [Sale] [$]';

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

varliveRegionText='[Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$]';

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

varsalePrice='';

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

varunitLabel='';varunitPrice='';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){returnvariant.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 priceif(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。
将以下代码复制并粘贴到文件中。

{%ifvariant.unit_price_measurement%}price-container--unit-available{%endif%}" data-price-container>{%-ifvariant.compare_at_price>variant.price-%}{{'products.general.regular_price'|t}}  {{variant.compare_at_price|money}}  {{'products.general.sale_price'|t}}{%-else-%}{{'products.general.regular_price'|t}}    {{'products.general.sale_price'|t}}{%-endif-%}{%ifvariant.compare_at_price>variant.price%}on-sale{%endif%}" itemprop="price" content="{{variant.price|divided_by:100.00}}">{{variant.price|money}} {%-captureunit_price_separator-%}/ {{'general.accessibility.unit_price_separator'|t}} {%-endcapture-%}{%-captureunit_price_base_unit-%}{%-ifvariant.unit_price_measurement-%}{%-ifvariant.unit_price_measurement.reference_value!=1-%}{{-variant.unit_price_measurement.reference_value-}}{%-endif-%}{{variant.unit_price_measurement.reference_unit}}{%-endif-%}{%-endcapture-%} {{'products.general.unit_price'|t}} {{variant.unit_price|money}}{{-unit_price_separator-}}{{-unit_price_base_unit-}}

点击保存以确认更改。

编辑特色产品页面

在Sections目录中，点击featured-product.liquid文件。
使用查找键盘快捷键通过搜索itemprop="offers"来查找以下代码：

{%comment%}Optionally show the 'compare at' or original price of the product.{%endcomment%}{%ifcompare_at_price>price%}{%unlesscurrent_variant.available%}aria-hidden="true"{%endunless%}>{{'products.general.regular_price'|t}}  {{compare_at_price|money}}  {{'products.general.sale_price'|t}}{%else%}{%unlesscurrent_variant.available%}aria-hidden="true"{%endunless%}>{{'products.general.regular_price'|t}}    {{'products.general.sale_price'|t}}{%endif%}{%ifcompare_at_price>price%}on-sale{%endif%}" itemprop="price" content="{{price|divided_by:100.00}}"{%unlesscurrent_variant.available%}aria-hidden="true"{%endunless%}>{{price|money}}

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

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

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

点击保存以确认更改。

编辑产品页面

在Sections目录中，点击product-template.liquid文件。
使用查找键盘快捷键通过搜索itemprop="offers"来查找以下代码：

{%comment%}Optionally show the 'compare at' or original price of the product.{%endcomment%}{%ifcurrent_variant.compare_at_price>current_variant.price%}{%unlesscurrent_variant.available%}aria-hidden="true"{%endunless%}>{{'products.general.regular_price'|t}}  {{current_variant.compare_at_price|money}}  {{'products.general.sale_price'|t}}{%else%}{%unlesscurrent_variant.available%}aria-hidden="true"{%endunless%}>{{'products.general.regular_price'|t}}    {{'products.general.sale_price'|t}}{%endif%}{%ifcurrent_variant.compare_at_price>current_variant.price%}on-sale{%endif%}" itemprop="price" content="{{current_variant.price|divided_by:100.00}}"{%unlesscurrent_variant.available%}aria-hidden="true"{%endunless%}>{{current_variant.price|money}}

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

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

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

点击保存以确认更改。

编辑 ajax 购物车

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

{{#ifdiscountsApplied}}{%endraw%}{{'products.general.regular_price'|t}}{%raw%} {{{price}}} {%endraw%}{{'products.general.sale_price'|t}}{%raw%} {{{discountedPrice}}} {{else}} {{{price}}} {{/if}}

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

{{#ifunitPrice}}{%endraw%}{{'products.general.unit_price'|t}}{%raw%} {%endraw%}{%-captureunit_price_separator-%}/ {{'general.accessibility.unit_price_separator'|t}} {%-endcapture-%}{%raw%}{{{ unitPrice.price }}}{{%endraw%}{{-unit_price_separator-}}{%raw%}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}  {{/if}}

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

点击保存以确认更改。

编辑产品网格项目

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

{%captureimg_id_class%}ProductImage-{{product.featured_image.id}}{%endcapture%}{%captureimg_wrapper_id%}ProductImageWrapper-{{product.featured_image.id}}{%endcapture%}{%-assignimg_url=product.featured_image|img_url:'1x1'|replace:'_1x1.','_{width}x.'-%}

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

{%-assignvariant=product.selected_or_first_available_variant-%}

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

使用查找键盘快捷键通过搜索{{ product.price | money_without_trailing_zeros }}来查找以下代码：

{%ifon_sale%}{{'products.general.sale_price'|t}}{%else%}{{'products.general.regular_price'|t}}{%endif%}{%ifproduct.price_varies%}{{product.price_min|money_without_trailing_zeros}}  + {%else%}{{product.price|money_without_trailing_zeros}}{%endif%}

在下方添加以下代码：

{%-ifproduct.price_varies==falseandvariant.unit_price_measurement-%}{%-captureunit_price_separator-%}/ {{'general.accessibility.unit_price_separator'|t}} {%-endcapture-%}{%-captureunit_price_base_unit-%}{%-ifvariant.unit_price_measurement.reference_value!=1-%}{{-variant.unit_price_measurement.reference_value-}}{%-endif-%}{{variant.unit_price_measurement.reference_unit}}{%-endcapture-%} {{'products.general.unit_price'|t}} {{variant.unit_price|money}}{{-unit_price_separator-}}{{-unit_price_base_unit-}}{%-endif-%}

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

点击保存以确认更改。

编辑购物车页面

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

{%-ifitem.original_line_price!=item.final_line_price-%}{{'products.general.regular_price'|t}} {{item.original_line_price|money}} {{'products.general.sale_price'|t}} {{item.final_line_price|money}}{%-else-%}{{item.original_line_price|money}}{%-endif-%}

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

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

{%-ifitem.unit_price_measurement-%}{{'products.general.unit_price'|t}} {%-captureunit_price_separator-%}/ {{'general.accessibility.unit_price_separator'|t}} {%-endcapture-%}{%-captureunit_price_base_unit-%}{%-ifitem.unit_price_measurement.reference_value!=1-%}{{-item.unit_price_measurement.reference_value-}}{%-endif-%}{{item.unit_price_measurement.reference_unit}}{%-endcapture-%}{{item.unit_price|money}}{{-unit_price_separator-}}{{-unit_price_base_unit-}}{%-endif-%}

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

点击保存以确认更改。

编辑订单页面

在Templates目录中，点击customers/order.liquid文件。
使用查找键盘快捷键通过搜索{{ line_item.original_price | money }}来查找以下代码：

{{'customer.order.price'|t}}">{%-ifline_item.original_price!=line_item.final_price-%}{{'products.general.regular_price'|t}} {{line_item.original_price|money}} {{'products.general.sale_price'|t}} {{line_item.final_price|money}}{%-else-%}{{line_item.original_price|money}}{%-endif-%}

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

{%-ifline_item.unit_price_measurement-%}{{'products.general.unit_price'|t}} {%-captureunit_price_separator-%}/ {{'general.accessibility.unit_price_separator'|t}} {%-endcapture-%}{%-captureunit_price_base_unit-%}{%-ifline_item.unit_price_measurement.reference_value!=1-%}{{-line_item.unit_price_measurement.reference_value-}}{%-endif-%}{{line_item.unit_price_measurement.reference_unit}}{%-endcapture-%}{{line_item.unit_price|money}}{{-unit_price_separator-}}{{-unit_price_base_unit-}}{%-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:15px025px0;}

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

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

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

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

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

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

点击保存以确认更改。

编辑 JavaScript 模板代码

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

varprodImg;

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

varunitPrice=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){returnvariant.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中。

{%-unlessavailable-%}{%-ifvariant.title-%}{%-assignavailable=variant.available-%}{%-else-%}{%-assignavailable=true-%}{%-endif-%}{%-endunless-%}{%unlessavailableandvariant.unit_price_measurement%}hide{%endunless%}{%ifwrapper_class!=blank%}{{wrapper_class}}{%endif%}" data-unit-price-container>{%-captureunit_price_separator-%}/{{'general.accessibility.unit_price_separator'|t}}{%-endcapture-%}{%-captureunit_price_base_unit-%}{%-ifavailableandvariant.unit_price_measurement-%}{%-ifvariant.unit_price_measurement.reference_value!=1-%}{{-variant.unit_price_measurement.reference_value-}}{%-endif-%}{{variant.unit_price_measurement.reference_unit}}{%-endif-%}{%-endcapture-%}{{'products.product.unit_price_label'|t}} {{variant.unit_price|money}}{{-unit_price_separator-}}{{-unit_price_base_unit-}}

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

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

使用此行：

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

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

{%-assignvariant=featured.selected_or_first_available_variant-%}{%-ifvariant.availableandvariant.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' %}，并在下方的行中添加以下代码：

{%-assignvariant=item.selected_or_first_available_variant-%}

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

{{item.compare_at_price_max|money}}

和

{{'products.product.regular_price'|t}} {{item.price|money}}

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

{%-ifvariant.availableandvariant.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.8em00.6em1.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 中的代码下面：

{%-ifline_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 pricethis.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){returnvariant.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。
使用查找键盘快捷方式找到代码{{ item.final_price | money }}。
将该行替换为以下代码：

{{item.final_price|money}}

查找代码{%- if item.line_level_discount_allocations != blank -%}第一次出现的位置：

{%-ifitem.line_level_discount_allocations!=blank-%}{{'customer.order.discount'|t}}">{%-fordiscount_allocationinitem.line_level_discount_allocations-%} {{discount_allocation.discount_application.title}}(-{{discount_allocation.amount|money}}) 
{%-endfor-%}
{%-endif-%}

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

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

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

点击保存以确认更改。

更新特色产品

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

{{title}}

找到包含id="PriceA11y"的代码：

{%ifcompare_at_price>price%}{{'products.product.regular_price'|t}}  { compare_at_price | money }} {%endif%}

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

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

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

点击保存以确认更改。

更新产品模板

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

{{product.title}}

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

{%else%}{{'products.product.sale_price'|t}} {{product.compare_at_price_max|money}}{%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中：

{%ifwrapper_class!=blank%}{{wrapper_class}}{%endif%}{%unlessproduct_variant.unit_price_measurement%}hide{%endunless%}" data-unit-price-container>{%-captureunit_price_separator-%}/{{'general.accessibility.unit_price_separator'|t}}{%-endcapture-%}{%-captureunit_price_base_unit-%}{%-ifproduct_variant.unit_price_measurement.reference_value!=1-%}{{-product_variant.unit_price_measurement.reference_value-}}{%-endif-%}{{product_variant.unit_price_measurement.reference_unit}}{%-endcapture-%}{{'products.product.unit_price_label'|t}} {{product_variant.unit_price|money}}{{-unit_price_separator-}}{{-unit_price_base_unit-}}

点击保存以确认更改。

编辑您的产品卡片段

在Snippets目录中，点击product-card.liquid。
使用查找键盘快捷键找到代码。


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


          
           {%-assigncurrent_variant=product.selected_or_first_available_variant-%}
          
          编辑后，结果应如下所示：
          
          
           
          
          
          
           使用查找键盘快捷键查找行：
          
          
           {%ifproduct.compare_at_price>product.price%}{%comment%}Product is on sale{%endcomment%}{%ifproduct.price_varies%}{%assignsale_price=product.price|money_without_trailing_zeros%}{{'products.product.on_sale_from_html'|t:price:sale_price}}{%else%}{{'products.product.regular_price'|t}} {{product.compare_at_price|money_without_trailing_zeros}} {{'products.product.sale_price'|t}}{{product.price|money_without_trailing_zeros}}{%endif%}{%else%}{%comment%}Not on sale, but could still have varying prices{%endcomment%}{%ifproduct.price_varies%}{%assignprice=product.price|money_without_trailing_zeros%}{{'products.product.from_text_html'|t:price:price}}{%else%}{{'products.product.regular_price'|t}}{{product.price|money_without_trailing_zeros}}{%endif%}{%endif%}
          
          
           在从步骤 5 中找到的结束

标签上方添加以下代码：
          
          
           {%-unlessproduct.price_varies-%}{%-ifcurrent_variant.unit_price_measurement-%}{%include'product-unit-price',product_variant:current_variant,wrapper_class:"product-card__unit-price"%}{%-endif-%}{%-endunless-%}
          
          编辑后，结果应如下所示：
          
          
           
          
          
          
           点击保存以确认更改。
          
          编辑购物车页面模板
          
           在Sections目录中，点击cart-template.liquid。
           使用查找键盘快捷键找到的第一个实例：
          
          
           {%-ifitem.original_line_price!=item.final_line_price-%}{{'products.product.regular_price'|t}} {{item.original_line_price|money}} {{'products.product.sale_price'|t}} {{item.final_line_price|money}}{%-else-%}{{item.original_line_price|money}}{%-endif-%}
          
          
           在从步骤 2 中找到的endif标签下面添加以下代码：
          
          
           {%-ifitem.unit_price_measurement-%}{%include'product-unit-price',product_variant:item%}{%-endif-%}
          
          编辑后，结果应如下所示：
          
          
           
          
          
          
           使用查找键盘快捷键找到的第二个实例：
          
          
           {{#ifdiscountsApplied}}{%endraw%}{{'products.product.regular_price'|t}}{%raw%} {{{originalLinePrice}}} {%endraw%}{{'products.product.sale_price'|t}}{%raw%} {{{linePrice}}} {{else}} {{{originalLinePrice}}} {{/if}} {{#if discountsApplied}} {%endraw%}{{'customer.order.discount'|t}}{%raw%}"> {{#each discounts}} {%endraw%}{%-include'icon-saletag'-%}{%raw%}{{ this.discount_application.title }} (-{{{ this.formattedAmount }}}) 
 {{/each}} 
 {{/if}}
          
          
           在从步骤 4 中找到的第二个结束{{/if}}标签下面添加以下代码：
          
          
           {{#ifunitPrice}}{%endraw%}{{'products.product.unit_price_label'|t}}{%raw%} {%endraw%}{%-captureunit_price_separator-%}/ {{'general.accessibility.unit_price_separator'|t}} {%-endcapture-%}{%raw%}{{{ unitPrice.price }}}{%endraw%}{{-unit_price_separator-}}{%raw%}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}  {{/if}}
          
          编辑后，结果应如下所示：
          
          
           
          
          
          
           点击保存以确认更改。
          
          编辑特色产品页面模板
          
           在Sections目录中，点击featured-product.liquid。
           使用查找键盘快捷键找到代码{% assign current_variant = product.selected_or_first_available_variant %}。
           在从步骤 2 中找到的行下面添加以下代码：
          
          
           {%assignvariants_with_unit_price=product.variants|where:"unit_price_measurement"%}
          
          编辑后，结果应如下所示：
          
          
           
          
          
          
           使用查找键盘快捷键查找包含
            {{section.id}}" class="{%unlessproduct.compare_at_price>product.price%}hide{%endunless%}"> {{'products.product.on_sale'|t}}
 
 {%unlessproduct.compare_at_price_max>product.price%}{{'products.product.regular_price'|t}}{%endunless%}{{section.id}}" class="product-single__price" itemprop="price" content="{{current_variant.price|divided_by:100.00}}">{{current_variant.price|money}} 
{%ifproduct.compare_at_price_max>product.price%} {{'products.product.regular_price'|t}} {{section.id}}" class="product-single__price product-single__price--compare">{{current_variant.compare_at_price|money}} 
{%endif%}{%ifsection.settings.stock_enable%}
          
          
           在此ul标签下方，找到{% if section.settings.stock_enable %}代码。
           在从步骤 6 中找到的if块上方添加以下代码：
          
          
           {%-ifvariants_with_unit_price.size>0-%}{%include'product-unit-price',product_variant:current_variant%}
{%-endif-%}
          
          编辑后，结果应如下所示：
          
          
           
          
          
          
           点击保存以确认更改。
          
          编辑产品页面模板
          
           在Sections目录中，点击product-template.liquid。
           使用查找键盘快捷键找到代码{% assign current_variant = product.selected_or_first_available_variant %}。
           在从步骤 2 中找到的行下面添加以下代码：
          
          
           {%assignvariants_with_unit_price=product.variants|where:"unit_price_measurement"%}
          
          编辑后，结果应如下所示：
          
          
           
          
          
          
           使用查找键盘快捷键查找包含
           {%ifshop.taxes_includedorshop.shipping_policy.body!=blank%}product-single__price-container{%endif%}"> {{section.id}}" class="{%unlessproduct.compare_at_price>product.price%}hide{%endunless%}"> {{'products.product.on_sale'|t}}
 
 {%unlessproduct.compare_at_price_max>product.price%}{{'products.product.regular_price'|t}}{%endunless%}{{section.id}}" class="product-single__price" itemprop="price" content="{{current_variant.price|divided_by:100.00}}">{{current_variant.price|money}} 
{%ifproduct.compare_at_price_max>product.price%} {{'products.product.regular_price'|t}} {{section.id}}" class="product-single__price product-single__price--compare">{{current_variant.compare_at_price|money}} 
{%endif%}{%ifsection.settings.stock_enable%}
          
          
           在此ul标签下方，找到{% if section.settings.stock_enable %}代码。
           在从步骤 5 中找到的if块上方添加以下代码：
          
          
           {%-ifvariants_with_unit_price.size>0-%}{%include'product-unit-price',product_variant:current_variant%}
{%-endif-%}
          
          编辑后，结果应如下所示：
          
          
           
          
          
          
           点击保存以确认更改。
          
          编辑客户的订单模板
          
           在Templates目录中，点击customers/order.liquid。
           使用查找键盘快捷键找到行：
          
          
           {{'customer.order.price'|t}}">{%-ifline_item.original_price!=line_item.final_price-%}{{'products.product.regular_price'|t}} {{line_item.original_price|money}} {{'products.product.sale_price'|t}} {{line_item.final_price|money}}{%-else-%}{{line_item.original_price|money}}{%-endif-%}
          
          
           将从步骤 2 中找到的代码替换为以下代码：
          
          
           {{'customer.order.price'|t}}"> {%-ifline_item.original_price!=line_item.final_price-%}{{'products.product.regular_price'|t}} {{line_item.original_price|money}} {{'products.product.sale_price'|t}} {{line_item.final_price|money}}{%-else-%}{{line_item.original_price|money}}{%-endif-%}
{%-ifline_item.unit_price_measurement-%}{%include'product-unit-price',product_variant:line_item%}{%-endif-%}
          
          编辑后，customers/order.liquid文件应如下所示：
          
          
           
          
          
          
           点击保存以确认更改。
          
          编辑模板的 JavaScript 文件
          
           在Assets目录中，点击theme.js。
           使用查找键盘快捷键找到行// Create item's data object and add to 'items' array。
           将以下代码添加到步骤 2 中找到的行的上方：
          
          
           varunitPrice=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){returnvariant.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 buttoncache.$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 availablethis._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。
           将以下代码复制并粘贴到文件中，然后选择保存。
          
          
           {%-unlessavailable-%}{%-ifvariant.title-%}{%-assignavailable=variant.available-%}{%-else-%}{%-assignavailable=true-%}{%-endif-%}{%-endunless-%}{%ifavailableandvariant.unit_price_measurement%}product-price-unit--available{%endif%}" data-unit-price-container> {{'products.product.unit_price_label'|t}}{%-captureunit_price_separator-%}/ {{'general.accessibility.unit_price_separator'|t}} {%-endcapture-%}{%-captureunit_price_base_unit-%}{%-ifavailableandvariant.unit_price_measurement-%}{%-ifvariant.unit_price_measurement.reference_value!=1-%}{{-variant.unit_price_measurement.reference_value-}}{%-endif-%}{{variant.unit_price_measurement.reference_unit}}{%-endif-%}{%-endcapture-%}{{variant.unit_price|money}}{{-unit_price_separator-}}{{-unit_price_base_unit-}} 
          
          编辑后，product-unit-price.liquid文件应如下所示：
          
          
           
          
          
          
           点击保存以确认更改。
          
          编辑特色产品模板
          
           找到并展开Sections文件夹，然后选择featured-product.liquid文件。
           使用查找键盘快捷键在文件中查找行{% include 'price' with price %}：
          
          
            {{section.id}}" class="h1">{%include'price'withprice%} 
          
          
           在步骤 2 的片段的结束下方添加以下代码：
          
          
           {%include'product-unit-price'variant:variant%}
          
          编辑后，featured-product.liquid文件应如下所示：
          
          
           
          
          
          
           点击保存以确认更改。
          
          编辑产品模板
          
           找到并展开Sections文件夹，然后选择product-template.liquid文件。
           使用查找键盘快捷键在文件中查找行{% include 'price' with variant.price %}：
          
          
            {{section.id}}" class="h1">{%include'price'withvariant.price%} 
          
          
           在步骤 2 的结束下方添加以下代码：
          
          
           {%include'product-unit-price',variant:variant%}
          
          编辑后，product-template.liquid文件应如下所示：
          
          
           
          
          
          
           点击保存以确认更改。
          
          编辑产品网格项目片段
          
           找到并展开Snippets文件夹，然后选择product-grid-item.liquid文件。
           使用查找键盘快捷键在文件中查找行{% if on_sale and section.settings.product_show_saved_amount %}：
          
          
           {%ifon_saleandsection.settings.product_show_saved_amount%}{%unlesssection.settings.show_compare_at_price%}medium--right{%endunless%}{%ifsection.settings.product_reviews_enable%}has-reviews{%endif%}">{%assigncompare_price=product.compare_at_price%}{%assignproduct_price=product.price%}{%include'price-sale'%}{%endif%}
          
          
           将该代码替换为以下片段：
          
          
           {%-ifproduct.selected_or_first_available_variant.availableandproduct.selected_or_first_available_variant.unit_price_measurement-%}{%include'product-unit-price',variant:product.selected_or_first_available_variant%}{%-endif-%}

{%ifon_saleandsection.settings.product_show_saved_amount%}{%unlesssection.settings.show_compare_at_price%}medium--right{%endunless%}{%ifsection.settings.product_reviews_enable%}has-reviews{%endif%}">{%assigncompare_price=product.compare_at_price%}{%assignproduct_price=product.price%}{%include'price-sale'%}
{%endif%}
          
          编辑后，product-grid-item.liquid文件应如下所示：
          
          
           
          
          
          
           点击保存以确认更改。
          
          编辑产品列表项片段
          
           找到并展开Snippets文件夹，然后选择product-list-item.liquid文件。
           使用查找键盘快捷键在文件中查找行
：
          
          
            {%ifon_sale%}{{"products.general.sale_price"|t}}{%else%}{{"products.general.regular_price"|t}}{%endif%}{%include'price'withproduct.price%}{%ifon_saleandsection.settings.product_show_compare_at_price%}  {{"products.general.regular_price"|t}}{%include'price'withproduct.compare_at_price%} {%endif%}
{%ifon_saleandsection.settings.product_show_saved_amount%}{%ifsection.settings.product_reviews_enable%}has-reviews{%endif%}">{%assigncompare_price=product.compare_at_price%}{%assignproduct_price=product.price%}{%include'price-sale'%}
          
          
           将该代码替换为以下片段：
          
          
             {%ifon_sale%}{{"products.general.sale_price"|t}}{%else%}{{"products.general.regular_price"|t}}{%endif%}{%include'price'withproduct.price%}{%ifon_saleandsection.settings.product_show_compare_at_price%}  {{"products.general.regular_price"|t}}{%include'price'withproduct.compare_at_price%} {%endif%}
{%-ifproduct.selected_or_first_available_variant.availableandproduct.selected_or_first_available_variant.unit_price_measurement-%}{%include'product-unit-price',variant:product.selected_or_first_available_variant%}{%-endif-%}
{%ifon_saleandsection.settings.product_show_saved_amount%}{%ifsection.settings.product_reviews_enable%}has-reviews{%endif%}">{%assigncompare_price=product.compare_at_price%}{%assignproduct_price=product.price%}{%include'price-sale'%}
          
          编辑后，product-list-item.liquid文件应如下所示：
          
          
           
          
          
          
           点击保存以确认更改。
          
          编辑搜索结果网格片段
          
           找到并展开Snippets文件夹，然后选择search-result-grid.liquid文件。
           使用查找键盘快捷键在文件中查找行{% if on_sale and section.settings.product_show_saved_amount %}：
          
          
           {%ifon_saleandsection.settings.product_show_saved_amount%}{%assigncompare_price=item.compare_at_price%}{%assignproduct_price=item.price%}{%include'price-sale'%}{%endif%}

显示单价

向您的产品添加单价

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

针对 Debut 的步骤

编辑产品价格片段

编辑购物车页面

编辑产品系列页面

编辑产品卡网格

编辑产品卡列表

编辑订单页面

编辑模板风格

编辑 javascript 模板代码

编辑英语翻译

编辑模板布局

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

针对 Brooklyn 的步骤

添加产品价格片段

编辑特色产品页面

编辑产品页面

编辑 ajax 购物车

编辑产品网格项目

编辑购物车页面

编辑订单页面

编辑模板风格 - 第 1 部分

编辑模板风格 - 第 2 部分

编辑 JavaScript 模板代码

编辑英语翻译

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

Minimal 步骤

更新片段

更新样式

更新模板

更新 JavaScript

更新购物车模板

更新特色产品

{{title}}

更新产品模板

{{product.title}}

更新区域设置

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

适用于 Venture 的步骤

编辑模板的语言文件

编辑模板的样式表

添加产品单价片段

编辑您的产品卡片段

编辑购物车页面模板

编辑特色产品页面模板

编辑产品页面模板

编辑客户的订单模板

编辑模板的 JavaScript 文件

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

针对 Supply 的步骤

添加产品单价片段

编辑特色产品模板

编辑产品模板

编辑产品网格项目片段

编辑产品列表项片段

编辑搜索结果网格片段

编辑购物车模板

编辑订单模板

编辑模板布局

编辑模板风格

编辑 JavaScript 模板代码

编辑模板的语言文件

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

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

步骤：

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