顯示單價

此頁面列印時間為 Apr 10, 2023。如須最新版本，請至 https://help.shopify.com/zh-TW/manual/intro-to-shopify/initial-setup/sell-in-france/price-per-unit。

如果您以數量或測量單位銷售產品，則您可能必須顯示特定產品的每單位價格。您輸入產品單價後，其將顯示在產品頁面、商品系列頁面、購物車頁面、結帳頁面和訂單確認通知上。

為您的產品新增單價

在 Shopify 管理介面中，前往「產品」。
按一下您要變更的產品名稱。
按一下您想要更新的子類選項。
在「定價」下方，選擇「顯示此產品的單價」。
在「產品總測量尺寸」欄位中，輸入您產品的單位數量。
使用「選擇單位」下拉式選單，選擇子類選項的測量單位。根據您銷售的產品類型，顯示的單位類型也會有所不同。例如，如果產品是 2 公升的液態肥皂，則請選擇「公升」。
在「單價」欄位中，輸入產品的每單位價格。
選用：輸入基本單位的數字。例如，您可以為 1 公斤重的產品，選擇 100 公克為基本單位。
按一下「儲存」。

在Shopify 應用程式中，前往「產品>所有產品」。
在「所有產品」畫面中，點一下產品。
點一下您想要更新的子類。
在「定價」下方，選擇「顯示此產品的單價」。
在「產品總測量尺寸」欄位中，輸入您產品的單位數量。
使用「選擇單位」下拉式選單，選擇子類選項的測量單位。根據您銷售的產品類型，顯示的單位類型也會有所不同。例如，如果產品是 2 公升的液態肥皂，則請選擇「公升」。
在「單價」欄位中，輸入產品的每單位價格。
選用：選擇基本單位。例如，您可以為 1 公斤重的產品，選擇 100 公克為基本單位。
點一下「儲存」。

在Shopify 應用程式中，前往「產品>所有產品」。
在「所有產品」畫面中，點一下產品。
點一下您想要更新的子類。
在「定價」下方，選擇「顯示此產品的單價」。
在「產品總測量尺寸」欄位中，輸入您產品的單位數量。
使用「選擇單位」下拉式選單，選擇子類選項的測量單位。根據您銷售的產品類型，顯示的單位類型也會有所不同。例如，如果產品是 2 公升的液態肥皂，則請選擇「公升」。
在「單價」欄位中，輸入產品的每單位價格。
選用：選擇基本單位。例如，您可以為 1 公斤重的產品，選擇 100 公克為基本單位。
點一下「儲存」。

在您的線上商店上顯示單價

此自訂程序的步驟因佈景主題而異。按一下佈景主題的按鈕，然後依照以下指示操作：

Debut 的步驟

Debut 佈景主題 12.1.0 和以上的版本可以使用單價功能。如果您無法將佈景主題更新為最新版本，則可以新增單價自訂內容至舊版的 Debut。

編輯產品價格程式碼片段

在「程式碼片段」目錄中，按一下「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%}

按一下「儲存」來確認變更內容。

編輯購物車頁面

在「區段」目錄中，按一下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-%} {{'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檔案應如下所示：

按一下「儲存」來確認變更內容。

編輯商品系列頁面

在「區段」目錄中，按一下collection.liquid檔案。
使用「查詢鍵盤快捷鍵」功能，搜尋「grid-view-item__title」並找出以下程式碼：

{%include'product-price'%}

用以下程式碼片段取代該程式碼：

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

編輯完成後，collection.liquid檔案應如下所示：

按一下「儲存」來確認變更內容。

編輯產品卡方格項目

在「程式碼片段」目錄中，按一下「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檔案應如下所示：

按一下「儲存」來確認變更內容。

編輯產品卡清單

在「程式碼片段」目錄中，按一下「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檔案應如下所示：

按一下「儲存」來確認變更內容。

編輯訂單頁面

在「範本」目錄中，按一下「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-%} {{'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檔案應如下所示：

按一下「儲存」來確認變更內容。

編輯佈景主題樣式

在「資產」目錄中，按一下「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:1 px;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 佈景主題程式碼

在「資產」目錄中，按一下「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.货币.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.货币.formatMoney(variant.price,theme.moneyFormat));}

在步驟 18 的程式碼下方新增以下程式碼片段：

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

編輯完成後，結果應如下所示：

按一下「儲存」來確認變更內容。

編輯英文翻譯

在「語言代碼」目錄中，按一下「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",

編輯完成後，結果應如下所示：

按一下「儲存」來確認變更內容。

編輯佈景主題版面配置

在版面配置目錄中，按一下「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 的步驟

Brooklyn 佈景主題 13.1.0 和以上的版本可以使用單價功能。如果您無法將佈景主題更新為最新版本，則可以新增單價自訂內容至舊版的 Brooklyn。

新增產品價格程式碼片段

在「程式碼片段」目錄中，按一下「新增程式碼片段」。
在名稱欄位中輸入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-%}< span id = " ProductPrice”班ss="product-single__price{%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-}}

按一下「儲存」來確認變更內容。

編輯精選產品頁面

在「區段」目錄中，按一下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%}< span id = " ProductPrice”班ss="product-single__price{%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檔案應如下所示：

按一下「儲存」來確認變更內容。

編輯產品頁面

在「區段」目錄中，按一下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%}< span id = " ProductPrice”班ss="product-single__price{%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 購物車

在「程式碼片段」目錄中，按一下「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檔案應如下所示：

按一下「儲存」來確認變更內容。

編輯產品方格項目

在「程式碼片段」目錄中，按一下「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-%}

編輯完成後，結果應如下所示：

按一下「儲存」來確認變更內容。

編輯購物車頁面

在「範本」目錄中，按一下「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-%}

在步驟 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檔案應如下所示：

按一下「儲存」來確認變更內容。

編輯訂單頁面

在「範本」目錄中，按一下「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 部分

在「資產」目錄中，按一下「theme.scss.liquid」檔案。
使用「查詢鍵盤快捷鍵」功能，搜尋「.ajaxcart__price {」並找出以下程式碼：

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

在步驟 2 的程式碼下方新增以下程式碼片段：

.cart__unit-price{display:block;}

編輯完成後，theme.scss.liquid檔案應如下所示：

按一下「儲存」來確認變更內容。

編輯佈景主題樣式 - 第 2 部分

在「資產」目錄中，按一下「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 佈景主題程式碼

在「資產」目錄中，按一下「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.货币.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.货币.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;},

編輯完成後，結果應如下所示：

按一下「儲存」來確認變更內容。

編輯英文翻譯

在「語言代碼」目錄中，按一下「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 的步驟

Minimal 佈景主題 11.1.0 和以上的版本可以使用單價功能。如果您無法將佈景主題更新為最新版本，則可以新增單價自訂內容至舊版的 Minimal。

更新程式碼片段

找出並展開「程式碼片段」資料夾。
選取「新增程式碼片段」。
輸入名稱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檔案應如下所示：

按一下「儲存」來確認變更內容。

更新樣式

找出並展開「資產」資料夾。
編輯檔案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檔案應如下所示：

按一下「儲存」來確認變更內容。

更新範本

找出並展開「範本」資料夾。
找出並編輯檔案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;

結果應如下所示：

按一下「儲存」來確認變更內容。

更新購物車範本

找出並展開的「區段」資料夾。
編輯檔案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檔案應如下所示：

按一下「儲存」來確認變更內容。

更新精選產品

找出並展開的「區段」資料夾。
編輯檔案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檔案應如下所示：

按一下「儲存」來確認變更內容。

更新產品範本

找出並展開的「區段」資料夾。
編輯檔案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檔案應如下所示：

按一下「儲存」來確認變更內容。

更新語言代碼

找出並展開「語言代碼」資料夾。
開啟並編輯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 的步驟

單價功能已新增至 Venture 佈景主題 9.4.0 和以上的版本。如果您無法將佈景主題更新為最新版本，請依照這些步驟將單價自訂內容套用至舊版的 Venture。

編輯佈景主題語言檔案

在「語言代碼」目錄中，按一下「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",

編輯完成後，結果應如下所示：

按一下「儲存」來確認變更內容。

編輯佈景主題樣式表

在「資產」目錄中，按一下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檔案應如下所示：

按一下「儲存」來確認變更內容。

新增產品單價程式碼片段

在「程式碼片段」目錄中，按一下「新增程式碼片段」。
輸入名稱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-}}

按一下「儲存」來確認變更內容。

編輯產品卡程式碼片段

在「程式碼片段」目錄中，按一下「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-%}
          
          編輯完成後，結果應如下所示：
          
          
           
          
          
          
           按一下「儲存」來確認變更內容。
          
          編輯購物車頁面範本
          
           在「區段」目錄中，按一下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%}< / span > < del类=“cart__item-total”> {{{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}}
          
          編輯完成後，結果應如下所示：
          
          
           
          
          
          
           按一下「儲存」來確認變更內容。
          
          編輯精選產品頁面範本
          
           在「區段」目錄中，按一下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-%}
          
          編輯完成後，結果應如下所示：
          
          
           
          
          
          
           按一下「儲存」來確認變更內容。
          
          編輯產品頁面範本
          
           在「區段」目錄中，按一下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-%}
          
          編輯完成後，結果應如下所示：
          
          
           
          
          
          
           按一下「儲存」來確認變更內容。
          
          編輯客戶的訂單範本
          
           在「範本」目錄中，按一下「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檔案應如下所示：
          
          
           
          
          
          
           按一下「儲存」來確認變更內容。
          
          編輯您佈景主題的 JavaScipt 檔案
          
           在「資產」目錄中，按一下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.货币.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.货币.formatMoney(variant.unit_price,theme.moneyFormat));$unitPriceBaseUnit.html(this._getBaseUnit(variant));$(this.selectors.unitPriceContainer,this.$container).removeClass('hide');}
          
          編輯完成後，結果應如下所示：
          
          
           
          
          
          
           按一下「儲存」來確認變更內容。
          
          (選用) 為其他語言新增翻譯
          
           在 Shopify 管理介面中，前往「佈景主題」頁面。
           按一下「動作」>「編輯語言」
           點擊「變更佈景主題語言」，然後選取您要編輯的語言。此操作僅能在您已發佈的佈景主題上進行。
           在搜尋欄輸入Unit Price。
           在「一般 / 無障礙功能」下方更新單價分隔符號。
           在「產品 (複數) / 產品」下方更新單價標籤。
           按一下「儲存」。


         
          Supply 的步驟
          單價功能已新增至 Supply 佈景主題 8.3.0 和以上的版本。如果您無法將佈景主題更新為最新版本，請依照這些步驟將單價自訂內容套用至舊版的 Supply。
          新增產品單價程式碼片段
          
           找出並展開程式碼片段資料夾。
           選取「新增程式碼片段」。
           輸入名稱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檔案應如下所示：
          
          
           
          
          
          
           按一下「儲存」來確認變更內容。
          
          編輯精選產品範本
          
           找出並展開的「區段」資料夾，然後選取「featured-product.liquid」檔案。
           使用「查詢鍵盤快捷鍵」功能，找出檔案中的這一行{% include 'price' with price %}。
          
          
            {{section.id}}" class="h1">{%include'price'withprice%} 
          
          
           在步驟 2 的程式碼片段結尾下方新增以下程式碼：
          
          
           {%include'product-unit-price'variant:variant%}
          
          編輯完成後，featured-product.liquid檔案應如下所示：
          
          
           
          
          
          
           按一下「儲存」來確認變更內容。
          
          編輯產品範本
          
           找出並展開的「區段」資料夾，然後選取「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檔案應如下所示：
          
          
           
          
          
          
           按一下「儲存」來確認變更內容。
          
          編輯產品格狀項目程式碼片段
          
           找出並展開「程式碼片段」資料夾，然後選取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檔案應如下所示：
          
          
           
          
          
          
           按一下「儲存」來確認變更內容。
          
          編輯產品清單項目程式碼片段
          
           找出並展開「程式碼片段」資料夾，然後選取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檔案應如下所示：
          
          
           
          
          
          
           按一下「儲存」來確認變更內容。
          
          編輯搜尋結果方格程式碼片段
          
           找出並展開「程式碼片段」資料夾，然後選取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 的步驟

編輯佈景主題語言檔案

編輯佈景主題樣式表

新增產品單價程式碼片段

編輯產品卡程式碼片段

編輯購物車頁面範本

編輯精選產品頁面範本

編輯產品頁面範本

編輯客戶的訂單範本

編輯您佈景主題的 JavaScipt 檔案

(選用) 為其他語言新增翻譯

Supply 的步驟

新增產品單價程式碼片段

編輯精選產品範本

編輯產品範本

編輯產品格狀項目程式碼片段

編輯產品清單項目程式碼片段

編輯搜尋結果方格程式碼片段

編輯購物車範本

編輯訂單範本

編輯佈景主題版面配置

編輯佈景主題樣式

編輯 JavaScript 佈景主題程式碼

編輯佈景主題語言檔案

(選用) 為其他語言新增翻譯

在您的訂單通知中顯示單價

步驟：

準備好開始透過 Shopify 銷售商品了嗎？