単価を表示する
数量または寸法で商品を販売する場合は、特定の商品の単価表示が必要な場合があります。商品の単価を入力すると、その単価は商品ページ、コレクションページ、カートページ、チェックアウトページ、および注文確認通知に表示されます。
商品に単価を追加する
デスクトップ
管理画面から [商品管理] に移動します。
編集する商品をクリックします。
オプション:商品にバリエーションがある場合は、[バリエーション] セクションで、編集するバリエーションをクリックします。
[価格設定] セクションで、[この商品の単価を表示する] を選択します。
[商品の外寸] フィールドに、商品の外寸を入力し、測量の単位を選択します。
オプション:デフォルトの基準単位を変更する場合、[基準単位] フィールドに新たな基準単位を追加して、測量単位を選択します。たとえば、重量が200グラムの商品の場合、1 kgの基準単位を選択できます。
[保存] をクリックします。
iPhone
- Shopifyアプリから、 [商品] > [すべての商品] に移動します。
- 編集を希望する商品をタップします。
- 商品価格エリアをタップします。
- [単価を表示する] を選択します。
- [商品の外寸] フィールドに、商品の外寸を入力し、測量の単位を選択します。
- オプション:デフォルトの基準単位を変更する場合、[基準単位] フィールドに新たな基準単位を追加して、測量単位を選択します。たとえば、重量が200グラムの商品の場合、1 kgの基準単位を選択できます。
- [保存] をタップします。
Android
- Shopifyアプリから、 [商品] > [すべての商品] に移動します。
- 編集を希望する商品をタップします。
- 商品価格エリアをタップします。
- [単価を表示する] を選択します。
- [商品の外寸] フィールドに、商品の外寸を入力し、測量の単位を選択します。
- オプション:デフォルトの基準単位を変更する場合、[基準単位] フィールドに新たな基準単位を追加して、測量単位を選択します。たとえば、重量が200グラムの商品の場合、1 kgの基準単位を選択できます。
- [✓] をタップします。
オンラインストアで単価を表示する
すべてのOnline Store 2.0のテーマですでに単価機能を利用できます。オンラインストアに単価を表示するのに操作は不要です。
以前のテーマを使用していて、単価機能に対応するバージョンに更新できない場合、単価を表示するには、テーマコードを手動でカスタマイズします。
以前のテーマで単価を表示する
テーマによってカスタマイズの手順は異なります。以下の指示に従う前にテーマのボタンをクリックしてください。
Debut
Debutの手順
12.1.0以降のバージョンでは、Debutのテーマで単価を表示できます。テーマを最新バージョンに更新することができない場合は、Debutの旧バージョンに単価のカスタマイズを追加できます。
商品価格スニペットを編集する
スニペットディレクトリーで、
product-price.liquid
ファイルをクリックします。検索のキーボードショートカットを使用して、
data-price
を検索して次のコードを検索します。
<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}" data-price>
- コードを次のスニペットに置き換えます。
<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}{% if available and variant.unit_price_measurement %} price--unit-available{% endif %}" data-price>
編集後、結果は次のようになります。

-
検索のキーボードショートカットを使用して、
price__sale
を検索して次のコードを検索します。
<div class="price__sale">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--sale" data-sale-price>
{{ money_price }}
</span>
<span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
</dd>
</div>
- 終了
</div>
タグの下に、次のコードを追加します。
{% if variant.unit_price_measurement %}
<div class="price__unit">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
</dt>
<dd class="price-unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span data-unit-price-base-unit>
{%- if available and variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</dd>
</div>
{% endif %}
- [保存] をクリックして変更を確定します。
カートページを編集する
セクションディレクトリーで、
cart-template.liquid
ファイルをクリックします。検索のキーボードショートカットを使用して、
cart__price-wrapper
を検索して次のコードを検索します。
{%- if item.original_price != item.final_price -%}
<dl>
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s>{{ item.original_price | money }}</s>
</dd>
<dt>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="order-discount">{{ item.final_price | money }}</span>
</dd>
</dl>
{%- else -%}
{{ item.original_price | money }}
{%- endif -%}
- コードを次のスニペットに置き換えます。
<dl>
{%- if item.original_price != item.final_price -%}
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s>{{ item.original_price | money }}</s>
</dd>
<dt>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="order-discount">{{ item.final_price | money }}</span>
</dd>
{%- else -%}
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
{{ item.original_price | money }}
</dd>
{%- endif -%}
{%- if item.unit_price_measurement -%}
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
</dt>
<dd>
<span class="price-unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if item.unit_price_measurement.reference_value != 1 -%}
{{- item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
</dd>
{%- endif -%}
</dl>
編集後、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 }}"
を検索して次のコードを検索します。
{%- if line_item.original_price != line_item.final_price -%}
<dl>
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s>{{ line_item.original_price | money }}</s>
</dd>
<dt>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="order-discount">{{ line_item.final_price | money }}</span>
</dd>
</dl>
{%- else -%}
{{ line_item.original_price | money }}
{%- endif -%}
- コードを次のスニペットに置き換えます。
<dl>
{%- if line_item.original_price != line_item.final_price -%}
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s>{{ line_item.original_price | money }}</s>
</dd>
<dt>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="order-discount">{{ line_item.final_price | money }}</span>
</dd>
{%- else -%}
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
{{ line_item.original_price | money }}
</dd>
{%- endif -%}
{%- if line_item.unit_price_measurement -%}
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
</dt>
<dd>
<span class="price-unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if line_item.unit_price_measurement.reference_value != 1 -%}
{{- line_item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ line_item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span data-unit-price>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
</dd>
{%- endif -%}
</dl>
編集後、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: 1px;
margin: 5px 0 10px;
width: 100%;
@include flex-basis(100%);
}
- ステップ2からコードの下に、次のスニペットを追加します。
.price__unit {
@include flex-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',
編集後、結果は次のようになります。

- 検索のキーボードショートカットを使用して、次のコードを検索します。
var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]';
- コードを次のスニペットに置き換えます。
var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$]';
- 検索のキーボードショートカットを使用して、次のコードを検索します。
var salePrice = '';
- ステップ8からコードの下に、次のスニペットを追加します。
var unitLabel = '';
var unitPrice = '';
if (variant.unit_price_measurement) {
unitLabel = theme.strings.unitPrice;
unitPrice =
theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat) +
' ' +
theme.strings.unitPriceSeparator +
' ' +
this._getBaseUnit(variant);
}
- 検索のキーボードショートカットを使用して、次のコードを検索します。
.replace('[$]', salePrice)
- ステップ10からコードの下に、次のスニペットを追加します。
.replace('[UnitPrice]', unitLabel)
.replace('[$$$]', unitPrice)
編集後、結果は次のようになります。

- 検索のキーボードショートカットを使用して、次のコードを検索します。
_updatePrice: function(evt) {
- ステップ12からコードの前に、次のスニペットを追加します。
_getBaseUnit: function(variant) {
return variant.unit_price_measurement.reference_value === 1
? variant.unit_price_measurement.reference_unit
: variant.unit_price_measurement.reference_value +
variant.unit_price_measurement.reference_unit;
},
- 検索のキーボードショートカットを使用して、次のコードを検索します。
var $salePrice = $(this.selectors.salePrice, $priceContainer);
- ステップ14からコードの下に、次のスニペットを追加します。
var $unitPrice = $(this.selectors.unitPrice, $priceContainer);
var $unitPriceBaseUnit = $(
this.selectors.unitPriceBaseUnit,
$priceContainer
);
- 検索のキーボードショートカットを使用して、次のコードを検索します。
.removeClass(this.classes.productOnSale)
- ステップ16からコードの下に、次のスニペットを追加します。
.removeClass(this.classes.productUnitAvailable)
- 検索のキーボードショートカットを使用して、次のコードを検索します。
else {
// Regular price
$regularPrice.html(
theme.Currency.formatMoney(variant.price, theme.moneyFormat)
);
}
- ステップ18からコードの下に、次のスニペットを追加します。
// Unit price
if (variant.unit_price_measurement) {
$unitPrice.html(
theme.Currency.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
ファイルは次のようになります。

- [保存] をクリックして変更を確定します。
(オプション) 他の言語の翻訳を追加する
管理画面でテーマページに移動します。
[...] ボタン > [デフォルトテーマのコンテンツを編集する] の順にクリックします。
[テーマ言語を変更する] をクリックして、編集する言語を選択します。公開済みのテーマでのみ使用可能です。
検索フィールドに
Unit Price
を入力します。一般設定/アクセシビリティの単価区切りフィールドを更新します。
商品/商品の単価ラベルフィールドを更新します。
[保存] をクリックします。
Brooklyn
Brooklynの手順
13.1.0以降のバージョンでは、Brooklynのテーマで単価を表示できます。テーマを最新バージョンに更新することができない場合は、Brooklynの旧バージョンに単価のカスタマイズを追加できます。
商品価格スニペットを追加する
スニペットディレクトリーで、[新しいスニペットを追加する] をクリックします。
名前フィールドに
product-price
を入力します。次のコードをコピーしてファイルに貼り付けます。
<div class="price-container{% if variant.unit_price_measurement %} price-container--unit-available{% endif %}" data-price-container>
{%- if variant.compare_at_price > variant.price -%}
<span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper" aria-hidden="false">
<span id="ComparePrice" class="product-single__price--compare-at">
{{ variant.compare_at_price | money }}
</span>
</span>
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
{%- else -%}
<span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper hide" aria-hidden="true">
<span id="ComparePrice" class="product-single__price--compare-at"></span>
</span>
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
{%- endif -%}
<span id="ProductPrice"
class="product-single__price{% if variant.compare_at_price > variant.price %} on-sale{% endif %}"
itemprop="price"
content="{{ variant.price | divided_by: 100.00 }}">
{{ variant.price | money }}
</span>
<div class="product-single__unit">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span data-unit-price-base-unit>
{%- if variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span class="product-unit-price">
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
</div>
</div>
- [保存] をクリックして変更を確定します。
特集商品ページを編集する
セクションディレクトリーで、
featured-product.liquid
ファイルをクリックします。検索のキーボードショートカットを使用して、
itemprop="offers"
を検索して次のコードを検索します。
<div data-price-container>
{% comment %}
Optionally show the 'compare at' or original price of the product.
{% endcomment %}
{% if compare_at_price > price %}
<span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper" aria-hidden="false">
<span id="ComparePrice" class="product-single__price--compare-at">
{{ compare_at_price | money }}
</span>
</span>
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper hide" aria-hidden="true">
<span id="ComparePrice" class="product-single__price--compare-at"></span>
</span>
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
{% endif %}
<span id="ProductPrice"
class="product-single__price{% if compare_at_price > price %} on-sale{% endif %}"
itemprop="price"
content="{{ price | divided_by: 100.00 }}"
{% unless current_variant.available %}aria-hidden="true"{% endunless %}>
{{ price | money }}
</span>
</div>
- コードを次のスニペットに置き換えます。
{% include 'product-price', variant: current_variant %}
編集後、featured-product.liquid
ファイルは次のようになります。

- [保存] をクリックして変更を確定します。
商品ページを編集する
セクションディレクトリーで、
product-template.liquid
ファイルをクリックします。検索のキーボードショートカットを使用して、
itemprop="offers"
を検索して次のコードを検索します。
<div data-price-container>
{% comment %}
Optionally show the 'compare at' or original price of the product.
{% endcomment %}
{% if current_variant.compare_at_price > current_variant.price %}
<span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper" aria-hidden="false">
<span id="ComparePrice" class="product-single__price--compare-at">
{{ current_variant.compare_at_price | money }}
</span>
</span>
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper hide" aria-hidden="true">
<span id="ComparePrice" class="product-single__price--compare-at"></span>
</span>
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
{% endif %}
<span id="ProductPrice"
class="product-single__price{% if current_variant.compare_at_price > current_variant.price %} on-sale{% endif %}"
itemprop="price"
content="{{ current_variant.price | divided_by: 100.00 }}"
{% unless current_variant.available %}aria-hidden="true"{% endunless %}>
{{ current_variant.price | money }}
</span>
</div>
- コードを次のスニペットに置き換えます。
{% include 'product-price', variant: current_variant %}
編集後、product-template.liquid
ファイルは次のようになります。

- [保存] をクリックして変更を確定します。
AJAXカートを編集する
スニペットディレクトリーで、
ajax-cart-template.liquid
ファイルをクリックします。検索のキーボードショートカットを使用して、
<span class="ajaxcart__price">{{{price}}}</span>
を検索して次のコードを検索します。
{{#if discountsApplied}}
<span class="visually-hidden">{% endraw %}{{ 'products.general.regular_price' | t }}{% raw %}</span>
<del class="ajaxcart__price">{{{price}}}</del>
<span class="visually-hidden">{% endraw %}{{ 'products.general.sale_price' | t }}{% raw %}</span>
<span class="ajaxcart__price">{{{discountedPrice}}}</span>
{{else}}
<span class="ajaxcart__price">{{{price}}}</span>
{{/if}}
- ステップ2から
{{/if}}
の下に、次のコードを追加します。
{{#if unitPrice}}
<span class="visually-hidden">{% endraw %}{{ 'products.general.unit_price' | t }}{% raw %}</span>
<span class="cart__unit-price">
{% endraw %}
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden"> {{'general.accessibility.unit_price_separator' | t}} </span>
{%- endcapture -%}
{% raw %}
<span>{{{ unitPrice.price }}}</span>{{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
</span>
{{/if}}
編集後、ajax-cart-template.liquid
ファイルは次のようになります。

- [保存] をクリックして変更を確定します。
商品グリッドアイテムを編集する
スニペットディレクトリーで、
product-grid-template.liquid
ファイルをクリックします。検索のキーボードショートカットを使用して、
capture img_id_class
を検索して次のコードを検索します。
{% capture img_id_class %}ProductImage-{{ product.featured_image.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_image.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
- ステップ2からコードの前に、次のスニペットを追加します。
{%- assign variant = product.selected_or_first_available_variant -%}
編集後、結果は次のようになります。

-
検索のキーボードショートカットを使用して、
{{ product.price | money_without_trailing_zeros }}
を検索して次のコードを検索します。
<span class="grid-product__price">
{% if on_sale %}
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
{% endif %}
{% if product.price_varies %}
{{ product.price_min | money_without_trailing_zeros }}
<span class="icon-fallback-text">
<span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
<span class="fallback-text">+</span>
</span>
{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}
</span>
-
</span>
の下に、次のコードを追加します。
{%- if product.price_varies == false and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span>
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
</span>
{%- endcapture -%}
<span class="product-unit-price">
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}
編集後、結果は次のようになります。

- [保存] をクリックして変更を確定します。
カートページを編集する
テンプレートディレクトリーで、
cart.liquid
ファイルをクリックします。検索のキーボードショートカットを使用して、
<span class="cart__price">
を検索して次のコードを検索します。
{%- if item.original_line_price != item.final_line_price -%}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<del class="cart__price">{{ item.original_line_price | money }}</del>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="order-discount cart__price">{{ item.final_line_price | money }}</span>
{%- else -%}
<span class="cart__price">{{ item.original_line_price | money }}</span>
{%- endif -%}
- ステップ2からコードの下に、次のスニペットを追加します。
{%- if item.unit_price_measurement -%}
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span class="cart__unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if item.unit_price_measurement.reference_value != 1 -%}
{{- item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}
編集後、cart.liquid
ファイルは次のようになります。

- [保存] をクリックして変更を確定します。
注文ページを編集する
テンプレートディレクトリーで、
customers/order.liquid
ファイルをクリックします。検索のキーボードショートカットを使用して、
{{ line_item.original_price | money }}
を検索して次のコードを検索します。
<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
{%- if line_item.original_price != line_item.final_price -%}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<del>{{ line_item.original_price | money }}</del>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="order-discount">{{ line_item.final_price | money }}</span>
{%- else -%}
{{ line_item.original_price | money }}
{%- endif -%}
</td>
- ステップ2から
</td>
の前に、次のスニペットを追加します。
{%- if line_item.unit_price_measurement -%}
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span class="product-unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if line_item.unit_price_measurement.reference_value != 1 -%}
{{- line_item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ line_item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- 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: 15px 0 25px 0;
}
- ステップ2からコードに、次のスニペットを追加します。
.product-single__unit {
display: none;
.price-container--unit-available & {
display: block;
}
}
編集後、結果は次のようになります。

- ファイルの最後に移動し、次のコードを追加します。
.product-unit-price {
color: $colorTextBody;
display: block;
}
編集後、結果は次のようになります。

- [保存] をクリックして変更を確定します。
JavaScriptテーマコードを編集する
アセットディレクトリーで、
theme.js.liquid
ファイルをクリックします。検索のキーボードショートカットを使用して、次のコードを検索します。
var prodImg;
- ステップ2からコードの下に、次のスニペットを追加します。
var unitPrice = null;
編集後、結果は次のようになります。

- 検索のキーボードショートカットを使用して、次のコードを検索します。
// Create item's data object and add to 'items' array
- ステップ4からコードに、次のスニペットを追加します。
if (cartItem.unit_price_measurement) {
unitPrice = {
addRefererenceValue:
cartItem.unit_price_measurement.reference_value !== 1,
price: theme.Currency.formatMoney(
cartItem.unit_price,
settings.moneyFormat
),
reference_value: cartItem.unit_price_measurement.reference_value,
reference_unit: cartItem.unit_price_measurement.reference_unit
};
}
編集後、結果は次のようになります。

- 検索のキーボードショートカットを使用して、次のコードを検索します。
vendor: cartItem.vendor
- ステップ6からコードに、次のスニペットを追加します。
unitPrice: unitPrice,
編集後、結果は次のようになります。

- 検索のキーボードショートカットを使用して、次のコードを検索します。
productPrice: '#ProductPrice',
- ステップ8からコードの下に、次のスニペットを追加します。
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
編集後、結果は次のようになります。

-
検索のキーボードショートカットを使用して、
$(this.selectors.priceContainer, this.$container).removeClass(
を検索して次のコードを検索します。
$(this.selectors.priceContainer, this.$container).removeClass(
'visibility-hidden'
);
- コードを次のスニペットに置き換えます。
$(this.selectors.priceContainer, this.$container).removeClass(
'visibility-hidden price-container--unit-available'
);
編集後、結果は次のようになります。

- 検索のキーボードショートカットを使用して、次のコードを検索します。
$(this.selectors.SKU).html(variant.sku);
- ステップ12からコードに、次のスニペットを追加します。
if (variant.unit_price_measurement) {
var $unitPrice = $(this.selectors.unitPrice, this.$container);
var $unitPriceBaseUnit = $(
this.selectors.unitPriceBaseUnit,
this.$container
);
$unitPrice.html(
theme.Currency.formatMoney(variant.unit_price, moneyFormat)
);
$unitPriceBaseUnit.html(this.getBaseUnit(variant));
$(this.selectors.priceContainer, this.$container).addClass(
'price-container--unit-available'
);
}
編集後、結果は次のようになります。

-
検索のキーボードショートカットを使用して、
this.destroyImageCarousel();
を検索して次のコードを検索します。
onUnload: function() {
this.$container.off(this.settings.namespace);
this.destroyImageCarousel();
}
- ステップ14からコードに、次のスニペットを追加します。
getBaseUnit: function(variant) {
return variant.unit_price_measurement.reference_value === 1
? variant.unit_price_measurement.reference_unit
: variant.unit_price_measurement.reference_value +
variant.unit_price_measurement.reference_unit;
},
編集後、結果は次のようになります。

- [保存] をクリックして変更を確定します。
英語の翻訳を編集する
ロケールディレクトリーで、
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",
編集後、結果は次のようになります。

- [保存] をクリックして変更を確定します。
(オプション) 他の言語の翻訳を追加する
管理画面でテーマページに移動します。
[...] ボタン > [デフォルトテーマのコンテンツを編集する] の順にクリックします
[テーマ言語を変更する] をクリックして、編集する言語を選択します。公開済みのテーマでのみ使用可能です。
検索フィールドに
Unit Price
を入力します。一般設定/アクセシビリティの単価区切りフィールドを更新します。
商品/一般設定の単価ラベルフィールドを更新します。
[保存] をクリックします。
Minimal
Minimalの手順
11.2.0以降のバージョンでは、Minimalのテーマで単価を表示できます。テーマを最新バージョンに更新することができない場合は、Minimalの旧バージョンに単価のカスタマイズを追加できます。
スニペットを更新する
スニペットフォルダーを検索して展開します。
[新しいスニペットを追加する] を選択します。
名前
product-unit-price
を入力します。次のコードをコピーして
product-unit-price.liquid
に貼り付けます。
{%- unless available -%}
{%- if variant.title -%}
{%- assign available = variant.available -%}
{%- else -%}
{%- assign available = true -%}
{%- endif -%}
{%- endunless -%}
<span class="product-unit-price{% unless available and variant.unit_price_measurement %} hide{% endunless %}{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}" data-unit-price-container>
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}</span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span data-unit-price-base-unit>
{%- if available and variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
<span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
[保存] をクリックします。
ファイル
product-grid-item.liquid
を検索して編集します。この行を置き換えます。
{% capture price %}{{ featured.price | money }}{% endcapture %}
次の行を使用します。
{%- assign price = featured.price | money -%}
-
検索のキーボードショートカットを使用して、
{{ price }}
を検索し、以下のこのコードを追加します。
{%- assign variant = featured.selected_or_first_available_variant -%}
{%- if variant.available and variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: variant, wrapper_class: 'grid-link__unit-price' %}
{%- endif -%}
編集後、product-grid-item.liquid
ファイルは次のようになります。

[保存] をクリックして変更を確定します。
ファイルを検索して編集する
search-result.liquid
検索のキーボードショートカットを使用して、
{% if item.object_type == 'product' %}
を検索し、次のコードを以下の行に追加します。
{%- assign variant = item.selected_or_first_available_variant -%}
- 次に検索のキーボードショートカットを使用して、以下の2つのコードスニペットを検索します。
<s><small>{{ item.compare_at_price_max | money }}</small></s>
および
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span itemprop="price">
{{ item.price | money }}
</span>
- 前のステップに記載されている2つのコードスニペットのそれぞれの下に、次のコードブロックを追加します。
{%- if variant.available and variant.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.8em 0 0.6em 1.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から以下のこのコードに、コードを追加します。
{%- if line_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 price
this.selectors.$unitPriceContainer.addClass('hide');
if (variant.unit_price) {
this.selectors.$unitPrice.html(
Shopify.formatMoney(variant.unit_price, theme.moneyFormat)
);
this.selectors.$unitPriceBaseUnit.html(this.getBaseUnit(variant));
this.selectors.$unitPriceContainer.removeClass('hide');
}
結果は次のようになります。

- 検索のキーボードショートカットを使用して、このコードを検索します。
.attr('data-zoom')
});
});
- 前のステップにあるコードスニペットの下に、次のコードブロックを挿入します。
},
getBaseUnit: function(variant) {
return variant.unit_price_measurement.reference_value === 1
? variant.unit_price_measurement.reference_unit
: variant.unit_price_measurement.reference_value +
variant.unit_price_measurement.reference_unit;
結果は次のようになります。

- [保存] をクリックして変更を確定します。
カートテンプレートを更新する
セクションフォルダーを検索して展開します。
ファイル
cart-template.liquid
を編集します。検索のキーボードショートカットを使用して、コード
<span class="order-discount h5">{{ item.final_price | money }}</span>
を検索します。行をこのコードに置き換えます。
<span class="order-discount order-discount--price h5">{{ item.final_price | money }}</span>
- コード
{%- if item.line_level_discount_allocations != blank -%}
が最初に現れている場所を検索します。
{%- if item.line_level_discount_allocations != blank -%}
<ul class="order-discount order-discount--list order-discount--title order-discount--cart medium-down--hide" aria-label="{{ 'customer.order.discount' | t }}">
{%- for discount_allocation in item.line_level_discount_allocations -%}
<li class="order-discount__item">
<span class="icon icon-saletag" aria-hidden="true"></span>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
</li>
{%- endfor -%}
</ul>
{%- endif -%}
- ステップ5からコードの上に、このコードのチャンクを追加します。
{%- if item.variant.available and item.variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: item, available: item.variant.available %}
{%- endif -%}
編集後、cart-template.liquid
ファイルは次のようになります。

- [保存] をクリックして変更を確定します。
特集商品を更新する
セクションフォルダーを検索して展開します。
ファイル
featured-product.liquid
を編集します。検索のキーボードショートカットを使用して
itemprop="name"
の行を検索し、以下で置き換えます。
<h1 class="product-single__title" itemprop="name">{{ title }}</h1>
-
id="PriceA11y"
を含むコードを検索します。
{% if compare_at_price > price %}
<span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice" class="product-single__sale-price">
{ compare_at_price | money }}
</s>
{% endif %}
- 前のステップにあるコードスニペットの下に、次のコードブロックを挿入します。
{% include 'product-unit-price', variant: variant, available: true %}
編集後、featured-product.liquid
ファイルは次のようになります。

- [保存] をクリックして変更を確定します。
商品テンプレートを更新する
セクションフォルダーを検索して展開します。
ファイル
product-template.liquid
を編集します。検索のキーボードショートカットを使用して、
itemprop="name"
の行を検索し、以下と置き換えます。
<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
- 検索のキーボードショートカットを使用してコードを検索します。
{% else %}
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.product.sale_price' | t }}</span>
<s id="ComparePrice" class="product-single__sale-price hide">
{{ product.compare_at_price_max | money }}
</s>
{% endif %}
- この行を以下に追加します。
{% 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"
結果は次のようになります。

- [保存] をクリックして変更を確定します。
(オプション) 他の言語の翻訳を追加する
管理画面でテーマページに移動します。
[...] ボタン > [デフォルトテーマのコンテンツを編集する] の順にクリックします。
[テーマ言語を変更する] をクリックして、編集する言語を選択します。公開済みのテーマでのみ使用可能です。
検索フィールドに
Unit Price
を入力します。一般設定/アクセシビリティの単価区切りフィールドを更新します。
商品/商品の単価ラベルフィールドを更新します。
[保存] をクリックします。
Venture
Ventureの手順
9.4.0 以降のバージョンでは、Ventureのテーマに単価表示が追加されました。テーマを最新バージョンに更新することができない場合は、以下のステップに従って、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
に、次のコードを追加します。
<span class="product-unit-price{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}{% unless product_variant.unit_price_measurement %} hide{% endunless %}" data-unit-price-container>
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}</span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span data-unit-price-base-unit>
{%- if product_variant.unit_price_measurement.reference_value != 1 -%}
{{- product_variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ product_variant.unit_price_measurement.reference_unit }}
</span>
{%- endcapture -%}
<span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
<span data-unit-price>{{ product_variant.unit_price | money }}</span>
{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
- [保存] をクリックして変更を確定します。
商品のカードスニペットを編集する
スニペットディレクトリーで、
product-card.liquid
をクリックします。検索のキーボードショートカットを使用して、
<a href="{{ product.url | within: collection }}"
行を検索します。ステップ2で見つかった行の上に、次のコードを追加します。
{%- assign current_variant = product.selected_or_first_available_variant -%}
編集後、結果は次のようになります。

-
検索のキーボードショートカットを使用して、
<div class="product-card__price">
行を検索します。
<div class="product-card__price">
{% if product.compare_at_price > product.price %}
{% comment %}
Product is on sale
{% endcomment %}
{% if product.price_varies %}
{% assign sale_price = product.price | money_without_trailing_zeros %}
{{ 'products.product.on_sale_from_html' | t: price: sale_price }}
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="product-card__regular-price">{{ product.compare_at_price | money_without_trailing_zeros }}</s>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
{{ product.price | money_without_trailing_zeros }}
{% endif %}
{% else %}
{% comment %}
Not on sale, but could still have varying prices
{% endcomment %}
{% if product.price_varies %}
{% assign price = product.price | money_without_trailing_zeros %}
{{ 'products.product.from_text_html' | t: price: price }}
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{{ product.price | money_without_trailing_zeros }}
{% endif %}
{% endif %}
</div>
- ステップ5で見つかった終了
</div>
タグの上に、次のコードを追加します。
{%- unless product.price_varies -%}
{%- if current_variant.unit_price_measurement -%}
{% include 'product-unit-price', product_variant: current_variant, wrapper_class: "product-card__unit-price" %}
{%- endif -%}
{%- endunless -%}
編集後、結果は次のようになります。

- [保存] をクリックして変更を確定します。
カートページのテンプレートを編集する
セクションディレクトリで、[
cart-template.liquid
] をクリックします。検索のキーボードショートカットを使用して、
<td class="cart__cell--total">
のの最初のインスタンスを検索します。
<td class="cart__cell--total">
{%- if item.original_line_price != item.final_line_price -%}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<del class="cart__item-total">{{ item.original_line_price | money }}</del>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="cart__item-total">{{ item.final_line_price | money }}</span>
{%- else -%}
<span class="cart__item-total">{{ item.original_line_price | money }}</span>
{%- endif -%}
- ステップ2で見つかった
endif
タグの下に、次のコードを追加します。
{%- if item.unit_price_measurement -%}
{% include 'product-unit-price', product_variant: item %}
{%- endif -%}
編集後、結果は次のようになります。

-
検索のキーボードショートカットを使用して、
<td class="cart__cell--total">
の2番目のインスタンスを検索します。
<td class="cart__cell--total">
{{#if discountsApplied}}
<span class="visually-hidden">{% endraw %}{{ 'products.product.regular_price' | t }}{% raw %}</span>
<del class="cart__item-total">{{{originalLinePrice}}}</del>
<span class="visually-hidden">{% endraw %}{{ 'products.product.sale_price' | t }}{% raw %}</span>
<span class="cart__item-total">{{{linePrice}}}</span>
{{else}}
<span class="cart__item-total">{{{originalLinePrice}}}</span>
{{/if}}
{{#if discountsApplied}}
<ul class="order-discount order-discount--cart order-discount--list order-discount--title" aria-label="{% endraw %}{{ 'customer.order.discount' | t }}{% raw %}">
{{#each discounts}}
<li class="order-discount__item">
{% endraw %}{%- include 'icon-saletag' -%}{% raw %}{{ this.discount_application.title }} (-{{{ this.formattedAmount }}})
</li>
{{/each}}
</ul>
{{/if}}
- ステップ4で見つかった2番目の終了
{{/if}}
タグの下に次のコードを追加します。
{{#if unitPrice}}
<span class="visually-hidden">{% endraw %}{{ 'products.product.unit_price_label' | t }}{% raw %}</span>
<span class="product-unit-price">
{% endraw %}
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{% raw %}
<span>{{{ unitPrice.price }}}</span>{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
</span>
{{/if}}
編集後、結果は次のようになります。

- [保存] をクリックして変更を確定します。
特集商品ページテンプレートを編集する
セクションディレクトリで、[
featured-product.liquid
] をクリックします。検索のキーボードショートカットを使用して、
{% assign current_variant = product.selected_or_first_available_variant %}
行を検索します。ステップ2で見つかった行の下に、次のコードを追加します。
{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}
編集後、結果は次のようになります。

-
検索のキーボードショートカットを使用して、
<ul class="product-single__meta-list
を含む行を検索します。
<ul class="product-single__meta-list list--no-bullets list--inline">
<li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
<div class="product-tag">
{{ 'products.product.on_sale' | t }}
</div>
</li>
<li>
{% unless product.compare_at_price_max > product.price %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{% endunless %}
<span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
</li>
{% if product.compare_at_price_max > product.price %}
<li>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
{{ current_variant.compare_at_price | money }}
</s>
</li>
{% endif %}
{% if section.settings.stock_enable %}
この
ul
タグの下で、{% if section.settings.stock_enable %}
コードを探します。ステップ6で見つかった
if
ブロックの上に、次のコードを追加します。
{%- if variants_with_unit_price.size > 0 -%}
<li>
{% include 'product-unit-price', product_variant: current_variant %}
</li>
{%- endif -%}
編集後、結果は次のようになります。

- [保存] をクリックして変更を確定します。
商品ページのテンプレートを編集
セクションディレクトリで、[
product-template.liquid
] をクリックします。検索のキーボードショートカットを使用して、
{% assign current_variant = product.selected_or_first_available_variant %}
行を検索します。ステップ2で見つかった行の下に、次のコードを追加します。
{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}
編集後、結果は次のようになります。

-
検索のキーボードショートカットを使用して、
<ul class="product-single__meta-list
を含む行を検索します。
<ul class="product-single__meta-list list--no-bullets list--inline{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__price-container{% endif %}">
<li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
<div class="product-tag">
{{ 'products.product.on_sale' | t }}
</div>
</li>
<li>
{% unless product.compare_at_price_max > product.price %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{% endunless %}
<span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
</li>
{% if product.compare_at_price_max > product.price %}
<li>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
{{ current_variant.compare_at_price | money }}
</s>
</li>
{% endif %}
{% if section.settings.stock_enable %}
この
ul
タグの下で、{% if section.settings.stock_enable %}
コードを探します。ステップ5で見つかった
if
ブロックの上に、次のコードを追加します。
{%- if variants_with_unit_price.size > 0 -%}
<li>
{% include 'product-unit-price', product_variant: current_variant %}
</li>
{%- endif -%}
編集後、結果は次のようになります。

- [保存] をクリックして変更を確定します。
お客様の注文テンプレートを編集する
テンプレートディレクトリーで、
customers/order.liquid
をクリックします。検索のキーボードショートカットを使用して、
<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
行を検索します。
<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
{%- if line_item.original_price != line_item.final_price -%}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<del>{{ line_item.original_price | money }}</del>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="order-discount">{{ line_item.final_price | money }}</span>
{%- else -%}
{{ line_item.original_price | money }}
{%- endif -%}
</td>
- ステップ2で見つかったコードを、次のコードに置き換えます。
<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
<div>
{%- if line_item.original_price != line_item.final_price -%}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<del>{{ line_item.original_price | money }}</del>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="order-discount">{{ line_item.final_price | money }}</span>
{%- else -%}
{{ line_item.original_price | money }}
{%- endif -%}
</div>
{%- if line_item.unit_price_measurement -%}
{% include 'product-unit-price', product_variant: line_item %}
{%- endif -%}
</td>
編集後、customers/order.liquid
ファイルは次のようになります。

- [保存] をクリックして変更を確定します。
テーマのJavaScriptファイルを編集
アセットディレクトリーで、
theme.js
をクリックします。検索のキーボードショートカットを使用して、
// Create item's data object and add to 'items' array
行を検索します。ステップ2で見つかった行の上に、次のコードを追加します。
var unitPrice = null;
if (cartItem.unit_price_measurement) {
unitPrice = {
addRefererenceValue:
cartItem.unit_price_measurement.reference_value !== 1,
price: theme.Currency.formatMoney(
cartItem.unit_price,
theme.moneyFormat
),
reference_value: cartItem.unit_price_measurement.reference_value,
reference_unit: cartItem.unit_price_measurement.reference_unit
};
}
編集後、結果は次のようになります。

検索のキーボードショートカットを使用して、行を検索します
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) {
return variant.unit_price_measurement.reference_value === 1
? variant.unit_price_measurement.reference_unit
: variant.unit_price_measurement.reference_value +
variant.unit_price_measurement.reference_unit;
},
編集後、結果は次のようになります。

-
検索のキーボードショートカットを使用して、
this._updateIncomingInfo(variant);
行を検索します。
} else {
// Variant is sold out, disable the submit button
cache.$addToCart.prop('disabled', true).addClass('btn--sold-out');
cache.$addToCartText.html(theme.strings.soldOut);
$(this.selectors.shopifyPaymentButton, this.$container).hide();
// Update when stock will be available
this._updateIncomingInfo(variant);
}
- ステップ10で見つかった終了
}
タグの下に、次のコードを追加します。
$(this.selectors.unitPriceContainer, this.$container).addClass('hide');
if (variant.unit_price_measurement) {
var $unitPrice = $(this.selectors.unitPrice, this.$container);
var $unitPriceBaseUnit = $(
this.selectors.unitPriceBaseUnit,
this.$container
);
$unitPrice.html(
theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat)
);
$unitPriceBaseUnit.html(this._getBaseUnit(variant));
$(this.selectors.unitPriceContainer, this.$container).removeClass(
'hide'
);
}
編集後、結果は次のようになります。

- [保存] をクリックして変更を確定します。
(オプション) 他の言語の翻訳を追加する
管理画面でテーマページに移動します。
[...] ボタン > [デフォルトテーマのコンテンツを編集する] の順にクリックします。
[テーマ言語を変更する] をクリックして、編集する言語を選択します。公開済みのテーマでのみ使用可能です。
検索フィールドに
Unit Price
を入力します。一般設定/アクセシビリティの単価区切りフィールドを更新します。
商品/商品の単価ラベルフィールドを更新します。
[保存] をクリックします。
Supply
Supplyの手順
8.3.0以降のバージョンでは、Supplyのテーマに単価表示が追加されました。テーマを最新バージョンに更新することができない場合は、以下のステップに従って、Supplyの旧バージョンに、単価のカスタマイズを適用してください。
商品単価スニペットを追加する
スニペットフォルダーを検索して展開します。
[新しいスニペットを追加する] を選択します。
名前
product-unit-price
を入力します。次のコードをコピーしてファイルに貼り付け、[保存] を選択します。
{%- unless available -%}
{%- if variant.title -%}
{%- assign available = variant.available -%}
{%- else -%}
{%- assign available = true -%}
{%- endif -%}
{%- endunless -%}
<div class="product-price-unit {% if available and variant.unit_price_measurement %} product-price-unit--available{% endif %}" data-unit-price-container>
<span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span>
{%- if available and variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span data-unit-price>{{ variant.unit_price | money }}</span>
{{- unit_price_separator -}}
<span data-unit-price-base-unit>{{- unit_price_base_unit -}}</span>
</div>
編集後、product-unit-price.liquid
ファイルは次のようになります。

- [保存] をクリックして変更を確定します。
特集商品のテンプレートを編集する
セクションフォルダーを検索して展開し、
featured-product.liquid
ファイルを選択します。検索のキーボードショートカットを使用して、ファイル内の
{% include 'price' with price %}
行を検索します。
<li>
<span id="productPrice-{{ section.id }}" class="h1">
{% include 'price' with price %}
</span>
</li>
- ステップ2からスニペットの終了
</span>
の下に、次のコードを追加します。
{% include 'product-unit-price' variant: variant %}
編集後、featured-product.liquid
ファイルは次のようになります。

- [保存] をクリックして変更を確定します。
商品テンプレートを編集する
セクションフォルダーを検索して展開し、
product-template.liquid
ファイルを選択します。検索のキーボードショートカットを使用して、ファイル内の
{% include 'price' with variant.price %}
行を検索します。
<li>
<span id="productPrice-{{ section.id }}" class="h1">
{% include 'price' with variant.price %}
</span>
</li>
- ステップ2から終了
</span>
の下に、次のコードを追加します。
{% include 'product-unit-price', variant: variant %}
編集後、product-template.liquid
ファイルは次のようになります。

- [保存] をクリックして変更を確定します。
商品のグリッドの商品スニペットを編集する
スニペットフォルダーを検索して展開し、
product-grid-item.liquid
ファイルを選択します。検索のキーボードショートカットを使用して、ファイル内の
{% if on_sale and section.settings.product_show_saved_amount %}
行を検索します。
{% if on_sale and section.settings.product_show_saved_amount %}
<span class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
{% assign compare_price = product.compare_at_price %}
{% assign product_price = product.price %}
{% include 'price-sale' %}
</span>
{% endif %}
</div>
- コードを次のスニペットに置き換えます。
{%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
{%- endif -%}
</div>
{% if on_sale and section.settings.product_show_saved_amount %}
<div class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
{% assign compare_price = product.compare_at_price %}
{% assign product_price = product.price %}
{% include 'price-sale' %}
</div>
{% endif %}
編集後、product-grid-item.liquid
ファイルは次のようになります。

- [保存] をクリックして変更を確定します。
商品リストアイテムスニペットを編集する
スニペットフォルダーを検索して展開し、
product-list-item.liquid
ファイルを選択します。検索のキーボードショートカットを使用して、ファイル内の
<div class="product-item--price text-center">
行を検索します。
<div class="product-item--price text-center">
<p class="h1 medium-down--left">
{% if on_sale %}
<span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
{% else %}
<span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
{% endif %}
{% include 'price' with product.price %}
{% if on_sale and section.settings.product_show_compare_at_price %}
<small>
<s>
<span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
{% include 'price' with product.compare_at_price %}
</s>
</small>
{% endif %}
</p>
{% if on_sale and section.settings.product_show_saved_amount %}
<span class="sale-tag medium-down--right{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
{% assign compare_price = product.compare_at_price %}
{% assign product_price = product.price %}
{% include 'price-sale' %}
</span>
- コードを次のスニペットに置き換えます。
<div class="text-center">
<div class="product-item--price">
<p class="h1 medium-down--left">
{% if on_sale %}
<span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
{% else %}
<span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
{% endif %}
{% include 'price' with product.price %}
{% if on_sale and section.settings.product_show_compare_at_price %}
<small>
<s>
<span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
{% include 'price' with product.compare_at_price %}
</s>
</small>
{% endif %}
</p>
{%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
{%- endif -%}
</div>
{% if on_sale and section.settings.product_show_saved_amount %}
<div class="sale-tag medium-down--right{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
{% assign compare_price = product.compare_at_price %}
{% assign product_price = product.price %}
{% include 'price-sale' %}
</div>
編集後、product-list-item.liquid
ファイルは次のようになります。

- [保存] をクリックして変更を確定します。
検索結果グリッドスニペットを編集する
スニペットフォルダーを検索して展開し、
search-result-grid.liquid
ファイルを選択します。検索のキーボードショートカットを使用して、ファイル内の
{% if on_sale and section.settings.product_show_saved_amount %}
行を検索します。
{% if on_sale and section.settings.product_show_saved_amount %}
<span class="sale-tag medium--right">
{% assign compare_price = item.compare_at_price %}
{% assign product_price = item.price %}
{% include 'price-sale' %}
</span>
{% endif %}
</div>
- コードを次のスニペットに置き換えます。
{%- if item.first_available_variant.available and item.first_available_variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: item.first_available_variant %}
{%- endif -%}
</div>
{% if on_sale and section.settings.product_show_saved_amount %}
<div class="sale-tag medium--right">
{% assign compare_price = item.compare_at_price %}
{% assign product_price = item.price %}
{% include 'price-sale' %}
</div>
{% endif %}
編集後、search-result-grid.liquid
ファイルは次のようになります。

- [保存] をクリックして変更を確定します。
カートテンプレートを編集する
テンプレートフォルダーを検索して展開し、
cart.liquid
ファイルを選択します。検索のキーボードショートカットを使用して、ファイル内の
<del class="cart-original-price order-discount--cart-price">
行を検索します。
<del class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</del>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
{%- else -%}
<span class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</span>
{%- endif -%}
- コードを次のスニペットに置き換えます。
<small><s class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</s></small>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
{%- else -%}
<span class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</span>
{%- endif -%}
{%- if item.variant.available and item.variant.unit_price_measurement -%}
{% include 'product-unit-price' variant: item, available: item.variant.available %}
{%- endif -%}
編集後、cart.liquid
ファイルは次のようになります。

- [保存] をクリックして変更を確定します。
注文テンプレートを編集する
テンプレートフォルダーを検索して展開し、
customers/order.liquid
ファイルを選択します。検索のキーボードショートカットを使用して、ファイル内の
<td class="text-right" data-label="customer.order.price">
行を検索します。
<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
{%- if line_item.original_price != line_item.final_price -%}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<del>{{ line_item.original_price | money }}</del>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="order-discount">{{ line_item.final_price | money }}</span>
{%- else -%}
{{ line_item.original_price | money }}
{%- endif -%}
</td>
- ステップ2から終了
</td>
の上に、次のコードを追加します。
{%- if line_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 {
@include clearfix;
.h1 {
margin-bottom: $gutter/2;
}
span {
line-height: 22px;
}
small {
white-space: nowrap;
}
}
- コードを次のスニペットに置き換えます。
.product-item--price {
@include clearfix;
margin-bottom: $gutter/2;
.h1 {
margin-bottom: 0;
}
span {
line-height: 22px;
}
small {
white-space: nowrap;
}
}
.product-price-unit {
display: none;
font-size: em(12px);
margin-right: 10px;
.cart-pricing &,
.order-table & {
margin-right: 0;
}
&.product-price-unit--available {
display: block;
}
}
編集後、theme.scss.liquid
ファイルは次のようになります。

- [保存] をクリックして変更を確定します。
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) {
var self = this;
if (variant) {
// Update variant image, if one is set
if (variant.featured_image) {
var newImg = variant.featured_image;
var $newImage = this.settings.selectors.$productImageWrapper.filter('[data-image-id="' + newImg.id + '"]');
var $otherImages = this.settings.selectors.$productImageWrapper.not('[data-image-id="' + newImg.id + '"]');
$newImage.removeClass('hide');
$otherImages.addClass('hide');
}
- ステップ2から
if (variant) {
の下に、次のコードを追加します。
// Update unit price, if one is set
var $unitPriceContainer = $(this.settings.selectors.unitPriceContainer, this.$container);
$unitPriceContainer.removeClass('product-price-unit--available');
if (variant.unit_price_measurement) {
var $unitPrice = $(this.settings.selectors.unitPrice, this.$container);
var $unitPriceBaseUnit = $(this.settings.selectors.unitPriceBaseUnit, this.$container);
$unitPrice.text(Shopify.formatMoney(variant.unit_price, moneyFormat));
$unitPriceBaseUnit.text(this.getBaseUnit(variant));
$unitPriceContainer.addClass('product-price-unit--available');
}
編集後、結果は次のようになります。

-
検索のキーボードショートカットを使用して、ファイル内の
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
行を検索します。
customPriceFormat = ' <span aria-hidden="true">' + customPrice + '</span>';
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
customPriceFormat += ' <span class="visually-hidden"><span class="visually-hidden">products.general.regular_price</span> ' + a11yComparePrice + '</span>';
customPriceFormat += ' <span class="visually-hidden"><span class="visually-hidden">products.general.sale_price</span> ' + a11yPrice + '</span>';
-
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
行を、次のスニペットに置き換えます。
customPriceFormat += ' <span aria-hidden="true"><small><s>' + comparePrice + '</s></small></span>';
編集後、結果は次のようになります。

-
検索のキーボードショートカットを使用して、ファイル内の
$(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) {
return variant.unit_price_measurement.reference_value === 1
? variant.unit_price_measurement.reference_unit
: variant.unit_price_measurement.reference_value +
variant.unit_price_measurement.reference_unit;
編集後、結果は次のようになります。

- [保存] をクリックして変更を確定します。
テーマの言語ファイルを編集する
ロケールフォルダーを検索して展開し、
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",
編集後、結果は次のようになります。

- [保存] をクリックして変更を確定します。
(オプション) 他の言語の翻訳を追加する
管理画面でテーマページに移動します。
[...] ボタン > [デフォルトテーマのコンテンツを編集する] の順にクリックします。
[テーマ言語を変更する] をクリックして、編集する言語を選択します。公開済みのテーマでのみ使用可能です。
入力バーで
Unit Price
を検索します。一般設定/アクセシビリティの単価区切りフィールドを更新します。
商品/商品の単価ラベルフィールドを更新します。
[保存] をクリックします。
注文通知に単価を表示する
デフォルトでは、注文確認通知には、機能がアクティブなときに単価が表示されます。
商品に単価を追加したものの、単価が注文確認通知に表示されていない場合は、手動でのテンプレート更新が必要な可能性があります。
手順
管理画面から、[設定] > [通知] に移動します。
[注文管理] セクションで、[注文の確認] をクリックします。
[コードを編集] をクリックします。
"order-list__item-price"
クラス内でテンプレートに以下のスニペットを追加します。
{%- if line_item.unit_price_measurement -%}
<div class="order-list__unit-price">
{{ line_item.unit_price | money }}/
{%- if line_item.unit_price_measurement.reference_value != 1 -%}
{{- line_item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ line_item.unit_price_measurement.reference_unit }}
</div>
{%- endif -%}

5*.* [保存] をクリックします。