顯示單價·Shopify說明中心

顯示單價< / h1 >

此頁面列印時間為2022年12月13日。如須最新版本，請至https://help.shopify.com/zh-TW/manual/intro-to-shopify/initial-setup/sell-in-germany/price-per-unit。< / div >

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

為您的產品新增單價

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

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

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

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

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

首次亮相的步驟

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

編輯產品價格程式碼片段

在「程式碼片段」目錄中，按一下「product-price.liquid」檔案。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，搜尋「data-price」並找出以下程式碼：李< / >

< dl类= "价格{%< / span >如果< / span >可用< / span >而且< / span >compare_at_price< / span >>< / span >价格< / span >%}< / span >价格,降价销售的{%< / span >endif< / span >%}< / span >“data-price >

用以下程式碼片段取代該程式碼：李< / >

< dl类= "价格{%< / span >如果< / span >可用< / span >而且< / span >compare_at_price< / span >>< / span >价格< / span >%}< / span >价格,降价销售的{%< / span >endif< / span >%} {%< / span >如果< / span >可用< / span >而且< / span >变体< / span >．< / span >unit_price_measurement< / span >%}< / span >价格,得到更多{%< / span >endif< / span >%}< / span >“data-price >

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

使用「查詢鍵盤快捷鍵」功能，搜尋「price__sale」並找出以下程式碼：李< / >

  {{< / span >“products.product.sale_price”< / span >|< / span >t< / span >}}< / span > 
 {{< / span >money_price< / span >}}< / span > {{< / span >“products.product.on_sale”< / span >|< / span >t< / span >}}< / span >

在< / div >結束標籤下方新增以下程式碼：李< / >

{%< / span >如果< / span >变体< / span >．< / span >unit_price_measurement< / span >%}< / span >  {{< / span >“products.product.unit_price_label”< / span >|< / span >t< / span >}}< / span > 
 {% -< / span >捕获< / span >unit_price_separator< / span >- - - - - - %}< / span >< span aria-hidden = " true " >/< / span >{{< / span >“general.accessibility.unit_price_separator”< / span >|< / span >t< / span >}}< / span >跨度,< / >{% -< / span >endcapture< / span >- - - - - - %}< / span >{% -< / span >捕获< / span >unit_price_base_unit< / span >- - - - - - %}< / span >< span data-unit-price-base-unit >{% -< / span >如果< / span >可用< / span >而且< / span >变体< / span >．< / span >unit_price_measurement< / span >- - - - - - %}< / span >{% -< / span >如果< / span >变体< / span >．< / span >unit_price_measurement< / span >．< / span >reference_value< / span >! =< / span >1< / span >- - - - - - %}< / span >{{-< / span >变体< / span >．< / span >unit_price_measurement< / span >．< / span >reference_value< / span >-}}< / span >{% -< / span >endif< / span >- - - - - - %}< / span >{{< / span >变体< / span >．< / span >unit_price_measurement< / span >．< / span >reference_unit< / span >}}< / span >{% -< / span >endif< / span >- - - - - - %}< / span >< / span >{% -< / span >endcapture< / span >- - - - - - %}< / span >< span data-unit-price >{{< / span >变体< / span >．< / span >unit_price< / span >|< / span >钱< / span >}}< / span >< / span >{{-< / span >unit_price_separator< / span >-}} {{-< / span >unit_price_base_unit< / span >-}}< / span >< / dd > < / div >{%< / span >endif< / span >%}< / span >

按一下「儲存」來確認變更內容。李< / >

編輯購物車頁面

在「區段」目錄中，按一下cart-template.liquid檔案。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，搜尋「cart__price-wrapper」並找出以下程式碼：李< / >

{% -< / span >如果< / span >项< / span >．< / span >original_price< / span >! =< / span >项< / span >．< / span >final_price< / span >- - - - - - %}< / span >< dl > {{< / span >“products.product.regular_price”< / span >|< / span >t< / span >}}< / span > 
  {{< / span >项< / span >．< / span >original_price< / span >|< / span >钱< / span >}}< / span >< / s >< / dd >
 {{< / span >“products.product.sale_price”< / span >|< / span >t< / span >}}< / span > 
  {{< / span >项< / span >．< / span >final_price< / span >|< / span >钱< / span >}}< / span > 
 {% -< / span >其他的< / span >- - - - - - %}< / span >{{< / span >项< / span >．< / span >original_price< / span >|< / span >钱< / span >}}< / span >{% -< / span >endif< / span >- - - - - - %}< / span >

用以下程式碼片段取代該程式碼：李< / >

< dl >{% -如果项．original_price! =项．final_price- - - - - - %} {{“products.product.regular_price”|t}} {{项．original_price|钱}}< / s >< / dd > {{“products.product.sale_price”|t}} {{项．final_price|钱}} < / dd >{% -其他的- - - - - - %} {{“products.product.regular_price”|t}} {{项．original_price|钱}}< / dd >{% -endif- - - - - - %}{% -如果项．unit_price_measurement- - - - - - %} {{“products.product.unit_price_label”|t}} < / dt > < dd > <跨类=“price-unit-price”>{% -捕获unit_price_separator- - - - - - %}/{{“general.accessibility.unit_price_separator”|t}}跨度,< / >{% -endcapture- - - - - - %}{% -捕获unit_price_base_unit- - - - - - %}{% -如果项．unit_price_measurement．reference_value! =1- - - - - - %}{{-项．unit_price_measurement．reference_value-}}{% -endif- - - - - - %}{{项．unit_price_measurement．reference_unit}}{% -endcapture- - - - - - %}{{项．unit_price|钱}}{{-unit_price_separator-}} {{-unit_price_base_unit-}} < / dd >{% -endif- - - - - - %}< / dl >

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

按一下「儲存」來確認變更內容。李< / >

編輯商品系列頁面

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

{%包括“产品价格”%}

用以下程式碼片段取代該程式碼：李< / >

{%包括“产品价格”，变体：零%}

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

按一下「儲存」來確認變更內容。李< / >

編輯產品卡方格項目

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

{%包括“产品价格”，变体：产品%}

用以下程式碼片段取代該程式碼：李< / >

{%包括“产品价格”，变体：product.selected_or_first_available_variant%}

編輯完成後，product-card-grid.liquid檔案應如下所示：

按一下「儲存」來確認變更內容。李< / >

編輯產品卡清單

在「程式碼片段」目錄中，按一下「product-card-list.liquid」檔案。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，搜尋「{% if产品。可用%}」並找出以下程式碼：李< / >

{%包括“产品价格”，变体：产品%}

用以下程式碼片段取代該程式碼：李< / >

{%包括“产品价格”，变体：product.selected_or_first_available_variant%}

編輯完成後，product-card-list.liquid檔案應如下所示：

按一下「儲存」來確認變更內容。李< / >

編輯訂單頁面

在「範本」目錄中，按一下「客户/ order.liquid」檔案。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，搜尋「参数= " {{customer.order。价格' | t}}"」並找出以下程式碼：李< / >

{% -如果line_item．original_price! =line_item．final_price- - - - - - %}< dl > {{“products.product.regular_price”|t}} {{line_item．original_price|钱}}< / s >< / dd > {{“products.product.sale_price”|t}} {{line_item．final_price|钱}} {% -其他的- - - - - - %}{{line_item．original_price|钱}}{% -endif- - - - - - %}

用以下程式碼片段取代該程式碼：李< / >

< dl >{% -如果line_item．original_price! =line_item．final_price- - - - - - %} {{“products.product.regular_price”|t}} {{line_item．original_price|钱}}< / s >< / dd > {{“products.product.sale_price”|t}} {{line_item．final_price|钱}} < / dd >{% -其他的- - - - - - %} {{“products.product.regular_price”|t}} {{line_item．original_price|钱}}< / dd >{% -endif- - - - - - %}{% -如果line_item．unit_price_measurement- - - - - - %} {{“products.product.unit_price_label”|t}} < / dt > < dd > <跨类=“price-unit-price”>{% -捕获unit_price_separator- - - - - - %}/{{“general.accessibility.unit_price_separator”|t}}跨度,< / >{% -endcapture- - - - - - %}{% -捕获unit_price_base_unit- - - - - - %}{% -如果line_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|钱}}{{-unit_price_separator-}} {{-unit_price_base_unit-}} < / dd >{% -endif- - - - - - %}< / dl >

編輯完成後，客户/ order.liquid檔案應如下所示：

按一下「儲存」來確認變更內容。李< / >

編輯佈景主題樣式

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

.price__vendor｛颜色：＄color-body-text；字体大小：0.9 em；粗细：＄font-weight-body；首字母：大写字母；字母间距：1 px；保证金：5 px010 px；宽度：100％；@includeflex-basis (100%);｝

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

.price__unit｛@includeflex-basis (100%);显示：没有一个；.price——得到更多＆｛显示：块；｝｝.price-unit-price｛颜色：＄color-body-text；字体大小：0.8 em；｝

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

按一下「儲存」來確認變更內容。李< / >

編輯JavaScript佈景主題程式碼

在「資產」目錄中，按一下「theme.js」檔案。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，找出以下程式碼：李< / >

salePrice：＇(data-sale-price)＇

在步驟 2 的程式碼上新增以下程式碼片段：李< / >

unitPrice：＇(data-unit-price)＇，unitPriceBaseUnit：＇(data-unit-price-base-unit)＇，

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

使用「查詢鍵盤快捷鍵」功能，找出以下程式碼：李< / >

productOnSale：＇价格,降价销售的＇，

在步驟 4 的程式碼後方新增以下程式碼片段：李< / >

productUnitAvailable：＇价格,得到更多＇，

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

使用「查詢鍵盤快捷鍵」功能，找出以下程式碼：李< / >

varliveRegionText＝＇[可用性][普通][$$][销售][$]＇；

用以下程式碼片段取代該程式碼：李< / >

varliveRegionText＝＇[可用性][普通][$$][销售][$]。[UnitPrice] [$ $ $)＇；

使用「查詢鍵盤快捷鍵」功能，找出以下程式碼：李< / >

varsalePrice＝”；

在步驟 8 的程式碼下方新增以下程式碼片段：李< / >

varunitLabel＝”；varunitPrice＝”；如果（变体．unit_price_measurement）｛unitLabel＝主题．字符串．unitPrice；unitPrice＝主题．货币．formatMoney（变体．unit_price，主题．moneyFormat）+＇＇+主题．字符串．unitPriceSeparator+＇＇+这．_getBaseUnit（变体）;｝

使用「查詢鍵盤快捷鍵」功能，找出以下程式碼：李< / >

．取代（＇(美元)＇，salePrice）

在步驟 10 的程式碼下方新增以下程式碼片段：李< / >

．取代（＇(UnitPrice)＇，unitLabel）．取代（＇($ $ $)＇，unitPrice）

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

使用「查詢鍵盤快捷鍵」功能，找出以下程式碼：李< / >

_updatePrice：函数（evt）｛

在步驟 12 的程式碼前方新增以下程式碼片段：李< / >

_getBaseUnit：函数（变体）｛返回变体．unit_price_measurement．reference_value= = =1?变体．unit_price_measurement．reference_unit：变体．unit_price_measurement．reference_value+变体．unit_price_measurement．reference_unit；}，

使用「查詢鍵盤快捷鍵」功能，找出以下程式碼：李< / >

varsalePrice美元＝＄（这．选择器．salePrice，priceContainer美元）;

在步驟 14 的程式碼下方新增以下程式碼片段：李< / >

varunitPrice美元＝＄（这．选择器．unitPrice，priceContainer美元）;varunitPriceBaseUnit美元＝＄（这．选择器．unitPriceBaseUnit，priceContainer美元）;

使用「查詢鍵盤快捷鍵」功能，找出以下程式碼：李< / >

．removeClass（这．类．productOnSale）

在步驟 16 的程式碼下方新增以下程式碼片段：李< / >

．removeClass（这．类．productUnitAvailable）

使用「查詢鍵盤快捷鍵」功能，找出以下程式碼：李< / >

其他的｛//正常价格regularPrice美元．超文本标记语言（主题．货币．formatMoney（变体．价格，主题．moneyFormat））;｝

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

//单价如果（变体．unit_price_measurement）｛unitPrice美元．超文本标记语言（主题．货币．formatMoney（变体．unit_price，主题．moneyFormat））;unitPriceBaseUnit美元．超文本标记语言（这．_getBaseUnit（变体));priceContainer美元．addClass（这．类．productUnitAvailable）;｝

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

按一下「儲存」來確認變更內容。李< / >

編輯英文翻譯

在「語言代碼」目錄中，按一下「en.default.json」檔案。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，找出以下程式碼：李< / >

“selection_help”："按空格键再按方向键进行选择"

在步驟 2 的程式碼上新增以下程式碼片段：李< / >

“unit_price_separator”：“每”，

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

使用「查詢鍵盤快捷鍵」功能，找出以下程式碼：李< / >

“include_taxes”：“含税”。，

在步驟 4 的程式碼下方新增以下程式碼片段：李< / >

“unit_price_label”：“单价”，

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

按一下「儲存」來確認變更內容。李< / >

編輯佈景主題版面配置

在版面配置目錄中，按一下「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管理介面中，前往”佈景主題」頁面。李< / ><李>
按一下「動作」>「編輯語言」

點擊「變更佈景主題語言」，然後選取您要編輯的語言。此操作僅能在您已發佈的佈景主題上進行。李< / ><李>
在搜尋欄輸入单价。李< / ><李>
在「一般 / 無障礙功能」下方更新單價分隔符號。李< / ><李>
在「產品 (複數) / 產品」下方更新單價標籤。李< / ><李>
按一下「儲存」。李< / >

布鲁克林的步驟

布鲁克林佈景主題13.1.0和以上的版本可以使用單價功能。如果您無法將佈景主題更新為最新版本，則可以新增單價自訂內容至舊版的布鲁克林。
新增產品價格程式碼片段

在「程式碼片段」目錄中，按一下「新增程式碼片段」。李< / ><李>
在名稱欄位中輸入产品价格。李< / ><李>
複製貼上以下程式碼至檔案中。李< / >

< div class = " price-container{%如果变体．unit_price_measurement%}价格-container——得到更多{%endif%}“data-price-container >{% -如果变体．compare_at_price>变体．价格- - - - - - %}{{“products.general.regular_price”|t}} .{{变体．compare_at_price|钱}}{{“products.general.sale_price”|t}}{% -其他的- - - - - - %}{{“products.general.regular_price”|t}} {{“products.general.sale_price”|t}}{% -endif- - - - - - %}{%如果变体．compare_at_price>变体．价格%}代销的{%endif%}＂Itemprop ="price" content="{{变体．价格|divided_by：100.00}}＂>{{变体．价格|钱}}>．捕获unit_price_separator- - - - - - %}/ {{“general.accessibility.unit_price_separator”|t}}跨度,< / >{% -endcapture- - - - - - %}{% -捕获unit_price_base_unit- - - - - - %}{% -如果变体．unit_price_measurement- - - - - - %}{% -如果变体．unit_price_measurement．reference_value! =1- - - - - - %}{{-变体．unit_price_measurement．reference_value-}}{% -endif- - - - - - %}{{变体．unit_price_measurement．reference_unit}}{% -endif- - - - - - %}{% -endcapture- - - - - - %}{{“products.general.unit_price”|t}}．{{变体．unit_price|钱}}{{-unit_price_separator-}} {{-unit_price_base_unit-}}

按一下「儲存」來確認變更內容。李< / >

編輯精選產品頁面

在「區段」目錄中，按一下featured-product.liquid檔案。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，搜尋「itemprop = "提供"」並找出以下程式碼：李< / >

< div data-price-container >{%评论%}可选地显示“比较”或产品的原价。{%endcomment%}{%如果compare_at_price>价格%}{%除非current_variant．可用%}aria-hidden＝＂真正的＂{%endunless%}>{{“products.general.regular_price”|t}} .{{compare_at_price|钱}}{{“products.general.sale_price”|t}}{%其他的%}{%除非current_variant．可用%}aria-hidden＝＂真正的＂{%endunless%}>{{“products.general.regular_price”|t}} {{“products.general.sale_price”|t}}{%endif%}{%如果compare_at_price>价格%}代销的{%endif%}＂Itemprop ="price" content="{{价格|divided_by：100.00}}＂{%除非current_variant．可用%}aria-hidden＝＂真正的＂{%endunless%}>{{价格|钱}} < / div >

用以下程式碼片段取代該程式碼：李< / >

{%包括“产品价格”，变体：current_variant%}

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

按一下「儲存」來確認變更內容。李< / >

編輯產品頁面

在「區段」目錄中，按一下product-template.liquid檔案。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，搜尋「itemprop = "提供"」並找出以下程式碼：李< / >

< div data-price-container >{%评论%}可选地显示“比较”或产品的原价。{%endcomment%}{%如果current_variant．compare_at_price>current_variant．价格%}{%除非current_variant．可用%}aria-hidden＝＂真正的＂{%endunless%}>{{“products.general.regular_price”|t}} .{{current_variant．compare_at_price|钱}}{{“products.general.sale_price”|t}}{%其他的%}{%除非current_variant．可用%}aria-hidden＝＂真正的＂{%endunless%}>{{“products.general.regular_price”|t}} {{“products.general.sale_price”|t}}{%endif%}{%如果current_variant．compare_at_price>current_variant．价格%}代销的{%endif%}＂Itemprop ="price" content="{{current_variant．价格|divided_by：100.00}}＂{%除非current_variant．可用%}aria-hidden＝＂真正的＂{%endunless%}>{{current_variant．价格|钱}} < / div >

用以下程式碼片段取代該程式碼：李< / >

{%包括“产品价格”，变体：current_variant%}

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

按一下「儲存」來確認變更內容。李< / >

編輯ajax購物車

在「程式碼片段」目錄中，按一下「ajax-cart-template.liquid」檔案。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，搜尋「{{{价格}}}」並找出以下程式碼：李< / >

{{＃如果discountsApplied}}{%endraw%} {{“products.general.regular_price”|t}} {%生%}{{{price}}} {%endraw%} {{“products.general.sale_price”|t}} {%生%} {{{discountedPrice}}} {{其他}}<跨类=“ajaxcart__price”>{{{价格}}}{{/如果}}

在步驟 2 的{{/如果}}下方新增以下程式碼：李< / >

{{＃如果unitPrice}}{%endraw%} {{“products.general.unit_price”|t}} {%生%}{%endraw%}{% -捕获unit_price_separator- - - - - - %}/ {{“general.accessibility.unit_price_separator”|t}}跨度,< / >{% -endcapture- - - - - - %}{%生%} {{{unitPrice。价格}}} {{%endraw%} {{-unit_price_separator-}} {%生%}{{＃如果unitPrice。addRefererenceValue}}{{unitPrice。reference_value}}｝{{/如果}}{{｛unitPrice．Reference_unit}}} {{/if}}

編輯完成後，ajax-cart-template.liquid檔案應如下所示：

按一下「儲存」來確認變更內容。李< / >

編輯產品方格項目

在「程式碼片段」目錄中，按一下「product-grid-template.liquid」檔案。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，搜尋「捕捉img_id_class」並找出以下程式碼：李< / >

{%捕获img_id_class%}ProductImage -{{产品．featured_image．id}} {%endcapture%}{%捕获img_wrapper_id%}ProductImageWrapper -{{产品．featured_image．id}} {%endcapture%}{% -分配img_url＝产品．featured_image|img_url：“1 x1”|取代：“_1x1”。，“_}{宽度x”。- - - - - - %}

在步驟 2 中的程式碼前方新增以下程式碼片段：李< / >

{% -分配变体＝产品．selected_or_first_available_variant- - - - - - %}

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

使用「查詢鍵盤快捷鍵」功能，搜尋「{{产品。价格|money_without_trailing_zeros}}」並找出以下程式碼：李< / >

{%如果on_sale%}{{“products.general.sale_price”|t}}{%其他的%}{{“products.general.regular_price”|t}}{%endif%}{%如果产品．price_varies%}{{产品．price_min|money_without_trailing_zeros}} + {%其他的%}{{产品．价格|money_without_trailing_zeros}}{%endif%}

在下方新增以下程式碼：李< / >

{% -如果产品．price_varies= =假而且变体．unit_price_measurement- - - - - - %}{% -捕获unit_price_separator- - - - - - %}/ {{“general.accessibility.unit_price_separator”|t}}跨度,< / >{% -endcapture- - - - - - %}{% -捕获unit_price_base_unit- - - - - - %}{% -如果变体．unit_price_measurement．reference_value! =1- - - - - - %}{{-变体．unit_price_measurement．reference_value-}}{% -endif- - - - - - %}{{变体．unit_price_measurement．reference_unit}}{% -endcapture- - - - - - %}{{“products.general.unit_price”|t}} {{变体．unit_price|钱}}{{-unit_price_separator-}} {{-unit_price_base_unit-}}{% -endif- - - - - - %}

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

按一下「儲存」來確認變更內容。李< / >

編輯購物車頁面

在「範本」目錄中，按一下「cart.liquid」檔案。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，搜尋「」並找出以下程式碼：李< / >

{% -如果项．original_line_price! =项．final_line_price- - - - - - %}{{“products.general.regular_price”|t}} {{项．original_line_price|钱}} {{“products.general.sale_price”|t}} .．{{项．final_line_price|钱}}{% -其他的- - - - - - %}{{项．original_line_price|钱}}{% -endif- - - - - - %}

備註

如果您使用舊版的佈景主題，可能會無法找到此程式碼片段。在此情況下，請直接新增步驟 3 的程式碼至元素下方。

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

{% -如果项．unit_price_measurement- - - - - - %}{{“products.general.unit_price”|t}}{% -捕获unit_price_separator- - - - - - %}/ {{“general.accessibility.unit_price_separator”|t}}跨度,< / >{% -endcapture- - - - - - %}{% -捕获unit_price_base_unit- - - - - - %}{% -如果项．unit_price_measurement．reference_value! =1- - - - - - %}{{-项．unit_price_measurement．reference_value-}}{% -endif- - - - - - %}{{项．unit_price_measurement．reference_unit}}{% -endcapture- - - - - - %}{{项．unit_price|钱}}{{-unit_price_separator-}} {{-unit_price_base_unit-}}{% -endif- - - - - - %}

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

按一下「儲存」來確認變更內容。李< / >

編輯訂單頁面

在「範本」目錄中，按一下「客户/ order.liquid」檔案。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，搜尋「{{line_item。或iginal_price | money }}」並找出以下程式碼：李< / >

{{“customer.order.price”|t}}＂>{% -如果line_item．original_price! =line_item．final_price- - - - - - %}{{“products.general.regular_price”|t}} < del >{{line_item．original_price|钱}} {{“products.general.sale_price”|t}} .．{{line_item．final_price|钱}}{% -其他的- - - - - - %}{{line_item．original_price|钱}}{% -endif- - - - - - %}道明> < /

在步驟 2 的道明> < /之前新增以下程式碼片段：李< / >

{% -如果line_item．unit_price_measurement- - - - - - %}{{“products.general.unit_price”|t}}{% -捕获unit_price_separator- - - - - - %}/ {{“general.accessibility.unit_price_separator”|t}}跨度,< / >{% -endcapture- - - - - - %}{% -捕获unit_price_base_unit- - - - - - %}{% -如果line_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|钱}}{{-unit_price_separator-}} {{-unit_price_base_unit-}}{% -endif- - - - - - %}

編輯完成後，客户/ order.liquid檔案應如下所示：

按一下「儲存」來確認變更內容。李< / >

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

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

.ajaxcart__price｛字体大小：新兴市场（13 px）;显示：块；｝

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

.cart__unit-price｛显示：块；｝

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

按一下「儲存」來確認變更內容。李< / >

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

在「資產」目錄中，按一下「timber.scss.liquid」檔案。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，搜尋「.product-single__policies {」並找出以下程式碼：李< / >

.product-single__policies｛保证金：15个像素025个像素0；｝

在步驟 2 的程式碼上新增以下程式碼片段：李< / >

.product-single__unit｛显示：没有一个；.price-container——得到更多＆｛显示：块；｝｝

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

前往檔案最下方，並新增以下程式碼：李< / >

.product-unit-price｛颜色：＄colorTextBody；显示：块；｝

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

按一下「儲存」來確認變更內容。李< / >

編輯JavaScript佈景主題程式碼

在「資產」目錄中，按一下「theme.js.liquid」檔案。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，找出以下程式碼：李< / >

varprodImg；

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

varunitPrice＝零；

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

使用「查詢鍵盤快捷鍵」功能，找出以下程式碼：李< / >

//创建项目的数据对象并添加到'items'数组

在步驟 4 的程式碼上新增以下程式碼片段：李< / >

如果（cartItem．unit_price_measurement）｛unitPrice＝｛addRefererenceValue：cartItem．unit_price_measurement．reference_value= = !1，价格：主题．货币．formatMoney（cartItem．unit_price，设置．moneyFormat)，reference_value：cartItem．unit_price_measurement．reference_value，reference_unit：cartItem．unit_price_measurement．reference_unit};｝

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

使用「查詢鍵盤快捷鍵」功能，找出以下程式碼：李< / >

供应商：cartItem．供应商

在步驟 6 的程式碼上新增以下程式碼片段：李< / >

unitPrice：unitPrice，

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

使用「查詢鍵盤快捷鍵」功能，找出以下程式碼：李< / >

productPrice：＇# ProductPrice＇，

在步驟 8 的程式碼下方新增以下程式碼片段：李< / >

unitPrice：＇(data-unit-price)＇，unitPriceBaseUnit：＇(data-unit-price-base-unit)＇，

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

使用「查詢鍵盤快捷鍵」功能，搜尋「(this.selectors美元。priceContainer，这．美元的容器）.removeClass（」並找出以下程式碼：李< / >

＄（这．选择器．priceContainer，这．美元的容器）.removeClass（＇visibility-hidden＇）;

用以下程式碼片段取代該程式碼：李< / >

＄（这．选择器．priceContainer，这．美元的容器）.removeClass（＇visibility-hidden price-container——得到更多＇）;

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

使用「查詢鍵盤快捷鍵」功能，找出以下程式碼：李< / >

＄（这．选择器．SKU）.超文本标记语言（变体．sku）;

在步驟 12 的程式碼上新增以下程式碼片段：李< / >

如果（变体．unit_price_measurement）｛varunitPrice美元＝＄（这．选择器．unitPrice，这．美元的容器）;varunitPriceBaseUnit美元＝＄（这．选择器．unitPriceBaseUnit，这．美元的容器）;unitPrice美元．超文本标记语言（主题．货币．formatMoney（变体．unit_price，moneyFormat））;unitPriceBaseUnit美元．超文本标记语言（这．getBaseUnit（变体));＄（这．选择器．priceContainer，这．美元的容器）.addClass（＇price-container——得到更多＇）;｝

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

使用「查詢鍵盤快捷鍵」功能，搜尋「this.destroyImageCarousel ();」並找出以下程式碼：李< / >

onUnload：函数（）｛这．美元的容器．从（这．设置．名称空间）;这．destroyImageCarousel（);｝

在步驟 14 的程式碼上新增以下程式碼片段：李< / >

getBaseUnit：函数（变体）｛返回变体．unit_price_measurement．reference_value= = =1?变体．unit_price_measurement．reference_unit：变体．unit_price_measurement．reference_value+变体．unit_price_measurement．reference_unit；}，

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

按一下「儲存」來確認變更內容。李< / >

編輯英文翻譯

在「語言代碼」目錄中，按一下「en.default.json」檔案。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，找出以下程式碼：李< / >

“refresh_page”："选择一个选项会导致整页刷新"

在步驟 2 的程式碼上新增以下程式碼片段：李< / >

“unit_price_separator”：“每”，

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

使用「查詢鍵盤快捷鍵」功能，找出以下程式碼：李< / >

“include_taxes”：“含税”。，

在步驟 4 的程式碼下方新增以下程式碼片段：李< / >

“unit_price”：“单价”，

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

按一下「儲存」來確認變更內容。李< / >

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

在Shopify管理介面中，前往”佈景主題」頁面。李< / ><李>
按一下「動作」>「編輯語言」

點擊「變更佈景主題語言」，然後選取您要編輯的語言。此操作僅能在您已發佈的佈景主題上進行。李< / ><李>
在搜尋欄輸入单价。李< / ><李>
在「一般 / 無障礙功能」下方更新單價分隔符號。李< / ><李>
在「產品 / 一般」下方更新單價標籤。李< / ><李>
按一下「儲存」。李< / >

最小的步驟

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

找出並展開「程式碼片段」資料夾。李< / ><李>
選取「新增程式碼片段」。李< / ><李>
輸入名稱product-unit-price。李< / ><李>
在product-unit-price.liquid複製並貼上以下程式碼。李< / >

{% -除非可用- - - - - - %}{% -如果变体．标题- - - - - - %}{% -分配可用＝变体．可用- - - - - - %}{% -其他的- - - - - - %}{% -分配可用＝真正的- - - - - - %}{% -endif- - - - - - %}{% -endunless- - - - - - %}除非可用而且变体．unit_price_measurement%}隐藏{%endunless%} {%如果wrapper_class! =空白%}{{wrapper_class}} {%endif%}“data-unit-price-container >{% -捕获unit_price_separator- - - - - - %}/{{“general.accessibility.unit_price_separator”|t}}{% -endcapture- - - - - - %}{% -捕获unit_price_base_unit- - - - - - %}{% -如果可用而且变体．unit_price_measurement- - - - - - %}{% -如果变体．unit_price_measurement．reference_value! =1- - - - - - %}{{-变体．unit_price_measurement．reference_value-}}{% -endif- - - - - - %}{{变体．unit_price_measurement．reference_unit}}{% -endif- - - - - - %}{% -endcapture- - - - - - %}{{“products.product.unit_price_label”|t}}．{{变体．unit_price|钱}}{{-unit_price_separator-}} {{-unit_price_base_unit-}}

按一下「儲存」。李< / ><李>
找出並編輯檔案product-grid-item.liquid。李< / ><李>
請取代這行：李< / >

{%捕获价格%} {{特色．价格|钱}} {%endcapture%}

取代為這行：

{% -分配价格＝特色．价格|钱- - - - - - %}

使用「查詢鍵盤快捷鍵」功能，找出{{price}}，並新增下方程式碼：李< / >

{% -分配变体＝特色．selected_or_first_available_variant- - - - - - %}{% -如果变体．可用而且变体．unit_price_measurement- - - - - - %}{%包括“product-unit-price”，变体：变体，wrapper_class：“grid-link__unit-price”%}{% -endif- - - - - - %}

編輯完成後，product-grid-item.liquid檔案應如下所示：

按一下「儲存」來確認變更內容。李< / ><李>
找出並編輯檔案search-result.liquid

使用「查詢鍵盤快捷鍵」功能，找出{% if项目。Object_type == 'product' %}，並在該行下方新增以下程式碼：李< / >

{% -分配变体＝项．selected_or_first_available_variant- - - - - - %}

現在使用「查詢鍵盤快捷鍵」功能，找出下列兩個程式碼片段：李< / >

小> < s > <{{项．compare_at_price_max|钱}}< /小> < / s >

和

{{“products.product.regular_price”|t}} .．{{项．价格|钱}}

在前一步驟列出的兩個程式碼下方皆新增以下程式碼區段：李< / >

{% -如果变体．可用而且变体．unit_price_measurement- - - - - - %}{%包括“product-unit-price”，变体：变体%}{% -endif- - - - - - %}

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

按一下「儲存」來確認變更內容。李< / >

更新樣式

找出並展開「資產」資料夾。李< / ><李>
編輯檔案theme.scss.liquid。李< / ><李>
使用查詢鍵盤快捷鍵功能找出此程式碼區塊：李< / >

.grid-link__title，.grid-link__meta｛位置：相对；margin-bottom：5 px；

在上個步驟中找到的程式碼片段下方插入以下程式碼區塊：李< / >

字体类型：＄headerFontStack；

使用「查詢鍵盤快捷鍵」功能，找出以下程式碼片段：李< / >

.grid-link__sale_price｛不透明度：0.95；过滤器：α（不透明度＝95）;｝

在上個步驟中找到的程式碼片段下方插入以下程式碼區塊：李< / >

.grid-link__unit-price｛字体大小：1 em；｝

使用「查詢鍵盤快捷鍵」功能，找出以下程式碼片段：李< / >

.order-discount——列表｛保证金：0.8 em00.6 em1.3 em；list-style：没有一个；填充：0；｝

在上個步驟中找到的程式碼片段下方插入以下程式碼區塊：李< / >

.order-discount——价格｛margin-bottom：0；｝

使用「查詢鍵盤快捷鍵」功能，找出以下程式碼片段：李< / >

.cart__product-title｛显示：inline-block；

在上個步驟中找到的程式碼片段下方插入以下程式碼區塊：李< / >

粗细：＄bodyFontWeightBold；

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

按一下「儲存」來確認變更內容。李< / ><李>
找出並編輯檔案timber.scss.liquid。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，找出此程式碼：李< / >

.quantity-selector｛显示：inline-block；｝｝

在上個步驟中找到的程式碼片段下方插入以下程式碼區塊：李< / >

.product-single__title｛粗细：＄bodyFontWeightBold；｝

在檔案最下方插入此程式碼：李< / >

.product-unit-price｛颜色：rgba（＄colorTextBody，0.6）;显示：块；字体类型：＄headerFontStack；字体大小：新兴市场（12 px）;｝

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

按一下「儲存」來確認變更內容。李< / >

更新範本

找出並展開「範本」資料夾。李< / ><李>
找出並編輯檔案客户/ order.liquid。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，找出此程式碼：李< / >

{% -其他的- - - - - - %}{{line_item．original_price|钱}}{% -endif- - - - - - %}

在步驟 3 的程式碼下方新增此程式碼：李< / >

{% -如果line_item．unit_price_measurement- - - - - - %}{%包括“product-unit-price”，变体：line_item，可用：真正的%}{% -endif- - - - - - %}

編輯完成後，客户/ order.liquid檔案應如下所示：

按一下「儲存」來確認變更內容。李< / >

更新JavaScript

在「資產」中找出並編輯theme.js。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，找出.shopify-payment-button這一行，並將它取代為：李< / >

shopifyPaymentButton美元：＄（＇.shopify-payment-button＇，这．美元的容器)，unitPrice美元：＄（＇(data-unit-price)＇，这．美元的容器)，unitPriceBaseUnit美元：＄（＇(data-unit-price-base-unit)＇，这．美元的容器)，unitPriceContainer美元：＄（＇(data-unit-price-container)＇，这．美元的容器）

該程式碼區塊應如下所示：

找出此程式碼：李< / >

其他的｛这．选择器．comparePrice美元．addClass（＇隐藏＇）.超文本标记语言（”）;这．选择器．comparePriceA11y美元．attr（＇aria-hidden＇，＇真正的＇）;｝

在其下方新增此程式碼：李< / >

//单价这．选择器．unitPriceContainer美元．addClass（＇隐藏＇）;如果（变体．unit_price）｛这．选择器．unitPrice美元．超文本标记语言（Shopify．formatMoney（变体．unit_price，主题．moneyFormat））;这．选择器．unitPriceBaseUnit美元．超文本标记语言（这．getBaseUnit（变体));这．选择器．unitPriceContainer美元．removeClass（＇隐藏＇）;｝

結果應如下所示：

使用「查詢鍵盤快捷鍵」功能，找出此程式碼：李< / >

．attr（＇data-zoom＇）})；})；

在上個步驟中找到的程式碼片段下方插入以下程式碼區塊：李< / >

}，getBaseUnit：函数（变体）｛返回变体．unit_price_measurement．reference_value= = =1?变体．unit_price_measurement．reference_unit：变体．unit_price_measurement．reference_value+变体．unit_price_measurement．reference_unit；

結果應如下所示：

按一下「儲存」來確認變更內容。李< / >

更新購物車範本

找出並展開的「區段」資料夾。李< / ><李>
編輯檔案cart-template.liquid。李< / ><李>
使用查詢鍵盤快捷鍵功能找出程式碼{{item。 . Final_price | money}。李< / ><李>
用此程式碼取代這一行：李< / >

{{项．final_price|钱}}

找到程式碼的第一項目{%- if项。line_level_discount_allocation != blank -%}：李< / >

{% -如果项．line_level_discount_allocations! =空白- - - - - - %}
{{“customer.order.discount”|t}}＂>{% -为discount_allocation在item.line_level_discount_allocations- - - - - - %}
.．{{discount_allocation．discount_application．标题}}（-{{discount_allocation．量|钱}}李)< / >{% -endfor- - - - - - %}< / ul >{% -endif- - - - - - %}

在步驟 5 的程式碼上方新增此程式碼區塊：李< / >

{% -如果项．变体．可用而且项．变体．unit_price_measurement- - - - - - %}{%包括“product-unit-price”，变体：项，可用：item.variant.available%}{% -endif- - - - - - %}

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

按一下「儲存」來確認變更內容。李< / >

更新精選產品

找出並展開的「區段」資料夾。李< / ><李>
編輯檔案featured-product.liquid。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，找出itemprop = "名称"這一行，並將它取代為：李< / >

{{标题}}< / h1 >

找出包含id = " PriceA11y "的程式碼：李< / >

{%如果compare_at_price>价格%}{{“products.product.regular_price”|t}} {compare_at_price | money}} {%endif%}

在上個步驟中找到的程式碼片段下方插入以下程式碼區塊：李< / >

{%包括“product-unit-price”，变体：变体，可用：真正的%}

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

按一下「儲存」來確認變更內容。李< / >

更新產品範本

找出並展開的「區段」資料夾。李< / ><李>
編輯檔案product-template.liquid。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，找出itemprop = "名称"這一行，並將它取代為：李< / >

{{产品．标题}}< / h1 >

使用「查詢鍵盤快捷鍵」功能，找出此程式碼：李< / >

{%其他的%}{{“products.product.sale_price”|t}}>．{{产品．compare_at_price_max|钱}}< / s >{%endif%}

新增以下這行：李< / >

{%包括“product-unit-price”，变体：变体，可用：真正的%}

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

按一下「儲存」來確認變更內容。李< / >

更新語言代碼

找出並展開「語言代碼」資料夾。李< / ><李>
開啟並編輯en.default.json檔案。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，找出refresh_page這一行，並將它取代為：李< / >

“refresh_page”："选择一个选项会导致整页刷新"，“unit_price_separator”：“每”

結果應如下所示：

找出包含full_details的這一行，並將它取代為：李< / >

“full_details”：“详情”，“unit_price_label”：“单价”

結果應如下所示：

按一下「儲存」來確認變更內容。李< / >

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

在Shopify管理介面中，前往”佈景主題」頁面。李< / ><李>
按一下「動作」>「編輯語言」

點擊「變更佈景主題語言」，然後選取您要編輯的語言。此操作僅能在您已發佈的佈景主題上進行。李< / ><李>
在搜尋欄輸入单价。李< / ><李>
在「一般 / 無障礙功能」下方更新單價分隔符號。李< / ><李>
在「產品 (複數) / 產品」下方更新單價標籤。李< / ><李>
按一下「儲存」。李< / >

创业的步驟

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

在「語言代碼」目錄中，按一下「en.default.json」。李< / ><李>
使用「查詢鍵盤快捷鍵」，找出包含refresh_page的這一行：李< / >

“refresh_page”："选择一个选项会导致整页刷新"

在步驟 2 的的這一行上方新增以下程式碼：李< / >

“unit_price_separator”：“每”，

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

使用「查詢鍵盤快捷鍵」，找出包含stock_unavailable的這一行：李< / >

“stock_unavailable”：“该商品无法添加到您的购物车，因为库存不足。”

在步驟 4 的的這一行上方新增以下程式碼：李< / >

“unit_price_label”：“单价”，

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

按一下「儲存」來確認變更內容。李< / >

編輯佈景主題樣式表

在「資產」目錄中，按一下theme.scss.liquid。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，找出這一行.product-single__policies {：李< / >

.product-single__policies｛字体大小：新兴市场（＄font-size-base-1）;｝

在步驟 2 的程式碼區塊｝結束標籤下方新增以下程式碼：李< / >

.product-unit-price｛字体大小：新兴市场（12）;颜色：＄color-body-text；｝.product-card__unit-price｛显示：块；｝

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

按一下「儲存」來確認變更內容。李< / >

新增產品單價程式碼片段

在「程式碼片段」目錄中，按一下「新增程式碼片段」。李< / ><李>
輸入名稱product-unit-price。李< / ><李>
將以下程式碼新增到product-unit-price.liquid：李< / >

如果wrapper_class! =空白%}{{wrapper_class}} {%endif%} {%除非product_variant．unit_price_measurement%}隐藏{%endunless%}“data-unit-price-container >{% -捕获unit_price_separator- - - - - - %}/{{“general.accessibility.unit_price_separator”|t}}{% -endcapture- - - - - - %}{% -捕获unit_price_base_unit- - - - - - %}{% -如果product_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|钱}}{{-unit_price_separator-}} {{-unit_price_base_unit-}}

按一下「儲存」來確認變更內容。李< / >

編輯產品卡程式碼片段

在「程式碼片段」目錄中，按一下「product-card.liquid」。李< / ><李>
使用「查詢鍵盤快捷鍵」功能，找出這一行。李< / ><李>
在步驟 2 的的這一行上方新增以下程式碼：李< / >
{% -分配current_variant＝产品．selected_or_first_available_variant- - - - - - %} 編輯完成後，結果應如下所示： 使用「查詢鍵盤快捷鍵」功能，找出這一行< div class = " product-card__price”>：李< / > < div class = " product-card__price”>{%如果产品．compare_at_price>产品．价格%}{%评论%}产品大减价{%endcomment%}{%如果产品．price_varies%}{%分配sale_price＝产品．价格|money_without_trailing_zeros%}{{“products.product.on_sale_from_html”|t：价格：sale_price}}{%其他的%}{{“products.product.regular_price”|t}}>．{{产品．compare_at_price|money_without_trailing_zeros}}< / s >{{“products.product.sale_price”|t}}{{产品．价格|money_without_trailing_zeros}}{%endif%}{%其他的%}{%评论%}不打折，但仍可能有不同的价格{%endcomment%}{%如果产品．price_varies%}{%分配价格＝产品．价格|money_without_trailing_zeros%}{{“products.product.from_text_html”|t：价格：价格}}{%其他的%}{{“products.product.regular_price”|t}}{{产品．价格|money_without_trailing_zeros}}{%endif%}{%endif%}< / div > 在步驟 5 的< / div >結尾標籤上方新增以下程式碼：李< / > {% -除非产品．price_varies- - - - - - %}{% -如果current_variant．unit_price_measurement- - - - - - %}{%包括“product-unit-price”，product_variant：current_variant，wrapper_class：“product-card__unit-price”%}{% -endif- - - - - - %}{% -endunless- - - - - - %} 編輯完成後，結果應如下所示： 按一下「儲存」來確認變更內容。李< / > 編輯購物車頁面範本在「區段」目錄中，按一下cart-template.liquid。李< / ><李> 使用「查詢鍵盤快捷鍵」，找出< td类= " cart__cell——总”>第一次出現的地方：李< / > < td类= " cart__cell——总”>{% -如果项．original_line_price! =项．final_line_price- - - - - - %}{{“products.product.regular_price”|t}}>．{{项．original_line_price|钱}} {{“products.product.sale_price”|t}}>．{{项．final_line_price|钱}}{% -其他的- - - - - - %}{{项．original_line_price|钱}}{% -endif- - - - - - %} 在步驟 2 的endif結尾標籤下方新增以下程式碼：李< / > {% -如果项．unit_price_measurement- - - - - - %}{%包括“product-unit-price”，product_variant：项%}{% -endif- - - - - - %} 編輯完成後，結果應如下所示： 使用「查詢鍵盤快捷鍵」，找出< td类= " cart__cell——总”>第二次出現的地方：李< / > < td类= " cart__cell——总”>{{＃如果discountsApplied}}{%endraw%} {{“products.product.regular_price”|t}} {%生%}> . {%endraw%} {{“products.product.sale_price”|t}} {%生%}> . {{{originalLinePrice}} {{/if}} {{#if discountsApplied}} {%endraw%} {{“customer.order.discount”|t}} {%生%}>．" >{{＃each discount}} .{%endraw%} {% -包括“icon-saletag”- - - - - - %} {%生%}{{this.discount_application。Title}} (-{{{this。为mattedAmount }}}) {{/each}} {{/if}} 在步驟 4 的{{/如果}}結尾標籤下方新增以下程式碼：李< / > {{＃如果unitPrice}}{%endraw%} {{“products.product.unit_price_label”|t}} {%生%}{%endraw%}{% -捕获unit_price_separator- - - - - - %}/ {{“general.accessibility.unit_price_separator”|t}}跨度,< / >{% -endcapture- - - - - - %}{%生%} {{{unitPrice。价格}}}{%endraw%} {{-unit_price_separator-}} {%生%}{{＃如果unitPrice。addRefererenceValue}}{{unitPrice。reference_value}}｝{{/如果}}{{｛unitPrice．Reference_unit}}} {{/if}} 編輯完成後，結果應如下所示： 按一下「儲存」來確認變更內容。李< / > 編輯精選產品頁面範本在「區段」目錄中，按一下featured-product.liquid。李< / ><李> 使用「查詢鍵盤快捷鍵」功能，找出這一行{% assign current_variant = product。selected_or_first_available_variant%}。李< / ><李> 在步驟 2 的這一行下方新增以下程式碼：李< / > {%分配variants_with_unit_price＝产品．变体|在哪里：“unit_price_measurement”%} 編輯完成後，結果應如下所示： 使用「查詢鍵盤快捷鍵」，找出包含< ul类= " product-single__meta-list的這一行：李< / > {{部分．id}}“阶级= "{%除非产品．compare_at_price>产品．价格%}隐藏{%endunless%}" > .{{“products.product.on_sale”|t}}< / div >李< / ><李>{%除非产品．compare_at_price_max>产品．价格%}{{“products.product.regular_price”|t}}{%endunless%}部分．id}}＂Class ="product-single__price" itemprop="price" content="{{current_variant．价格|divided_by：100.00}}＂>{{current_variant．价格|钱}}李跨度< / > < / >{%如果产品．compare_at_price_max>产品．价格%}<李>{{“products.product.regular_price”|t}} {{部分．id}}＂Class ="product-single__price product-single__price——compare"> .{{current_variant．compare_at_price|钱}}李< / s > < / >{%endif%}{%如果部分．设置．stock_enable%} 在此ul標籤下方，找出程式碼如果section.settings. {%stock_enable %}。李< / ><李> 在步驟 6 的如果區塊上方新增以下程式碼：李< / > {% -如果variants_with_unit_price．大小>0- - - - - - %}<李>{%包括“product-unit-price”，product_variant：current_variant%}李< / >{% -endif- - - - - - %} 編輯完成後，結果應如下所示： 按一下「儲存」來確認變更內容。李< / > 編輯產品頁面範本在「區段」目錄中，按一下product-template.liquid。李< / ><李> 使用「查詢鍵盤快捷鍵」功能，找出這一行{% assign current_variant = product。selected_or_first_available_variant%}。李< / ><李> 在步驟 2 的這一行下方新增以下程式碼：李< / > {%分配variants_with_unit_price＝产品．变体|在哪里：“unit_price_measurement”%} 編輯完成後，結果應如下所示： 使用「查詢鍵盤快捷鍵」，找出包含< ul类= " product-single__meta-list的這一行：李< / > {%如果商店．taxes_included或商店．shipping_policy．身体! =空白%}product-single__price-container{%endif%}" >{{部分．id}}“阶级= "{%除非产品．compare_at_price>产品．价格%}隐藏{%endunless%}" > .{{“products.product.on_sale”|t}}< / div >李< / ><李>{%除非产品．compare_at_price_max>产品．价格%}{{“products.product.regular_price”|t}}{%endunless%}部分．id}}＂Class ="product-single__price" itemprop="price" content="{{current_variant．价格|divided_by：100.00}}＂>{{current_variant．价格|钱}}李跨度< / > < / >{%如果产品．compare_at_price_max>产品．价格%}<李>{{“products.product.regular_price”|t}} {{部分．id}}＂Class ="product-single__price product-single__price——compare"> .{{current_variant．compare_at_price|钱}}李< / s > < / >{%endif%}{%如果部分．设置．stock_enable%} 在此ul標籤下方，找出程式碼如果section.settings. {%stock_enable %}。李< / ><李> 在步驟 5 的如果區塊上方新增以下程式碼：李< / > {% -如果variants_with_unit_price．大小>0- - - - - - %}<李>{%包括“product-unit-price”，product_variant：current_variant%}李< / >{% -endif- - - - - - %} 編輯完成後，結果應如下所示： 按一下「儲存」來確認變更內容。李< / > 編輯客戶的訂單範本在「範本」目錄中，按一下「客户/ order.liquid」。李< / ><李> 使用「查詢鍵盤快捷鍵」功能，找出這一行：李< / > {{“customer.order.price”|t}}＂>{% -如果line_item．original_price! =line_item．final_price- - - - - - %}{{“products.product.regular_price”|t}} < del >{{line_item．original_price|钱}} {{“products.product.sale_price”|t}} .．{{line_item．final_price|钱}}{% -其他的- - - - - - %}{{line_item．original_price|钱}}{% -endif- - - - - - %}道明> < / 將步驟 2 中的程式碼取代為以下程式碼：李< / > {{“customer.order.price”|t}}＂>< div >{% -如果line_item．original_price! =line_item．final_price- - - - - - %}{{“products.product.regular_price”|t}} < del >{{line_item．original_price|钱}} {{“products.product.sale_price”|t}} .．{{line_item．final_price|钱}}{% -其他的- - - - - - %}{{line_item．original_price|钱}}{% -endif- - - - - - %}< / div >{% -如果line_item．unit_price_measurement- - - - - - %}{%包括“product-unit-price”，product_variant：line_item%}{% -endif- - - - - - %}道明> < / 編輯完成後，客户/ order.liquid檔案應如下所示： 按一下「儲存」來確認變更內容。李< / > 編輯您佈景主題的JavaScipt檔案在「資產」目錄中，按一下theme.js。李< / ><李> 使用「查詢鍵盤快捷鍵」功能，找出這一行//创建项目的数据对象并添加到'items'数组。李< / ><李> 在步驟 2 的的這一行上方新增以下程式碼：李< / > varunitPrice＝零；如果（cartItem．unit_price_measurement）｛unitPrice＝｛addRefererenceValue：cartItem．unit_price_measurement．reference_value= = !1，价格：主题．货币．formatMoney（cartItem．unit_price，主题．moneyFormat)，reference_value：cartItem．unit_price_measurement．reference_value，reference_unit：cartItem．unit_price_measurement．reference_unit};｝ 編輯完成後，結果應如下所示： 使用「查詢鍵盤快捷鍵」功能，找出這一行供应商: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:函数(evt) {。李< / ><李> 在步驟 8 的這一行上方新增以下程式碼：李< / > _getBaseUnit：函数（变体）｛返回变体．unit_price_measurement．reference_value= = =1?变体．unit_price_measurement．reference_unit：变体．unit_price_measurement．reference_value+变体．unit_price_measurement．reference_unit；}， 編輯完成後，結果應如下所示： 使用「查詢鍵盤快捷鍵」功能，找出這一行this._updateIncomingInfo(变种);：李< / > ｝其他的｛//变量已卖完，禁用提交按钮缓存．addToCart美元．道具（＇禁用＇，真正的）.addClass（＇btn——卖光的＇）;缓存．addToCartText美元．超文本标记语言（主题．字符串．soldOut）;＄（这．选择器．shopifyPaymentButton，这．美元的容器）.隐藏（);//更新库存时间这．_updateIncomingInfo（变体）;｝ 在步驟 10 的｝結尾標籤下方新增以下程式碼：李< / > ＄（这．选择器．unitPriceContainer，这．美元的容器）.addClass（＇隐藏＇）;如果（变体．unit_price_measurement）｛varunitPrice美元＝＄（这．选择器．unitPrice，这．美元的容器）;varunitPriceBaseUnit美元＝＄（这．选择器．unitPriceBaseUnit，这．美元的容器）;unitPrice美元．超文本标记语言（主题．货币．formatMoney（变体．unit_price，主题．moneyFormat））;unitPriceBaseUnit美元．超文本标记语言（这．_getBaseUnit（变体));＄（这．选择器．unitPriceContainer，这．美元的容器）.removeClass（＇隐藏＇）;｝ 編輯完成後，結果應如下所示： 按一下「儲存」來確認變更內容。李< / > (選用) 為其他語言新增翻譯在Shopify管理介面中，前往”佈景主題」頁面。李< / ><李> 按一下「動作」>「編輯語言」點擊「變更佈景主題語言」，然後選取您要編輯的語言。此操作僅能在您已發佈的佈景主題上進行。李< / ><李> 在搜尋欄輸入单价。李< / ><李> 在「一般 / 無障礙功能」下方更新單價分隔符號。李< / ><李> 在「產品 (複數) / 產品」下方更新單價標籤。李< / ><李> 按一下「儲存」。李< / >
供应的步驟單價功能已新增至供应佈景主題8.3.0和以上的版本。如果您無法將佈景主題更新為最新版本，請依照這些步驟將單價自訂內容套用至舊版的供应。 新增產品單價程式碼片段找出並展開程式碼片段資料夾。李< / ><李> 選取「新增程式碼片段」。李< / ><李> 輸入名稱product-unit-price。李< / ><李> 複製貼上以下程式碼至檔案中，並選取「儲存」。李< / > {% -除非可用- - - - - - %}{% -如果变体．标题- - - - - - %}{% -分配可用＝变体．可用- - - - - - %}{% -其他的- - - - - - %}{% -分配可用＝真正的- - - - - - %}{% -endif- - - - - - %}{% -endunless- - - - - - %}< div class = " product-price-unit{%如果可用而且变体．unit_price_measurement%}产品价格-unit——可用{%endif%}＂Data-unit-price-container > .{{“products.product.unit_price_label”|t}}{% -捕获unit_price_separator- - - - - - %}/ {{“general.accessibility.unit_price_separator”|t}}跨度,< / >{% -endcapture- - - - - - %}{% -捕获unit_price_base_unit- - - - - - %}{% -如果可用而且变体．unit_price_measurement- - - - - - %}{% -如果变体．unit_price_measurement．reference_value! =1- - - - - - %}{{-变体．unit_price_measurement．reference_value-}}{% -endif- - - - - - %}{{变体．unit_price_measurement．reference_unit}}{% -endif- - - - - - %}{% -endcapture- - - - - - %}{{变体．unit_price|钱}}{{-unit_price_separator-}}{{-unit_price_base_unit-}} < / div > 編輯完成後，product-unit-price.liquid檔案應如下所示： 按一下「儲存」來確認變更內容。李< / > 編輯精選產品範本找出並展開的「區段」資料夾，然後選取「featured-product.liquid」檔案。李< / ><李> 使用「查詢鍵盤快捷鍵」功能，找出檔案中的這一行{%包含'price'和price %}。李< / > {{部分．id}}h1“类= >{%包括“价格”与价格%}李跨度< / > < / > 在步驟 2 的程式碼片段結尾下方新增以下程式碼：李< / > {%包括“product-unit-price”变体：变体%} 編輯完成後，featured-product.liquid檔案應如下所示： 按一下「儲存」來確認變更內容。李< / > 編輯產品範本找出並展開的「區段」資料夾，然後選取「product-template.liquid」檔案。李< / ><李> 使用「查詢鍵盤快捷鍵」功能，找出檔案中的這一行{%包含'price'变量。价格%}。李< / > {{部分．id}}h1“类= >{%包括“价格”与variant.price%}李跨度< / > < / > 在步驟 2 的結尾下方新增以下程式碼：李< / > {%包括“product-unit-price”，变体：变体%} 編輯完成後，product-template.liquid檔案應如下所示： 按一下「儲存」來確認變更內容。李< / > 編輯產品格狀項目程式碼片段找出並展開「程式碼片段」資料夾，然後選取product-grid-item.liquid檔案。李< / ><李> 使用「查詢鍵盤快捷鍵」功能，找出檔案中的這一行{%如果on_sale和section.settings。product_show_saved_amount %}。李< / > {%如果on_sale而且部分．设置．product_show_saved_amount%}除非部分．设置．show_compare_at_price%}介质,对吧{%endunless%} {%如果部分．设置．product_reviews_enable%}has-reviews{%endif%}＂>{%分配compare_price＝产品．compare_at_price%}{%分配product_price＝产品．价格%}{%包括“price-sale”%}{%endif%}< / div > 用以下程式碼片段取代該程式碼：李< / > {% -如果产品．selected_or_first_available_variant．可用而且产品．selected_or_first_available_variant．unit_price_measurement- - - - - - %}{%包括“product-unit-price”，变体：product.selected_or_first_available_variant%}{% -endif- - - - - - %}< / div >{%如果on_sale而且部分．设置．product_show_saved_amount%}< div class = " sale-tag{%除非部分．设置．show_compare_at_price%}介质,对吧{%endunless%} {%如果部分．设置．product_reviews_enable%}has-reviews{%endif%}＂>{%分配compare_price＝产品．compare_at_price%}{%分配product_price＝产品．价格%}{%包括“price-sale”%}< / div >{%endif%} 編輯完成後，product-grid-item.liquid檔案應如下所示： 按一下「儲存」來確認變更內容。李< / > 編輯產品清單項目程式碼片段找出並展開「程式碼片段」資料夾，然後選取product-list-item.liquid檔案。李< / ><李> 使用「查詢鍵盤快捷鍵」功能，找出檔案中的這一行：李< / > 如果on_sale%}{{“products.general.sale_price”|t}}{%其他的%}{{“products.general.regular_price”|t}}{%endif%}{%包括“价格”与product.price%}{%如果on_sale而且部分．设置．product_show_compare_at_price%}<小> {{“products.general.regular_price”|t}}{%包括“价格”与product.compare_at_price%}小> < / s > < /{%endif%}{%如果on_sale而且部分．设置．product_show_saved_amount%}如果部分．设置．product_reviews_enable%}has-reviews{%endif%}＂>{%分配compare_price＝产品．compare_at_price%}{%分配product_price＝产品．价格%}{%包括“price-sale”%} 用以下程式碼片段取代該程式碼：李< / > .{%如果on_sale%}{{“products.general.sale_price”|t}}{%其他的%}{{“products.general.regular_price”|t}}{%endif%}{%包括“价格”与product.price%}{%如果on_sale而且部分．设置．product_show_compare_at_price%}<小> {{“products.general.regular_price”|t}}{%包括“价格”与product.compare_at_price%}小> < / s > < /{%endif%}{% -如果产品．selected_or_first_available_variant．可用而且产品．selected_or_first_available_variant．unit_price_measurement- - - - - - %}{%包括“product-unit-price”，变体：product.selected_or_first_available_variant%}{% -endif- - - - - - %}< / div >{%如果on_sale而且部分．设置．product_show_saved_amount%}< div class = " sale-tagmedium-down- right。{%如果部分．设置．product_reviews_enable%}has-reviews{%endif%}＂>{%分配compare_price＝产品．compare_at_price%}{%分配product_price＝产品．价格%}{%包括“price-sale”%}< / div > 編輯完成後，product-list-item.liquid檔案應如下所示： 按一下「儲存」來確認變更內容。李< / > 編輯搜尋結果方格程式碼片段找出並展開「程式碼片段」資料夾，然後選取search-result-grid.liquid檔案。李< / ><李> 使用「查詢鍵盤快捷鍵」功能，找出檔案中的這一行{%如果on_sale和section.settings。product_show_saved_amount %}。李< / > {%如果on_sale而且部分．设置．product_show_saved_amount%}{%分配compare_price＝项．compare_at_price%}{%分配product_price＝项．价格%}{%包括“price-sale”%}{%endif%}< / div > 用以下程式碼片段取代該程式碼：李< / > {% -如果项．first_available_variant．可用而且项．first_available_variant．unit_price_measurement- - - - - - %}{%包括“product-unit-price”，变体：item.first_available_variant%}{% -endif- - - - - - %}< / div >{%如果on_sale而且部分．设置．product_show_saved_amount%}< div class = " sale-tagmedium- right">{%分配compare_price＝项．compare_at_price%}{%分配product_price＝项．价格%}{%包括“price-sale”%}< / div >{%endif%} 編輯完成後，search-result-grid.liquid檔案應如下所示： 按一下「儲存」來確認變更內容。李< / > 編輯購物車範本找出並展開「範本」資料夾，然後選取cart.liquid檔案。李< / ><李> 使用「查詢鍵盤快捷鍵」功能，找出檔案中的這一行：李< / > {{项．original_line_price|钱}} {{“products.general.sale_price”|t}}{{项．final_line_price|钱}}{% -其他的- - - - - - %}{{项．original_line_price|钱}}{% -endif- - - - - - %} 用以下程式碼片段取代該程式碼：李< / > <小>{{项．original_line_price|钱}}< / s > {{“products.general.sale_price”|t}}{{项．final_line_price|钱}}{% -其他的- - - - - - %}{{项．original_line_price|钱}}{% -endif- - - - - - %}{% -如果项．变体．可用而且项．变体．unit_price_measurement- - - - - - %}{%包括“product-unit-price”变体：项，可用：item.variant.available%}{% -endif- - - - - - %} 編輯完成後，cart.liquid檔案應如下所示： 按一下「儲存」來確認變更內容。李< / > 編輯訂單範本找出並展開「範本」資料夾，然後選取客户/ order.liquid檔案。李< / ><李> 使用「查詢鍵盤快捷鍵」功能，找出檔案中的這一行：李< / > {{“customer.order.price”|t}}＂>{% -如果line_item．original_price! =line_item．final_price- - - - - - %}{{“products.general.regular_price”|t}} < del >{{line_item．original_price|钱}} {{“products.general.sale_price”|t}} .．{{line_item．final_price|钱}}{% -其他的- - - - - - %}{{line_item．original_price|钱}}{% -endif- - - - - - %}道明> < / 在步驟 2 的道明> < /結尾上方新增以下程式碼：李< / > {% -如果line_item．unit_price_measurement- - - - - - %}{%包括“product-unit-price”，变体：line_item，可用：真正的%}{% -endif- - - - - - %} 編輯完成後，客户/ order.liquid檔案應如下所示： 按一下「儲存」來確認變更內容。李< / > 編輯佈景主題版面配置找出並展開「版面配置」資料夾，然後選取theme.liquid檔案。李< / ><李> 使用「查詢鍵盤快捷鍵」功能，找出檔案中包含only_left:的這一行：李< / > 产品:{不可用:{{“products.product.unavailable”|t|json}}will_be_in_stock_after:{{“products.product.will_be_in_stock_after”|t：日期：“[日期]”|json}}only_left:{{“products.product.only_left”|t：数：' 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——价格{：李< / > .product-item——价格｛@includeclearfix;.h1｛margin-bottom：＄地沟/2；｝跨度｛行高：22 px；｝小｛空白：nowrap；｝｝ 用以下程式碼片段取代該程式碼：李< / > .product-item——价格｛@includeclearfix;margin-bottom：＄地沟/2；.h1｛margin-bottom：0；｝跨度｛行高：22 px；｝小｛空白：nowrap；｝｝.product-price-unit｛显示：没有一个；字体大小：新兴市场（12 px）;margin-right：10 px；.cart-pricing&、.order-table＆｛margin-right：0；｝＆.product-price-unit——可用｛显示：块；｝｝ 編輯完成後，theme.scss.liquid檔案應如下所示： 按一下「儲存」來確認變更內容。李< / > 編輯JavaScript佈景主題程式碼找出並展開「資產」資料夾中，然後選取theme.js.liquid檔案。李< / ><李> 使用「查詢鍵盤快捷鍵」功能，找出檔案中的這一行originalSelectorId: 'productSelect-' + sectionId：李< / > 选择器：｛originalSelectorId：＇productSelect -＇+sectionId，addToCart美元：＄（＇# addToCart -＇+sectionId)，SKU美元：＄（＇.variant-sku＇，这．美元的容器)，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＇，这．美元的容器)，thumbImages美元：＄（＇# productThumbs -＇+sectionId）.找到（＇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:函数(变体){：李< / > productVariantCallback：函数（变体）｛var自我＝这；如果（变体）｛//如果设置了一个，则更新变量映像如果（变体．featured_image）｛varnewImg＝变体．featured_image；varnewImage美元＝这．设置．选择器．productImageWrapper美元．过滤器（＇[data-image-id = "＇+newImg．id+＇”)＇）;varotherImages美元＝这．设置．选择器．productImageWrapper美元．不（＇[data-image-id = "＇+newImg．id+＇”)＇）;newImage美元．removeClass（＇隐藏＇）;otherImages美元．addClass（＇隐藏＇）;｝ 在步驟 2 的If(变体){下方新增以下程式碼：李< / > //如果设置了，则更新单价varunitPriceContainer美元＝＄（这．设置．选择器．unitPriceContainer，这．美元的容器）;unitPriceContainer美元．removeClass（＇product-price-unit——可用＇）;如果（变体．unit_price_measurement）｛varunitPrice美元＝＄（这．设置．选择器．unitPrice，这．美元的容器）;varunitPriceBaseUnit美元＝＄（这．设置．选择器．unitPriceBaseUnit，这．美元的容器）;unitPrice美元．文本（Shopify．formatMoney（变体．unit_price，moneyFormat));unitPriceBaseUnit美元．文本（这．getBaseUnit（变体));unitPriceContainer美元．addClass（＇product-price-unit——可用＇）;｝ 編輯完成後，結果應如下所示： 使用「查詢鍵盤快捷鍵」功能，找出檔案中的這一行customPriceFormat += '' + comparePrice + '';：李< / > customPriceFormat＝＇＇+customPrice+＇＇；customPriceFormat+ =＇ <年代>＇+comparePrice+＇< / s > ＇；customPriceFormat+ =＇products.general.regular_price＇+a11yComparePrice+＇＇；customPriceFormat+ =＇products.general.sale_price＇+a11yPrice+＇＇； 用以下程式碼片段取代這一行customPriceFormat += '' + comparePrice + '';：李< / > customPriceFormat+ =＇ <小> <年代>＇+comparePrice+＇< / s > < /小> ＇； 編輯完成後，結果應如下所示： 使用「查詢鍵盤快捷鍵」功能，找出檔案中的這一行(this.settings.selectors美元。shopifyPaymentButton美元，这．美元的容器）.隐藏（);：李< / > ｝其他的｛//该变量不存在，禁用提交按钮。//这可能是一个错误，或者注意到某个特定的变量不可用。这．设置．选择器．addToCart美元．addClass（＇禁用＇）.道具（＇禁用＇，真正的）;这．设置．选择器．addToCartText美元．超文本标记语言（主题．字符串．产品．不可用）;这．设置．选择器．variantQuantity美元．removeClass（＇是可见的＇）;这．设置．选择器．quantityElements美元．隐藏（);＄（这．设置．选择器．shopifyPaymentButton美元，这．美元的容器）.隐藏（);｝ 在步驟 11 的程式碼片段下方新增以下程式碼：李< / > }，getBaseUnit：函数（变体）｛返回变体．unit_price_measurement．reference_value= = =1?变体．unit_price_measurement．reference_unit：变体．unit_price_measurement．reference_value+变体．unit_price_measurement．reference_unit； 編輯完成後，結果應如下所示： 按一下「儲存」來確認變更內容。李< / > 編輯佈景主題語言檔案找出並展開「語言代碼」資料夾，然後選取en.default.json檔案。李< / ><李> 使用「查詢鍵盤快捷鍵」功能，找出檔案中包含“refresh_page”的這一行：李< / > “可访问性”：｛“refresh_page”："选择一个选项会导致整页刷新"｝， 在步驟 2 的“refresh_page”上方新增以下程式碼：李< / > “unit_price_separator”：“每”， 編輯完成後，結果應如下所示： 使用「查詢鍵盤快捷鍵」功能，找出檔案中包含“will_be_in_stock_after”的這一行：李< / > “产品”：｛“sold_out”：“卖出去”，“will_not_ship_until”：“直到”才发货。，“数量”：“数量”，“add_to_cart”：“添加到购物车”，“不可用”：“不可用”，“will_be_in_stock_after”："之后会有货"，“only_left”：｛“一”：“只有离开!”，“其他”：“只有离开!”}，“full_details”：“详情”｝ 在步驟 5 的“will_be_in_stock_after”下方新增以下程式碼：李< / > “unit_price_label”：“单价”， 編輯完成後，結果應如下所示： 按一下「儲存」來確認變更內容。李< / > (選用) 為其他語言新增翻譯在Shopify管理介面中，前往”佈景主題」頁面。李< / ><李> 選取「動作」>「編輯語言」。李< / ><李> 點擊「變更佈景主題語言」，然後選取您要編輯的語言。此操作僅能在您已發佈的佈景主題上進行。李< / ><李> 在搜尋列中輸入单价。李< / ><李> 在「一般 / 無障礙功能」下方更新單價分隔符號。李< / ><李> 在「產品 (複數) / 產品」下方更新單價標籤。李< / ><李> 按一下「儲存」。李< / >

在您的訂單通知中顯示單價如果您已為產品新增單價，但仍未顯示於訂單確認通知中，則您可能必須更訂單通知範本。 步驟：在Shopify管理介面，前往「設定」>「通知」。李< / ><李> 按一下「訂單確認」。李< / ><李> 為範本新增以下程式碼片段：李< / > {% -如果line_item．unit_price_measurement- - - - - - %}{{line_item．unit_price|钱}}{% -如果line_item．unit_price_measurement．reference_value! =1- - - - - - %}{{-line_item．unit_price_measurement．reference_value-}}{% -endif- - - - - - %}{{line_item．unit_price_measurement．reference_unit}}{% -endif- - - - - - %} 按一下「儲存」。李< / >

為您的產品新增單價

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

首次亮相的步驟

編輯產品價格程式碼片段

編輯購物車頁面

編輯商品系列頁面

編輯產品卡方格項目

編輯產品卡清單

編輯訂單頁面

編輯佈景主題樣式

編輯JavaScript佈景主題程式碼

編輯英文翻譯

編輯佈景主題版面配置

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

布鲁克林的步驟

新增產品價格程式碼片段

編輯精選產品頁面

編輯產品頁面

編輯ajax購物車

編輯產品方格項目

編輯購物車頁面

編輯訂單頁面

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

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

編輯JavaScript佈景主題程式碼

編輯英文翻譯

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

最小的步驟

更新程式碼片段

更新樣式

更新範本

更新JavaScript

更新購物車範本

更新精選產品

{{< / span >标题< / span >}}< / span >< / h1 >

更新產品範本

{{< / span >产品< / span >．< / span >标题< / span >}}< / span >< / h1 >

更新語言代碼

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

创业的步驟

編輯佈景主題語言檔案

編輯佈景主題樣式表

新增產品單價程式碼片段

編輯產品卡程式碼片段

編輯購物車頁面範本

編輯精選產品頁面範本

編輯產品頁面範本

編輯客戶的訂單範本

編輯您佈景主題的JavaScipt檔案

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

供应的步驟

新增產品單價程式碼片段

編輯精選產品範本

編輯產品範本

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

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

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

編輯購物車範本

編輯訂單範本

編輯佈景主題版面配置

編輯佈景主題樣式

編輯JavaScript佈景主題程式碼

編輯佈景主題語言檔案

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

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

步驟：

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

`{{< / span >标题< / span >}}< / span >< / h1 >`

`{{< / span >产品< / span >．< / span >标题< / span >}}< / span >< / h1 >`