【超簡単】Shopify[テーマ:Empire]で税込表記を追加する方法

悩む人
ストア担当者

Empireというテーマで商品の価格を税込表示させたいんだけど・・・

2021年4月から日本国内でモノやサービスの表示価格には「税抜き(税抜)」もしくは消費税を含めた価格を示す「税込み(税込)」の表示が義務付けられました。

そこで、これからShopifyでストアをオープンする方のために税込表示をする方法をお伝えします。

今回使用しているテーマはEmpireです。

ステップは下記の3つのみ。

  1. 言語を編集する→「Product Price」→「Tax line html」にコードを追加
  2. 商品詳細ページ:snipets/produt-price.liquidの税込表示のコードをコピーする
  3. コレクションの一覧ページに「税込」を追加する→liquidファイル:snipets/produt-grid-item.liquidに②のコードをコピーする

では、詳しく解説していきます!

とその前に、バックアップは必ず取っておいてください。

liquidファイルをカスタマイズする際は必ずバックアップを取ることをお忘れなく!

万が一不具合が起きても責任は取れません(T_T)自己責任でお願いしますね。

Shopify[テーマ:Empire]で税込表記を追加する

言語を編集する

1.オンラインストアをクリック
2.現在のテーマのアクションから「言語を編集する」をクリック

  • オンラインストアをクリック
  • 現在のテーマのアクションから「言語を編集する」をクリック

すると下記画像のように言語を編集するページが表示されます。

※今回はテーマ言語が「日本語」が前提で話を進めますね!(テーマ言語の変更は割愛します)

言語(日本語)が表示されたら

  1. 「Product price」タブをクリック
  2. 「Tax line html」を探す
  3. 下記のHTMLコードを追加する
<span class="price__include-tax">
 (税込)
</span>

class名は違うものでも構いません。

フォントサイズを小さくしたい場合などにclass名があるとCSSで編集する際に楽です。

最後に保存を忘れずに。

Shopify[テーマ:Empire]で税込表記のタグをコピー

次にコレクション一覧ページにも税込表記を追加するために、タグをコピーします。

  • オンラインストアをクリック
  • 現在のテーマのアクションから「コードを編集する」をクリック

使いまわし画像、ご容赦ください。。。

コードを編集する

商品詳細ページ:Snipets/product-price.liquid

liquidファイルを見つけてください。

商品ページ税込表示スクリーンショット

product-price.liquid‘を表示して

  • ページ内で「tax」と検索する(ショートカットキー;win:ctrl+F、mac:cmd+F)
  • 272行目にあるコードをコピーする
{{ 'product_price.price.tax_line_html' | t }}

Shopify[テーマ:Empire]で税込表記のタグを貼り付ける

次にコピーしたタグの貼り付けをします。

商品詳細ページ:Snipets/product-grid-item.liquid

コレクション一覧税込表示

302行目にある

<div class="productitem--info">

を探します。

{{ product_item_price }}

の下(307行目)に先程コピーしたタグを貼り付けます。

最後にファイルの保存を忘れずにしてくださいね。

あとは商品詳細ページとコレクション一覧ページをプレビューして、(税込)と表示されていることを確認してください。

これで作業は終わりです、お疲れさまでした。

まとめ

liquidコードを触ったことのない方でも割と簡単にできる内容です。

作業自体も10分もあればできますので、挑戦してみてください。

以上、Shopify[テーマ:Empire]で商品ページに税込表記を追加したい場合の、liquidファイルのカスタマイズについてでした!