[Shopify] 商品価格に税込表記を追加する方法（Debutテーマ）

Shopifyで商品の価格に税込表記を追加したい場合の、liquidファイルのカスタマイズ方法をまとめます。

まず、日本向けに販売する場合は、2021年3月末までに消費税込みの価格を表示する総額表示への対応が必要です。

Shopifyでは、管理画面の「税金」ページの「税の計算」にて総額表示に切り替えることが簡単にできますが、すでに税抜き価格で販売しているマーチャントさんは、全ての商品の価格をアップデートする必要があります。（参考以下）

総額表示への移行の準備を始めましょう — 設定

今回は、商品一覧や商品詳細ページの商品価格の後ろに、（税込）という「表記」を追加する方法となります。

Shopifyの商品の価格に税込表記を追加する場合に編集するファイル

商品価格のロジックは、コレクションページ（collection-template.liquid）や、商品詳細ページ（product-template.liquid）ではなく、以下になります。

商品詳細ページ： /snippets/product-price.liquid

コレクションページなどの商品一覧ページ： /snippets/product-price-listing.liquid

それではそれぞれ見ていきます。

Shopifyの商品詳細ページに税込表示を追加する

まず /snippets/product-price.liquid を開き、販売価格の箇所を探します。{{ money_price }} の2箇所になります。

通常時の価格

変更前は以下。

<span class="price-item price-item--regular" data-regular-price>
  {{ money_price }}
</span>

変更後は以下。（spanタグはなくても良いですが、少し文字サイズを小さくしたいなど見た目を調整したい場合は必要です）

<span class="price-item price-item--regular" data-regular-price>
  {{ money_price }}{%- if shop.taxes_included -%}&nbsp;<span class="include-tax">({{ 'products.product.include_taxes' | t }})</span>{%- endif -%}
</span>

これで以下のように(税込)と表示されます。

セール時の価格

変更前は以下。

<span class="price-item price-item--sale" data-sale-price>
  {{ money_price }}
</span>

変更後は以下。

<span class="price-item price-item--sale" data-sale-price>
  {{ money_price }}{%- if shop.taxes_included -%}&nbsp;<span class="include-tax">({{ 'products.product.include_taxes' | t }})</span>{%- endif -%}
</span>

これでセール時も以下のように(税込)と表示されます。

ちなみにですが、以下はセール時の割引前価格ですので、こちらは変更不要です。

<s class="price-item price-item--regular" data-regular-price>
  {{ compare_at_price | money }}
</s>

こちらも入れてしまうと、セール時に以下のようになってしまいます。

5,000円(税込) 4,000円 (税込)

Shopifyのコレクションページ（商品一覧ページ）に税込表示を追加する

こちらはまず /snippets/product-price-listing.liquid を開き、販売価格の箇所を探します。こちらも {{ money_price }} の2箇所になります。

通常時の価格

変更前は以下。

<span class="price-item price-item--regular">
  {%- if product.price_varies -%}
    {{ 'products.product.from_lowest_price_html' | t: lowest_price: money_price }}
  {%- else -%}
    {{ money_price }}
  {%- endif -%}
</span>

変更後は以下。

<span class="price-item price-item--regular">
  {%- if product.price_varies -%}
    {{ 'products.product.from_lowest_price_html' | t: lowest_price: money_price }}
  {%- else -%}
    {{ money_price }}{%- if shop.taxes_included -%}&nbsp;<span class="include-tax">({{ 'products.product.include_taxes' | t }})</span>{%- endif -%}
  {%- endif -%}
</span>

これで以下のように(税込)と表示されます。

セール時の価格

変更前は以下。

<span class="price-item price-item--sale">
  {%- if product.price_varies -%}
    {{ 'products.product.from_lowest_price_html' | t: lowest_price: money_price }}
  {%- else -%}
    {{ money_price }}
  {%- endif -%}
</span>

変更後は以下。

<span class="price-item price-item--sale">
  {%- if product.price_varies -%}
    {{ 'products.product.from_lowest_price_html' | t: lowest_price: money_price }}
  {%- else -%}
    {{ money_price }}{%- if shop.taxes_included -%}&nbsp;<span class="include-tax">({{ 'products.product.include_taxes' | t }})</span>{%- endif -%}
  {%- endif -%}
</span>

これでセール時も以下のように(税込)と表示されます。

税込表記のスタイルを変更する

（税込）の文字サイズやウェイトなどを変更したい場合は、spanタグにつけたクラスに対してCSSを追加してください。

例

/* include tax text */
.price .include-tax {
    font-size: calc(var(--font-size-base) * 0.05em);
    font-weight: normal;
}

税込のラベル（文言）を変更する

税込という文言をTax Inなどの別の文言に変更したい場合は、翻訳から変更ができます。

管理画面メニューの、オンラインストア→アクション→言語を編集する
から日本語の翻訳画面に遷移し、税込で検索し以下の文言を変更し、保存します。

これで今回変更したページの文言が全て変更されます。

以上です！