顯示單價
如果您以數量或測量單位銷售產品，則您可能必須顯示特定產品的每單位價格。您輸入產品單價後，其將顯示在產品頁面、商品系列頁面、購物車頁面、結帳頁面和訂單確認通知上。
為您的產品新增單價
在 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}} - 在
{%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}} {%-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}} {%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}} {%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%} {%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-}}- 按一下「儲存」來確認變更內容。
編輯產品卡程式碼片段
{%-assigncurrent_variant=product.selected_or_first_available_variant-%}編輯完成後，結果應如下所示：
- 使用「查詢鍵盤快捷鍵」功能，找出這一行
{{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 的
- 在步驟 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%}{%-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"%}編輯完成後，結果應如下所示：
- 使用「查詢鍵盤快捷鍵」，找出包含
在此
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"%}編輯完成後，結果應如下所示：
- 使用「查詢鍵盤快捷鍵」，找出包含
在此
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}}{%-ifline_item.unit_price_measurement-%}{%include'product-unit-price',product_variant:line_item%}{%-endif-%}{{line_item.original_price|money}}{{'products.product.sale_price'|t}} {{line_item.final_price|money}}{%-else-%}{{line_item.original_price|money}}{%-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_saleandsection.settings.product_show_saved_amount%}{%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%}
{%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'%}{{"products.general.regular_price"|t}}{%include'price'withproduct.compare_at_price%}{%endif%}- 用以下程式碼片段取代該程式碼：
{%ifon_saleandsection.settings.product_show_saved_amount%}{%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%}
{%-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-%}{{"products.general.regular_price"|t}}{%include'price'withproduct.compare_at_price%}{%endif%}{%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%}- 用以下程式碼片段取代該程式碼：
{%-ifitem.first_available_variant.availableanditem.first_available_variant.unit_price_measurement-%}{%include'product-unit-price',variant:item.first_available_variant%}{%-endif-%}{%assigncompare_price=item.compare_at_price%}{%assignproduct_price=item.price%}{%include'price-sale'%}{%endif%}編輯完成後，
search-result-grid.liquid檔案應如下所示：
- 按一下「儲存」來確認變更內容。
編輯購物車範本
找出並展開「範本」資料夾，然後選取
cart.liquid檔案。使用「查詢鍵盤快捷鍵」功能，找出檔案中的這一行
{{item.original_line_price|money}}{{'products.general.sale_price'|t}} {{item.final_line_price|money}}{%-else-%}{{item.original_line_price|money}}{%-endif-%}- 用以下程式碼片段取代該程式碼：
{{item.original_line_price|money}}{{'products.general.sale_price'|t}} {{item.final_line_price|money}}{%-else-%}{{item.original_line_price|money}}{%-endif-%}{%-ifitem.variant.availableanditem.variant.unit_price_measurement-%}{%include'product-unit-price'variant:item,available:item.variant.available%}{%-endif-%}編輯完成後，
cart.liquid檔案應如下所示：
- 按一下「儲存」來確認變更內容。
編輯訂單範本
找出並展開「範本」資料夾，然後選取
customers/order.liquid檔案。使用「查詢鍵盤快捷鍵」功能，找出檔案中的這一行
： {{'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 的
- 在步驟 2 的
{%-ifline_item.unit_price_measurement-%}{%include'product-unit-price',variant:line_item,available:true%}{%-endif-%}編輯完成後，
customers/order.liquid檔案應如下所示：
- 按一下「儲存」來確認變更內容。
編輯佈景主題版面配置
找出並展開「版面配置」資料夾，然後選取
theme.liquid檔案。使用「查詢鍵盤快捷鍵」功能，找出檔案中包含
only_left:的這一行：
product:{ unavailable:{{'products.product.unavailable'|t|json}}, will_be_in_stock_after:{{'products.product.will_be_in_stock_after'|t:date:'[date]'|json}}, only_left:{{'products.product.only_left'|t:count:'1'|json}}},- 在步驟 2 的
only_left:{{ 'products.product.only_left' | t: count: '1' | json }}上方新增以下程式碼：
unitPrice:{{'products.product.unit_price_label'|t|json}}, unitPriceSeparator:{{'general.accessibility.unit_price_separator'|t|json}},編輯完成後，
theme.liquid檔案應如下所示：
- 按一下「儲存」來確認變更內容。
編輯佈景主題樣式
找出並展開的「區段」資料夾，然後選取「
theme.scss.liquid」檔案。使用「查詢鍵盤快捷鍵」功能，找出檔案中的這一行
.product-item--price {：
.product-item--price{@includeclearfix;.h1{margin-bottom:$gutter/2;}span{line-height:22px;}small{white-space:nowrap;}}- 用以下程式碼片段取代該程式碼：
.product-item--price{@includeclearfix;margin-bottom:$gutter/2;.h1{margin-bottom:0;}span{line-height:22px;}small{white-space:nowrap;}}.product-price-unit{display:none;font-size:em(12px);margin-right:10px;.cart-pricing&,.order-table&{margin-right:0;}&.product-price-unit--available{display:block;}}編輯完成後，
theme.scss.liquid檔案應如下所示：
- 按一下「儲存」來確認變更內容。
編輯 JavaScript 佈景主題程式碼
找出並展開「資產」資料夾中，然後選取
theme.js.liquid檔案。使用「查詢鍵盤快捷鍵」功能，找出檔案中的這一行
originalSelectorId: 'productSelect-' + sectionId,：
selectors:{originalSelectorId:'productSelect-'+sectionId,$addToCart:$('#addToCart-'+sectionId),$SKU:$('.variant-sku',this.$container),$productPrice:$('#productPrice-'+sectionId),$comparePrice:$('#comparePrice-'+sectionId),$addToCartText:$('#addToCartText-'+sectionId),$quantityElements:$('#quantity-selector-'+sectionId),$variantQuantity:$('#variantQuantity-'+sectionId),$variantQuantityMessage:$('#variantQuantity-'+sectionId+'__message'),$variantIncoming:$('#variantIncoming-'+sectionId),$variantIncomingMessage:$('#variantIncoming-'+sectionId+'__message'),$productImageContainer:$('#productPhotoContainer-'+sectionId),$productImageWrapper:$('[id^="productPhotoWrapper-'+sectionId+'"]'),$productImage:$('[id^="productPhotoImg-'+sectionId+'"]'),$productFullDetails:$('.full-details',this.$container),$thumbImages:$('#productThumbs-'+sectionId).find('a.product-photo-thumb'),$shopifyPaymentButton:'.shopify-payment-button'}- 在步驟 2 的
originalSelectorId: 'productSelect-' + sectionId,上方新增以下程式碼：
unitPriceContainer:'[data-unit-price-container]',unitPrice:'[data-unit-price]',unitPriceBaseUnit:'[data-unit-price-base-unit]',編輯完成後，結果應如下所示：
- 使用「查詢鍵盤快捷鍵」功能，找出檔案中的這一行
productVariantCallback: function(variant) {：
productVariantCallback:function(variant){varself=this;if(variant){// Update variant image, if one is setif(variant.featured_image){varnewImg=variant.featured_image;var$newImage=this.settings.selectors.$productImageWrapper.filter('[data-image-id="'+newImg.id+'"]');var$otherImages=this.settings.selectors.$productImageWrapper.not('[data-image-id="'+newImg.id+'"]');$newImage.removeClass('hide');$otherImages.addClass('hide');}- 在步驟 2 的
if (variant) {下方新增以下程式碼：
// Update unit price, if one is setvar$unitPriceContainer=$(this.settings.selectors.unitPriceContainer,this.$container);$unitPriceContainer.removeClass('product-price-unit--available');if(variant.unit_price_measurement){var$unitPrice=$(this.settings.selectors.unitPrice,this.$container);var$unitPriceBaseUnit=$(this.settings.selectors.unitPriceBaseUnit,this.$container);$unitPrice.text(Shopify.formatMoney(variant.unit_price,moneyFormat));$unitPriceBaseUnit.text(this.getBaseUnit(variant));$unitPriceContainer.addClass('product-price-unit--available');}編輯完成後，結果應如下所示：
- 使用「查詢鍵盤快捷鍵」功能，找出檔案中的這一行
customPriceFormat += ' ';：
customPriceFormat=''+customPrice+'';customPriceFormat+=''+comparePrice+'';customPriceFormat+='products.general.regular_price'+a11yComparePrice+'';customPriceFormat+='products.general.sale_price'+a11yPrice+'';- 用以下程式碼片段取代這一行
customPriceFormat += ' ';：
customPriceFormat+=''+comparePrice+'';編輯完成後，結果應如下所示：
- 使用「查詢鍵盤快捷鍵」功能，找出檔案中的這一行
$(this.settings.selectors.$shopifyPaymentButton, this.$container).hide();：
}else{// The variant doesn't exist, disable submit button.// This may be an error or notice that a specific variant is not available.this.settings.selectors.$addToCart.addClass('disabled').prop('disabled',true);this.settings.selectors.$addToCartText.html(theme.strings.product.unavailable);this.settings.selectors.$variantQuantity.removeClass('is-visible');this.settings.selectors.$quantityElements.hide();$(this.settings.selectors.$shopifyPaymentButton,this.$container).hide();}- 在步驟 11 的程式碼片段下方新增以下程式碼：
},getBaseUnit:function(variant){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"的這一行：
"accessibility":{"refresh_page":"choosing a selection results in a full page refresh"},- 在步驟 2 的
"refresh_page"上方新增以下程式碼：
"unit_price_separator":"per",編輯完成後，結果應如下所示：
- 使用「查詢鍵盤快捷鍵」功能，找出檔案中包含
"will_be_in_stock_after"的這一行：
"product":{"sold_out":"Sold Out","will_not_ship_until":"Will not ship until ","quantity":"Quantity","add_to_cart":"Add to Cart","unavailable":"Unavailable","will_be_in_stock_after":"Will be in stock after ","only_left":{"one":"Only left!","other":"Only left!"},“full_details”:"Full details"}- 在步驟 5 的
"will_be_in_stock_after"下方新增以下程式碼：
"unit_price_label":"Unit price",編輯完成後，結果應如下所示：
- 按一下「儲存」來確認變更內容。
(選用) 為其他語言新增翻譯
在 Shopify 管理介面中，前往「佈景主題」頁面。
選取「動作」>「編輯語言」。
點擊「變更佈景主題語言」，然後選取您要編輯的語言。此操作僅能在您已發佈的佈景主題上進行。
在搜尋列中輸入
Unit Price。在「一般 / 無障礙功能」下方更新單價分隔符號。
在「產品 (複數) / 產品」下方更新單價標籤。
按一下「儲存」。
在您的訂單通知中顯示單價
如果您已為產品新增單價，但仍未顯示於訂單確認通知中，則您可能必須更訂單通知範本。
步驟：
在 Shopify 管理介面，前往「設定」>「通知」。
按一下「訂單確認」。
為範本新增以下程式碼片段：
{%-ifline_item.unit_price_measurement-%}{{line_item.unit_price|money}}{%-ifline_item.unit_price_measurement.reference_value!=1-%}{{-line_item.unit_price_measurement.reference_value-}}{%-endif-%}{{line_item.unit_price_measurement.reference_unit}}{%-endif-%}- 按一下「儲存」。
準備好開始透過 Shopify 銷售商品了嗎？
免費試用
- 在步驟 2 的
