【徹底解説】Shopify アプリ「シンプル税込税抜併記｜消費税込み・税別表示・軽減税率にも対応」でできること

【徹底解説】Shopify アプリ「シンプル税込税抜併記｜消費税込み・税別表示・軽減税率にも対応」でできること

日本のネットショップは、消費者に見せる価格を税込の総額で表示する決まりがあります。Shopify でも「価格に税金を含める」設定にしておけば、商品ページには税込価格が並びます。ところが、そうすると今度は税抜の本体価格がどこにも出なくなります。法人のお客様や仕入れで購入する方からは「見積もりに使うので本体価格を教えてほしい」と問い合わせが来て、そのたびにスタッフが電卓をたたく、という光景は珍しくありません。

さらに食品や酒類を扱うお店では、軽減税率の 8% と標準税率の 10% が一つのストアの中に混ざります。お弁当は 8%、保冷バッグは 10% という具合に、商品ごとに税率が違うので、税抜価格を手で書き添えるやり方ではすぐに管理しきれなくなります。

この記事では、こうした悩みを解消する Shopify アプリ「シンプル税込税抜併記｜消費税込み・税別表示・軽減税率にも対応」（英語名: UR: Dual Price Tax Display）を、管理画面の画面ごとに、設定項目を一つずつ取り上げて解説します。インストールの手順だけでなく、画面には書かれていない細かな挙動や、コードで同じことを自作した場合の手間、海外製の類似アプリとの違いまでまとめました。導入を検討している方も、すでに入れていて設定に迷っている方も、必要な章から読み進めてください。

税込・税抜を並べて見せるアプリの正体

シンプル税込税抜併記｜消費税込み・税別表示・軽減税率にも対応 は、ストアの価格表示に「もう一方の価格」を添えるアプリです。税込で表示しているストアなら税抜価格を、税抜で表示しているストアなら税込価格を、テーマが出している価格のそばに自動で表示します。この「二つの価格を並べる」表示のことを、この記事では併記と呼びます。

併記が出る場所は、商品ページと、コレクションページや検索結果に並ぶ商品カードの二か所です。商品ページではバリエーション（サイズや色）を切り替えると、併記の金額も追いかけて変わります。一覧では、並んでいる商品それぞれの税率で計算されます。

大事な前提として、このアプリは表示のための計算しか行いません。チェックアウトで実際に請求される金額や、Shopify の税計算そのものには一切関わりません。管理画面にも「このアプリは表示のための計算のみを行います。実際に請求される金額は Shopify の税設定に従います。」と明記されています。

Shopify の税金まわりのアプリには、税計算そのものを置き換えるタイプもありますが、このアプリはそうではありません。あくまで「お客様の目に入る価格表示」を補うものなので、会計や決済の仕組みを変える心配をせずに導入できます。

もう一つの特徴は、テーマのコードを書き換えない点です。表示にはアプリブロックと埋め込みアプリという、Shopify が用意している正規の仕組みだけを使っています。アンインストールすれば併記は表示されなくなり、テーマにアプリの痕跡が残ることもありません。

導入すると何が楽になるか

総額表示を守りながら本体価格も伝えられる

国税庁の総額表示の説明（No.6902）では、税込価格を表示したうえで税抜価格を併記することは差し支えないとされています。このアプリの表示は、その考え方にそのまま沿っています。税込価格を消さずに、税抜価格を横に添えるだけなので、総額表示の義務を守ったまま、法人のお客様が知りたい本体価格も伝えられます。

これまで問い合わせのたびに税抜価格を計算して返していたストアでは、その作業自体がなくなります。見積もりのために商品ページを開いたお客様は、その場で本体価格を確かめられるので、問い合わせを待つ時間も省けます。

8% と 10% が混ざっても商品ごとに正しく計算できる

標準税率と軽減税率の二つを登録しておき、軽減税率を当てる商品をコレクション、タグ、商品の個別指定のいずれかで決めます。三つの方法は組み合わせて使えるので、「食品コレクションはすべて 8%、ただし保冷バッグだけは 10%」のような例外も表現できます。

一覧ページでも、並んでいる商品ごとに税率を判定して計算します。コレクションページに 8% の食品と 10% の雑貨が混在していても、それぞれのカードに正しい併記が出ます。

国税庁の例に沿った文言から選べる

併記の文言は、「（税抜価格 ¥10,000）」「（うち消費税額等 ¥1,000）」「（税抜価格 ¥10,000、消費税率 10％）」のように、国税庁が例として示している形から選べます。どんな書き方なら誤解を招かないかを自分で考えなくても、選ぶだけで日本の商習慣に合った表記になります。海外製の類似アプリには、この日本向けの文言を用意しているものが見当たりません。

表示が速く、テーマを汚さない

商品ページの併記は、ページが表示される時点で最初から描画されます。表示のたびに外部のサーバーへ設定を問い合わせる作りではないので、サーバーの応答待ちで表示が遅れたり、応答が無くて併記が消えたりすることがありません。一覧の商品カードへの併記は JavaScript で差し込みますが、税率や設定はあらかじめページの中に埋め込まれていて、その場で計算するだけです。バリエーションの切り替えや一覧のページ送りにも、この仕組みで追いかけます。

また、テーマの Liquid ファイルを直接編集しないため、テーマを更新しても併記が消えたり、コードが壊れたりする心配がありません。アプリを外したときにテーマのコードを掃除する必要もありません。

お客様の情報に触れない

アプリが求める権限は、商品の読み取りと書き込み、マーケットの読み取り、テーマの読み取りだけです。お客様の個人情報や注文のデータには一切アクセスしません。併記に使う国の判定も Shopify が持っている情報だけで行い、お客様の情報を外部のサービスへ送ることもありません。

20 言語の管理画面と多言語のストアフロント

管理画面は日本語を含む 20 言語で使えます。ストアフロントの併記は、お客様が見ている言語で表示されます。英語でストアを見ているお客様には「(excl. tax $10.00)」のように英語で、日本語のお客様には日本語で出るので、越境 EC をしているストアでもそのまま使えます。

導入前に知っておきたい制約

便利なアプリですが、できないこともあります。あとから「思っていたのと違った」とならないよう、先に正直にまとめておきます。

• カートとチェックアウトには出ません。 併記が出るのは商品ページと、コレクション・検索結果の一覧だけです。チェックアウトは Shopify の仕様上、アプリの表示を足すことができません。カートの併記は現時点では対象外です
• 税率は自分で入力する必要があります。 Shopify は税率をストアフロントに公開していないため、Shopify の税設定から自動で読み取ることができません。税率が変わったときは、Shopify とアプリの両方を直す必要があります
• 無限スクロールで後から出てきた商品には、併記が出ないことがあります。 軽減税率を使っているストアで、「さらに読み込む」ボタンや無限スクロールで後から追加された商品は、アプリがその商品の税率を判断できません。誤った金額を出すよりはと、あえて出さない作りになっています。ページ番号で切り替えるテーマ（多くのテーマの初期設定）ではこの制限はありません
• 管理画面で一度保存しないと何も出ません。 インストールしてテーマに追加しても、管理画面の設定を一度も保存していなければストアには何も表示されません
• 併記の見た目の調整はテーマエディタで行います。 計算の設定（主従・文言・税率）はアプリの管理画面、文字の大きさや色はテーマエディタ、と役割が分かれています。慣れるまでは、どちらで何を変えるのか迷うかもしれません

どれも仕組み上の理由があっての制約で、表示すべきでない場面で誤った金額を出さないための判断でもあります。カートやチェックアウトまで併記が必要なストアでは、この点を踏まえて検討してください。

料金プラン

料金は Basic Plan の一つだけで、機能の制限はありません。

• 月払い… 月額 $4.99
• 年払い… 年額 $49.99（月払いより実質 2 か月分お得）
• 無料体験… インストールから 7 日間は無料

海外製の類似アプリの多くは月額 $4〜$8 ほどで、そのちょうど真ん中の価格帯です。プランによって使える機能が変わることはなく、軽減税率・市場ごとの税率・切り替えボタンまで、すべての機能を最初から使えます。料金の最新情報は Shopify App Store のアプリページで確認してください。

インストール

インストールは、Shopify アプリに共通の流れで進みます。

1. Shopify 管理画面の左下にある「設定」を開きます。

2. 「アプリと販売チャネル」を開き、App Store へのリンクをたどります（このアプリのページは Shopify App Store から直接開くこともできます）。

3. 検索窓で「UR: Dual Price Tax Display」を検索し、一覧からアプリを開きます。

4. アプリの詳細ページで「インストール」を押し、権限の確認画面でもう一度「インストール」を押します。

権限の確認画面には、商品の読み取りと書き込み、マーケットの読み取り、テーマの読み取りが並びます。商品の書き込みは、軽減税率の対象にした商品へ目印を付けるために使います。マーケットは市場ごとの税率の入力欄を並べるため、テーマは追加済みかどうかを確かめるためです。

インストールが終わると、アプリの管理画面が開きます。ここからの章では、その管理画面を画面ごとに見ていきます。より詳しい操作手順は、公式のご利用ガイド「Shopifyで税込価格と税抜価格を併記して軽減税率にも対応できるアプリについて徹底解説｜ご利用ガイド」にもまとまっています。

アプリ管理画面の構成

左のメニューに並ぶのは、「併記表示の設定」「税率の設定」「設定」の三つの画面です。アプリを開いたときに最初に表示されるのが「併記表示の設定」で、ここが主な作業場所になります。

三つの画面の役割は次のとおりです。

• 併記表示の設定… 併記を出すかどうか、どちらの価格を主にするか、どんな文言で出すか、端数をどう丸めるかを決める画面
• 税率の設定… 標準税率と軽減税率、市場ごとの税率、軽減税率を当てる商品を決める画面
• 設定… テーマに併記を追加する入口と、管理画面の言語設定がある画面

このほかに「よくある質問」の画面があります。管理画面を日本語で表示していて、よくある質問の記事が登録されているときだけ、左のメニューに現れます。画面の右下には、どの画面にも「ご利用ガイドはこちら」のリンクが出ていて、困ったときはそこからガイドを開けます。

テーマにまだ併記を追加していない場合は、「併記表示の設定」の上部に黄色いお知らせが出ます。「商品ページにアプリブロックが追加されていません。」「一覧用のアプリ埋め込みが有効になっていません。」のうち足りないほうが表示され、「設定を開く」を押すと「設定」画面へ移動します。両方とも追加済みなら、このお知らせは消えます。

各画面の説明

ここからは、三つの画面の設定項目を一つずつ取り上げます。それぞれ「何を決める項目か」「選択肢と初期値」「変えるとどうなるか」の順に説明します。

併記表示の設定｜併記を表示する

画面の一番上にあるチェックボックスで、併記を出すかどうかを切り替えます。初期状態はオンです。チェックを外して保存すると、商品ページと一覧のすべての場所から併記が消えます。

テーマエディタでブロックを外す作業をしなくても、ここ一か所で止められるのが便利な点です。セール期間中だけ表示を簡素にしたい、テーマの見た目を調整している間は一旦隠しておきたい、といったときに使えます。オンに戻して保存すれば、テーマ側の設定はそのままで元どおりに表示されます。

併記表示の設定｜表示のプレビュー

いまの設定で併記がどう見えるかを、保存する前に確かめられる欄です。「税込表示のストアの場合」と「税抜表示のストアの場合」の二通りが並びます。

二通り出るのは、ストアが税込で表示されるか税抜で表示されるかが、お客様の国（Shopify のマーケット）によって変わるためです。日本のお客様には税込で表示していても、海外のマーケットでは税抜で表示している、というストアは珍しくありません。プレビューは標準税率と 1,000（ストアの通貨）の価格を例にしており、下の選択肢を変えるとその場で書き換わります。

併記表示の設定｜主にする価格

テーマが出している価格とアプリが添える価格のうち、どちらを「主」として扱うかを決めます。選択肢は三つです。

• ストアの税表示設定に合わせる（推奨）… 初期値です。税込で表示しているお客様には税込を主にして税抜を添え、税抜で表示しているお客様には税抜を主にして税込を添えます
• 税込を主にする… お客様の国に関係なく、常に税込を主として扱います
• 税抜を主にする… 常に税抜を主として扱います

テーマが出している価格そのものは Shopify の税設定で決まり、アプリはそれを書き換えません。そのため、テーマの価格のすぐ下に併記だけを出す使い方（後述する表示の形「もう一方の価格だけ表示」）では、「ストアの税表示設定に合わせる（推奨）」のままにしておくのが安全です。ほかを選ぶと、テーマの価格と同じ金額を併記してしまう場合があります。

併記表示の設定｜併記の文言と独自の文言

併記をどの文言で出すかを選びます。日本語のストアでは、税込が主の場合に次のように表示されます。

• もう一方の価格を併記する（初期値）… （税抜価格 ¥10,000）
• 消費税額を併記する… （うち消費税額等 ¥1,000）
• もう一方の価格と税率を併記する… （税抜価格 ¥10,000、消費税率 10％）
• 独自の文言にする… 自分で入力した文言

上の三つは、国税庁が総額表示の例として示している形に沿っています。税抜が主の場合は「（税込価格 ¥11,000）」のように、もう一方が税込価格に入れ替わります。

「独自の文言にする」を選ぶと、その下に「独自の文言」の入力欄が現れます。文言の中に記号を書くと、実際の値に置き換わります。

• {price}… 主の価格
• {other}… もう一方の価格（税込が主なら税抜価格、税抜が主なら税込価格）
• {tax}… 消費税額
• {rate}… 税率

ここで注意したいのが {other} の中身です。税込で表示されるお客様には税抜価格、税抜で表示されるお客様には税込価格が入ります。「本体価格 {other}」と書いてしまうと、税抜で表示される国のお客様には税込価格が「本体価格」として出てしまいます。どちらの国でも正しく読める文言にしたいなら、「（消費税 {tax}・税率 {rate}％）」のように {tax} と {rate} だけで組み立てるのがおすすめです。

独自の文言を空欄のまま保存しようとすると、「独自の文言を入力してください」と表示されて保存が止まります。空の文言で保存すると併記が消えてしまうため、その手前で止める作りになっています。

併記表示の設定｜端数の処理

税込から税抜へ、あるいは税抜から税込へ計算したときに出る、通貨の最小単位未満の端数をどう丸めるかを選びます。選択肢は「四捨五入」（初期値）、「切り捨て」、「切り上げ」の三つです。

たとえば税込 1,000 円の商品を税率 10% で割り戻すと、税抜価格は 909.09… 円になります。四捨五入なら 909 円、切り上げなら 910 円です。消費税の端数処理はお店ごとに方針が違うので、請求書や会計ソフトで使っている方針に合わせておくと、表示と帳票の金額がそろいます。「併記の金額が 1 円ずれる」と感じたら、まずここを見直してください。

併記表示の設定｜買い手の切り替えボタンと保存

「買い手が税込・税抜を切り替えられるようにする」をオンにすると、商品ページの併記の横に「税込／税抜」のボタンが出て、お客様が主と従を入れ替えられるようになります。初期値はオフです。

• 切り替えても、税込価格は必ずどちらかに表示されるため、総額表示の義務を満たせない状態にはなりません
• ボタンが出るのは、テーマエディタでブロックの表示の形を「主従そろえて表示」にしたときだけです。「もう一方の価格だけ表示」では、テーマが出している主の価格をアプリが入れ替えられないため、ボタンは出ません
• ボタンは商品ページのアプリブロックだけに出ます。一覧の商品カードや、埋め込みアプリが代わりに出す商品ページの併記には出ません

画面の一番下にある「保存する」を押すと設定が保存され、「保存しました」と表示されます。その下には、表示のための計算だけを行う旨の注意書きがあります。

ここで一つ、画面からは分かりにくい挙動があります。アプリの設定は、保存した時点で初めてストアに届きます。インストールした直後に初期値のままでよいと思って保存を押さずにいると、テーマに追加してもストアには何も出ません。テーマエディタのプレビューには「アプリの管理画面で税率を設定してください。」と表示されます。設定を変えるつもりがなくても、この画面で一度は「保存する」を押してください。

税率の設定｜税率

左のメニューの「税率の設定」を開くと、最初に「税率」のカードがあります。カードの説明にあるとおり、Shopify は税率をストアフロントに公開していないので、併記の計算に使う税率はここで入力します。

• 標準税率（％）… ほとんどの商品に使う税率です。初期値は 10 です
• 軽減税率を使う… チェックを入れると、軽減税率の入力欄と「軽減税率の対象」カードが現れます。初期値はオフです
• 軽減税率（％）… 軽減税率の対象にした商品に使う税率です。初期値は 8 です

税率は 0〜100 の範囲で、小数第 1 位まで入力できます。8.5 のような値も使えますが、8.55 のように小数第 2 位まで入れると「小数第1位までで入力してください」と表示されて保存できません。「軽減税率を使う」にチェックを入れたまま軽減税率を空欄にした場合も、「軽減税率を入力してください」と止められます。

税率の設定｜市場ごとの税率

Shopify のマーケット機能でほかの国にも販売しているときに、国（市場）ごとに税率を変えられる欄です。マーケットごとに「標準税率（％）」の欄が並び、軽減税率を使っている場合は「軽減税率（％）」の欄も並びます。

空欄のままにすると、上の「税率」で入れた値が使われます。日本は 10% と 8%、ドイツ向けのマーケットだけ 19% と 7% にする、といった使い方ができます。どの市場の税率を使うかは、お客様がいま見ている市場で自動的に決まります。

画面に並ぶマーケットは最大 50 件です。51 件以上のマーケットを持つストアでは、画面に出ていないマーケットの設定は、保存しても消えずにそのまま残ります。

税率の設定｜軽減税率の対象

「軽減税率を使う」にチェックを入れたときだけ現れるカードで、軽減税率を当てる商品を三つの方法で指定します。

判定の順番は画面にも書かれているとおり、商品の個別指定が最優先で、次にコレクション、最後にタグです。どれにも当てはまらない商品は標準税率で計算されます。

コレクションで指定… 「コレクションを選ぶ」を押すと、Shopify の「コレクションを追加」画面が開きます。軽減税率にしたいコレクションにチェックを入れて「追加」を押すと、コレクション名が並びます。名前の横の「×」で外せます。選んだコレクションの商品はすべて軽減税率になり、あとからコレクションに足した商品も自動で軽減税率になります。「食品」「飲料」のようなコレクションをすでに作っているなら、いちばん手軽な方法です。

タグで指定… 入力欄に商品タグを入力すると「追加 〇〇」という候補が出るので、それを選んで追加します。大文字と小文字は区別しないので、「Food」と「food」は同じタグとして扱われます。候補に出るのはこの画面で一度登録したタグだけで、ストアにあるタグの一覧が出てくるわけではありません。商品に付けているタグと同じ文字を正確に入力してください。

商品を個別に指定… 「商品を選ぶ」を押すと、Shopify の「商品を追加」画面が開きます。コレクションやタグでまとめられない商品を一つずつ足したいときに使います。

ここで保存した商品には、Shopify の商品編集画面のメタフィールドに「Tax class (Dual Price Display)」という欄ができます。値は reduced（軽減税率）と standard（標準税率）から選べます。この欄は Shopify の商品一括編集や CSV でも扱えるので、商品数が多いストアでは、アプリの画面を使わずにまとめて設定することもできます。

とくに便利なのが standard の使い方です。商品編集画面で standard を選んだ商品は、軽減税率のコレクションやタグに入っていても標準税率で計算されます。「食品コレクションに入っているけれど、保冷バッグだけは 10%」という例外は、この方法で作ります。商品編集画面で指定を外した商品は、次にこの画面を開いたときに一覧から自然に消えます。

税率の設定｜保存するときの挙動

画面の一番下の「保存する」を押すと、税率と対象がまとめて保存され、「保存しました」と表示されます。

画面からは見えない点として、軽減税率の対象にした商品への目印は 25 件ずつ書き込まれます。商品数が多いと保存に少し時間がかかるのはこのためです。途中で失敗した場合は「商品の税率区分の保存に失敗しました」と表示されますが、もう一度「保存する」を押せば全件がそろいます。

設定｜テーマへの追加

左のメニューの「設定」を開くと、最初に「テーマへの追加」のカードがあります。併記をテーマに追加する入口はここに集約されています。

• テーマを選択… 追加する先のテーマを選びます。初期状態では公開中のテーマが選ばれていて、名前の後ろに「（公開中のテーマ）」と付きます。公開前のテーマで試したいときはここで切り替えます
• 商品ページに追加… 押すとテーマエディタが新しいタブで開き、商品ページのテンプレートの商品情報セクションに「税込・税抜 併記表示」ブロックが追加された状態になります
• コレクションページの商品カードに追加… 押すとテーマエディタがコレクションページで開き、「埋め込みアプリ」でこのアプリがオンになった状態になります。コレクション一覧と検索結果の商品カードに併記が出るようになります
• テーマをプレビュー… 選んだテーマの商品ページを新しいタブでプレビューします

どちらのボタンも、テーマエディタの右上の「保存」を押すまでは確定しません。オンに見えていても、保存していなければ公開中のストアには反映されていない点に注意してください。

もう一つ注意したいのが、「商品ページに追加」は押すたびにブロックが一つずつ増える点です。二回押して両方保存すると、商品ページに併記が二行出ます。二重に出てしまったときは、テーマエディタで余分なブロックを選んで削除し、保存し直してください。テーマのバージョンによっては「テーマを選択」が空欄になることがあり、その場合はテーマエディタから手動で追加します。

設定｜言語設定

アプリの管理画面の表示言語を選べる欄です。「言語を選択」で言語を選んで「変更する」を押すと切り替わります。日本語・英語・ドイツ語・フランス語など 20 言語に対応しています。

この設定は、いま使っているブラウザに保存されます。別のパソコンや別のブラウザで管理画面を開いたときは、改めて選び直してください。また、管理画面の言語を変えても、ストアフロントの併記の言語は変わりません。ストアフロントは、あくまでお客様が見ている言語で表示されます。

設定｜おすすめアプリ

言語設定の下には、同じ開発元の Shopify アプリが並びます。併記の設定には関係のない欄なので、不要なら右上の「×」で閉じられます。ストア運営に役立つアプリを探すときの参考にしてください。

テーマへの追加

ここからはテーマエディタ側の話です。併記を出す部品は二つあり、それぞれ置き場所が違います。

• 税込・税抜 併記表示（アプリブロック）… 商品ページに出す部品。商品ページのテンプレートの、商品情報セクションの中に置きます
• 税込・税抜 併記表示（埋め込みアプリ）… コレクション・検索結果の一覧に出す部品。テーマエディタ左上の「埋め込みアプリ」でオンにします

テーマエディタ上部のページ選択で「商品」から「デフォルトの商品」を開くと、左のテンプレートの「商品情報」の中にブロックがあります。

ブロックは左パネルでドラッグして動かせます。「商品価格」のすぐ下に置くと、価格と併記がひとまとまりに見えて読みやすくなります。手動で追加する場合は、「商品情報」の「ブロックを追加」から「アプリ」の「税込・税抜 併記表示」を選びます。

このブロックは商品ページ専用です。ホームページの「特集コレクション」の商品カードなど、商品ページ以外に置いても商品を特定できないため何も表示されません。テーマエディタでは「このブロックは商品ページに置いてください。一覧の商品カードの中では商品を特定できません。」と案内が出ます。一覧に併記を出したいときは、埋め込みアプリを使います。

埋め込みアプリは、テーマエディタの左上にあるアイコンから開きます。「税込・税抜 併記表示」の右のスイッチがオンなら有効です。

ストアフロントの見た目を変える

併記の見た目は、テーマエディタのブロックと埋め込みアプリの設定で調整します。それぞれの設定項目を順に見ていきます。

商品ページのブロック｜表示設定

表示の形では、併記をどう出すかを選びます。

• もう一方の価格だけ表示（初期値）… 「（税抜価格 ¥10,000）」のように、もう一方の価格だけを出します。テーマの価格のすぐ下に置くときに向いています
• 主従そろえて表示… 「¥11,000（税抜価格 ¥10,000）」のように、主の価格ともう一方をまとめて一行で出します。価格から離れた場所に置くときや、総額をもう一度はっきり見せたいときに向いています

管理画面で買い手の切り替えボタンをオンにしていても、ボタンが出るのは主従そろえて表示のときだけです。設定パネルにも「買い手の切替トグルは「主従そろえて表示」のときだけ効きます。」と補足されています。

商品ページのブロック｜文字設定

• 文字の大きさ（初期値 14px）… 10〜24px の範囲を 1px 刻みで選べます
• テーマの文字色を使う（初期値オン）… テーマの文字色をそのまま使います。暗い背景のテーマでも読める色になります
• 文字の色（初期値 #6B7280 のグレー）… テーマの文字色を使う設定をオフにしたときだけ効きます
• テキスト配置（初期値は左揃え）… 左揃え・中央揃え・右揃えから選びます。テーマの価格が中央揃えなら、併記も中央揃えに合わせます

併記を価格より控えめに見せたいときは、文字の大きさを価格より 2〜4px 小さくし、グレー系の色にするとバランスが取れます。

商品ページのブロック｜余白設定と追加設定

• 上部余白（初期値 4px）… 併記の上の余白で、0〜40px を 1px 刻みで選べます
• 下部余白（初期値 0px）… 併記の下の余白で、範囲は上部余白と同じです
• 追加のCSS… さらに細かく見た目を変えたいときに CSS を書く欄です。ブラウザの検証機能で併記の要素のクラス名（sa231-dp など）を確かめてから書きます

追加のCSS に入力した内容のうち、< の文字だけは安全のため取り除かれます。CSS として普通に使う { } や > はそのまま効きます。

埋め込みアプリ｜一覧の併記の設定

埋め込みアプリの名前の左にある「∨」を押すと、一覧用の設定が開きます。

• コレクション・検索の一覧に表示（初期値オン）… コレクションページと検索結果の商品カードに併記を出します
• 商品ページにも表示（初期値オン）… 商品ページにアプリブロックを置けないテーマのための予備です。アプリブロックがあるページではブロックが優先され、二重には表示されません
• 文字の大きさ（初期値 13px）… 商品カードは表示幅が狭いため、商品ページより 1px 小さい値が初期値です
• テーマの文字色を使うと文字の色… 商品ページのブロックと同じ働きです
• 追加のCSS… 一覧の併記だけを CSS で上書きしたいときに使います

設定を保存すると、ストアフロントでは次のように表示されます。下の画像は税抜表示・米ドルのストアで撮影したもので、税込価格が併記されています。日本語・税込表示のストアでは「（税抜価格 ¥10,000）」のように出ます。

コードで自作する場合

アプリを使わずに、テーマのコードを編集して税抜価格を併記することもできます。どのくらいの手間になるのかを、実際のコードで見てみます。

まず商品ページです。商品情報を描画しているテーマのセクション（Dawn 系なら main-product.liquid など）の価格の近くに、次のような Liquid を差し込みます。税率をタグで判定し、税込価格から税抜価格を割り戻して表示する例です。

{%- comment -%} 商品ページで、税込価格から税抜価格を割り戻して表示する例 {%- endcomment -%}
{%- assign rate = 10 -%}
{%- if product.tags contains '軽減税率' -%}
  {%- assign rate = 8 -%}
{%- endif -%}
{%- assign variant = product.selected_or_first_available_variant -%}
{%- assign denom = 100 | plus: rate -%}
{%- if cart.taxes_included -%}
  {%- assign excluded = variant.price | times: 100.0 | divided_by: denom | round -%}
  <p class="my-dual-price">（税抜価格 {{ excluded | money }}）</p>
{%- else -%}
  {%- assign included = variant.price | times: denom | divided_by: 100.0 | round -%}
  <p class="my-dual-price">（税込価格 {{ included | money }}）</p>
{%- endif -%}

variant.price は通貨の最小単位（円なら円、ドルならセント）の整数で入っているので、小数を含む 100.0 を掛けてから割り、最後に round で四捨五入しています。税込かどうかは cart.taxes_included で判定しています。古い記事でよく見かける shop.taxes_included は非推奨で、お客様の国によって税込・税抜が変わるストアでは正しく判定できません。また、Liquid の contains は大文字と小文字を区別するため、タグの表記ゆれがあると判定が外れます。

このコードは、ページを開いた時点のバリエーションでしか計算しません。お客様がサイズや色を切り替えたときに併記も追いかけさせるには、JavaScript が必要です。

// バリエーションが切り替わったら、併記を計算し直す例
document.addEventListener('change', async (event) => {
  const input = event.target.closest('form[action*="/cart/add"]')?.querySelector('[name="id"]');
  if (!input) return;
  const product = await fetch(`${location.pathname.split('?')[0]}.js`).then((r) => r.json());
  const variant = product.variants.find((v) => String(v.id) === input.value);
  const rate = product.tags.includes('軽減税率') ? 8 : 10;
  const excluded = Math.round((variant.price * 100) / (100 + rate));
  document.querySelector('.my-dual-price').textContent =
    `（税抜価格 ${(excluded / 100).toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })}）`;
});

フォームの変化を拾って商品の JSON を取り直し、選ばれたバリエーションの価格で計算し直しています。ここでも税率はタグで決め打ちで、税込か税抜かの判定や、通貨ごとの桁の扱いは省いています。実際に運用するなら、テーマごとに違うバリエーション切り替えの仕組みに合わせる必要があり、テーマを更新するたびに動作を確かめ直すことになります。

一覧の商品カードに併記を出すには、さらにテーマの商品カードのスニペット（card-product.liquid など）も編集する必要があります。コレクションの判定や、軽減税率の例外（食品コレクションの中の保冷バッグ）まで含めると、条件分岐はどんどん増えていきます。国ごとの税率、国税庁の例に沿った文言の切り替え、端数処理の選択、多言語対応まで自作するとなると、小さなアプリを一本作るのとほとんど変わりません。

加えて、テーマを直接編集したコードは、テーマを入れ替えたり大きく更新したりしたときに移し替える必要があります。こうした保守の手間を考えると、月額 $4.99 で最初からすべてそろっていて、テーマのコードに触れずに済むアプリを使うほうが、多くのストアにとって現実的です。

海外製の類似アプリとの比較

税込・税抜の併記は、欧州の付加価値税（VAT）を扱うストア向けに、海外製のアプリがいくつか出ています。代表的なものを、各アプリの App Store の掲載情報（2026 年 9 月時点）で比べます。

Singleton | Dual Price Display… 2018 年からある、この分野で最もレビューの多いアプリです。評価 4.9（191 件）、料金は月額 $14.99 と $29.99 のプランがあります。顧客タグやベンダー別の出し分けなど機能は豊富ですが、管理画面と掲載は英語のみです。

Dual Price Display by T2… 評価 4.9（10 件）、月額 $4.49 と $6.99、7 日間の無料体験があります。税込・税抜の表示切り替えを持つアプリで、商品別の税率は上位プランで使えます。こちらも日本語には翻訳されていません。

EX B2B VAT Dual Price Display（Extendons）… 評価 4.9（22 件）、無料プランがあり、有料は月額 $5.99 と $7.99 です。商品・コレクション・商品タグ・顧客タグでの指定に対応しています。管理画面は英語です。

CI VAT Dual Price… 評価 5.0（1 件）、月額 $3.99 または年額 $45 と、この中ではもっとも手ごろな価格です。無料プランもあります。英語のみの対応です。

EUR Tax Dual Price B2B Europe… 無料でインストールでき、有料機能は買い切り型のプランで提供されています。評価は 3.4（15 件）です。欧州の言語を中心に多言語に対応していますが、日本語は含まれていません。

比べてみると、どのアプリも欧州の VAT を前提に作られていて、日本の消費税に特有の事情には対応していないことが分かります。シンプル税込税抜併記｜消費税込み・税別表示・軽減税率にも対応 が違うのは次の点です。

• 軽減税率と標準税率の同時運用… 8% と 10% が一つのストアに混ざる前提で作られていて、コレクション・タグ・商品の個別指定を組み合わせられます
• 国税庁の例に沿った文言… 「（税抜価格 ¥10,000）」「（うち消費税額等 ¥1,000）」のような日本向けの表記を、選ぶだけで使えます
• 日本語の管理画面とご利用ガイド… 管理画面も説明書も日本語で読めます
• 商品ページはアプリブロック、一覧は埋め込みアプリ… 商品ページの併記はテーマエディタで置き場所を決められるので、テーマの構造に左右されにくい作りです
• 料金は相場の中央… 月額 $4.99 で、プランによる機能の差はありません

一方で、顧客タグによる出し分けやカートでの併記のように、海外製のアプリにあってこのアプリにはない機能もあります。B2B 向けに会員だけ税抜で見せたい、カートでも併記したい、という要件が強いストアは、その点を比較して選ぶとよいでしょう。

まとめ

シンプル税込税抜併記｜消費税込み・税別表示・軽減税率にも対応 は、Shopify ストアで税込価格と税抜価格を並べて見せるためのアプリです。この記事で取り上げた要点を振り返ります。

• 商品ページと、コレクション・検索結果の一覧に、テーマの価格の「もう一方」を自動で添えられる
• 標準税率と軽減税率を登録し、コレクション・タグ・商品ごとに軽減税率の対象を指定できる。商品編集画面の Tax class で例外も作れる
• 国税庁の例に沿った文言、端数処理、主にする価格を管理画面で選べ、見た目はテーマエディタで整えられる
• 市場ごとの税率と 20 言語の表示で、越境 EC にもそのまま対応できる
• テーマのコードを書き換えず、お客様の情報にも触れない

総額表示を守ることと、法人のお客様に本体価格をきちんと伝えることは、これまでどちらかを手作業で補うしかありませんでした。このアプリを入れれば、税率が混ざる食品ストアでも、その両立を管理画面の設定だけで実現できます。7 日間の無料体験があるので、まずは自分のストアで併記がどう見えるかを確かめてみてください。

アプリは Shopify App Store のアプリページ からインストールできます。

あわせて使いたい UnReact の Shopify アプリ

価格表示や法人のお客様への対応をさらに整えたいストアに向けて、同じ開発元のアプリを紹介します。

シンプル割引率表示｜お手軽値引き率・ディスカウント表示… 商品ページに割引率や割引額を表示できるアプリです。セール価格の見せ方を整えたいときに、税込・税抜の併記と組み合わせて使えます。

シンプル領収書セルフ発行｜PDF・請求書・インボイス対応… 購入したお客様が、自分で領収書や請求書を発行できるアプリです。法人のお客様から領収書の依頼が多いストアでは、問い合わせの手間をまとめて減らせます。

シンプルのし（熨斗）アプリ… 商品にのしを付けるかどうかをお客様が選べるアプリです。贈答用の食品を扱うストアで、軽減税率の併記と一緒に使われることの多い機能です。