Shopifyで割引率を自動表示する方法完全ガイド｜具体的なコードと記述箇所を徹底解説【2026年最新】

「セール品はたくさんあるのに、お客様がどれだけお得なのか一目で伝わらない」「価格を比較するのが面倒で、そのまま離脱されてしまっているのでは」——実店舗での値札に慣れた小売事業者様ほど、Shopifyの商品一覧ページで「〇〇%OFF」の表示がされていないことに違和感を覚えるのではないでしょうか。

結論からお伝えすると、Shopifyには割引率を自動計算して表示する機能が標準搭載されていないため、テーマファイルにLiquidコードを追加するカスタマイズが必要です。本記事では、割引率表示を実現する具体的なコードと記述箇所を、初心者にもわかりやすいステップで解説します。あわせて、似たテーマとして混同されがちな「セールバッジ(装飾ラベル)の見た目カスタマイズ」との違いも明確にしていますので、自社が今どちらの実装を必要としているのか、読み進めながら整理していただけます。

この記事でわかること

• 割引率表示と「セールバッジのデザインカスタマイズ」の違い(混同しやすいので要注意)
• Shopifyで割引率を自動計算・表示するための事前準備
• 具体的なLiquidコードと、テーマファイル内の記述箇所
• コードカスタマイズ時のリスクと、安全に実装するための注意点
• コードを書かずに割引率表示を実現するアプリという選択肢
• 小売事業者が押さえておくべき運用上の実務Tips・FAQ

重要:割引率の「自動計算表示」とセールバッジの「見た目カスタマイズ」は別テーマです

本記事に進む前に、まず用語を整理しておきましょう。ECサイトの割引訴求には大きく分けて2つの要素があります。

• ①割引率の自動計算・表示:「通常価格」と「販売価格」の差分から「30%OFF」のような割引率を自動計算し、数値として表示するロジックのカスタマイズ。本記事のテーマです。
• ②セールバッジの見た目(デザイン)カスタマイズ:割引を知らせるラベル・リボン・アイコンなどの色・形・配置といった装飾面のカスタマイズ。こちらは別記事「セールバッジ完全カスタマイズガイド」で扱っているテーマです。

両者はしばしば同じ文脈で語られますが、実装のレイヤーが異なります。①は「%の数値をどう計算し、どこに出すか」というロジックの話であり、②は「そのラベルをどんな見た目にするか」というデザインの話です。本記事では①の割引率自動表示のロジックに絞って、コードレベルで詳しく解説していきます。デザイン面をより凝ったものにしたい場合は、別記事もあわせてご参照ください。

Shopifyの標準機能に割引率表示はない｜コードで対処が必要な理由

Shopifyの商品ページには「価格」と「割引前価格(Compare at price)」という2つの価格項目を設定できますが、標準テーマではこの2つの価格から自動で割引率(パーセンテージ)を計算し表示する機能は搭載されていません。多くのテーマは金額の差額(例:1,000円引き)を表示するにとどまり、「何%OFF」という表示形式には対応していないケースがほとんどです。

しかし、消費者心理の観点では、金額差よりも割引率(パーセンテージ)の方が「お得感」を直感的に伝えやすいとされています。特に単価の高い商材では「1,000円引き」よりも「20%OFF」の方がインパクトを感じてもらいやすく、購買意欲への影響が大きいというデータもあります。実店舗の値札で「30%OFF」のPOPを掲示してきた小売事業者様にとって、この表現をECサイトでも再現することは非常に重要な施策です。

割引率を表示するための事前準備

コードを編集する前に、以下の準備が必要です。

• 商品ページの「価格」に、割引後の販売価格を入力する
• 「割引前価格(Compare at price)」に、割引前の通常価格を入力する
• この2つの価格差分がある商品のみ、割引率が自動計算されて表示される仕組みになる
• 作業前に必ずテーマ全体のバックアップ(複製)を取得しておく

「割引前価格」が未入力の商品は、通常の価格のみが表示され、割引率のロジックは発動しません。セール対象商品すべてに正しく価格が入力されているか、事前に一覧で確認しておくと後工程がスムーズです。

Shopifyにコードで割引率を表示する方法

コードの編集箇所

Shopify管理画面の「オンラインストア」→「テーマ」→「アクション」→「コードを編集」から、テーマファイルにアクセスします。多くのテーマ(Dawnベースなど)では、商品カードの表示を制御しているスニペットファイルsnippets/card-product.liquidを編集対象とします。ただし、テーマの種類・バージョンによってファイル名や該当箇所は異なる場合があるため、事前にファイル構成を確認してください。

コードの記述箇所と内容

価格表示部分を制御している条件分岐({%- endif -%})の直下、閉じタグ(</div>)の手前に、以下のようなLiquidコードを追加します。

以下は割引率を自動計算し、バッジ風に表示する実装例です。

• compare_at_price変数に、商品の「割引前価格」を代入する
• price変数に、商品の現在の「販売価格」を代入する
• compare_at_priceがpriceより大きく、かつ商品が販売可能な場合のみ、割引率を計算する条件分岐を設定する
• 割引率は「(割引前価格 − 販売価格) ÷ 割引前価格 × 100」の計算式で算出し、小数点以下は四捨五入する
• 算出した割引率の数値を、「◯%OFF」というテキストとしてspanタグで出力する
• span要素にはCSSクラス(例:sale-badge)を付与し、続くstyleブロックで見た目を定義する

スタイル(見た目)は、パディング・フォントサイズ・文字色・背景色・角丸(border-radius)などをCSSで指定します。背景色を変更する場合はbackground-colorのカラーコードを、文字色を変更する場合はcolorのカラーコードを、それぞれブランドカラーに合わせて調整してください。例えば赤系の警告色にしたい場合は背景色を赤系のカラーコードに、視認性を高めたい場合は文字色を白(#FFFFFF)に設定するのが一般的です。

カスタマイズ時に押さえておきたい注意点

注意点1:テーマのバックアップは必須

コード編集はテーマファイルを直接書き換える作業のため、記述ミス1つでサイト全体の表示が崩れるリスクがあります。編集前に必ず「テーマを複製」し、複製したテーマ上で作業・検証を行い、問題がないことを確認してから公開テーマに反映する運用を徹底してください。

注意点2:テーマのバージョン・種類により挿入位置が異なる

Shopifyの標準テーマ「Dawn」系列であっても、バージョンによってファイル構成や行数は変動します。有料テーマやカスタムテーマの場合はさらに構造が異なるため、本記事のコード例をそのままコピー&ペーストするのではなく、自社テーマのファイル構造を確認しながら適切な位置に組み込む必要があります。

注意点3:テーマアップデート時にコードが消える可能性がある

Shopifyのテーマを新しいバージョンに更新すると、直接編集したコード箇所が上書きされ、割引率表示が消えてしまうことがあります。アップデート作業を行う際は、カスタマイズ箇所を必ず記録し、更新後に再度反映する運用フローを整えておきましょう。

注意点4:コード知識に不安がある場合は専門家に依頼する

Liquid・CSS・HTMLの知識がないまま見よう見まねでコードを追加すると、意図しないエラーやサイト全体の表示崩れにつながるリスクがあります。社内にコードを扱える人材がいない場合は、Shopifyパートナーなど専門家への依頼を検討することをおすすめします。

注意点5:割引率の計算ロジックと実際の販売管理を一致させる

「割引前価格」を実態とかけ離れた金額に設定して割引率を過大に見せる表示は、景品表示法における「二重価格表示」の観点から問題視される可能性があります。過去の販売実績と乖離した「割引前価格」の設定は避け、実際に販売していた価格を基準に設定するようにしましょう。

割引率表示がもたらす効果｜なぜ「%表示」が購買心理に効くのか

行動経済学の分野では、消費者は絶対額よりも相対的な「割合」で価値判断をしやすいという性質(フレーミング効果)が知られています。たとえば10,000円の商品が2,000円引きになる場合、「2,000円引き」という表現よりも「20%OFF」という表現の方が、多くの人にとってお得感を強く感じさせるとされています。特に単価が高い商材ほど、金額差の表示だけでは割引の大きさが伝わりにくいため、割引率(パーセンテージ)表示の効果は大きくなる傾向があります。

また、商品一覧ページに割引率がひと目でわかる形で表示されていると、顧客は個別の商品ページを開かなくても「どの商品がどれくらいお得か」を瞬時に比較できます。これにより、比較検討にかかる時間が短縮され、結果として購入までの離脱ポイントを減らす効果も期待できます。実店舗での「値札のPOP表示」がそうであったように、ECサイトにおいても視覚的な訴求力は購買行動に直結する重要な要素です。

実装後の効果検証の進め方

コードを実装して終わりにするのではなく、実際に効果が出ているかを検証するプロセスも重要です。以下のような観点でモニタリングすることをおすすめします。

• 割引率表示を導入する前後で、セール対象商品のコンバージョン率(購入率)を比較する
• 商品一覧ページからの直帰率・回遊率に変化があるかを確認する
• 割引率の表示デザイン(色・サイズ)を変えたパターンでA/Bテストを行い、クリック率の違いを検証する
• セール対象商品とそれ以外の商品で、売上構成比にどのような変化が生じたかを分析する

ShopifyのGoogle Analytics連携や、管理画面のレポート機能を活用すれば、こうした指標は比較的簡単に追跡できます。特にセール施策を年間通じて複数回実施する事業者様は、施策ごとの効果を記録し、次回以降のセール設計に活かすサイクルを作ることが成果の最大化につながります。

コードを書かずに割引率表示を実現する方法(アプリという選択肢)

社内にエンジニアリソースがない場合、Shopifyアプリストアには割引率やセールバッジを自動表示できるアプリも複数存在します。コード編集の手間やテーマアップデート時の消失リスクを避けたい場合は、こうしたアプリの活用も選択肢のひとつです。ただし、アプリ導入は月額費用が発生する点、複数アプリを重ねると表示の競合が起きやすい点には留意が必要です。自社でコードを管理できる体制があるなら直接カスタマイズの方が長期的なコストは抑えられ、逆に運用リソースが限られる場合はアプリ活用が現実的、という判断軸で選ぶとよいでしょう。

コード実装とアプリ活用の比較表

専門家に依頼する場合の費用感

社内での実装が難しい場合、Shopifyパートナーやフリーランスのエンジニアにコード実装を依頼するという選択肢もあります。割引率表示のようなシンプルなカスタマイズであれば、一般的な相場として数万円程度からの対応事例が多く、デザイン面のこだわり(アニメーション、複数パターンのバッジ出し分けなど)を加えるほど費用は上振れする傾向があります。依頼する際は、以下の点を事前に業者へ確認しておくとトラブルを避けやすくなります。

• テーマアップデート時にコードが消えた場合の保守対応は含まれるか
• 商品一覧ページ・商品詳細ページ・カートページなど、どの範囲まで対応するか
• バリエーション(色・サイズ違い)ごとの割引率表示に対応しているか
• 納品後の動作確認・修正対応(検収期間)はどの程度用意されているか

「安いから」という理由だけで発注先を決めてしまうと、納品後にテーマ内が整理されておらず、次回の改修がしづらくなるケースも見られます。コードの品質や保守性まで含めて依頼先を検討することをおすすめします。

こんな事業者におすすめ／向いていないケース

コードでの割引率表示カスタマイズがおすすめな事業者

• セール品を頻繁に扱っており、割引率の訴求が売上に直結する商材(アパレル・雑貨など)を扱う事業者
• 社内にShopifyパートナーやエンジニアなど、コード編集ができるリソースがある事業者
• デザインや計算ロジックを自社の要件に合わせて細かく作り込みたい事業者
• アプリの月額コストをかけずに機能を実装したい事業者

導入に慎重な検討が必要なケース

• セール品の取り扱いが少なく、割引率表示の優先度が低い事業者
• 社内にコード編集のスキルを持つ人材がおらず、外注コストをかけたくない事業者
• テーマアップデートを頻繁に行う運用で、コード管理の手間を避けたい事業者

実務で役立つTips

Tips1:割引率の表示条件を明確にルール化する

「10%未満の割引は表示しない」「50%以上の大幅割引は別デザインで強調する」など、割引率の幅に応じた表示ルールを事前に決めておくと、季節ごとのセール施策を運用する際に迷いがなくなります。

Tips2:商品一覧ページとカートページで表示の一貫性を保つ

商品一覧ページには割引率が表示されているのに、カートページや購入確認画面には表示されない、というケースは顧客の不信感につながります。表示箇所を洗い出し、必要な箇所すべてに同じロジックを反映しましょう。

Tips3:実店舗の値札運用ルールとECの表示ルールを統一する

実店舗とECを両方運営している場合、店舗の値札で使っている割引率の表示ルール(端数の扱いなど)とECサイトの表示を揃えることで、顧客がどちらのチャネルを見ても同じ情報を得られるようになり、ブランドへの信頼感が高まります。

Tips4:定期的に表示崩れがないか確認する

テーマの自動アップデートや他アプリの追加によって、割引率表示のコードが意図せず影響を受けることがあります。月に一度など定期的にセール商品ページを確認し、表示崩れや計算ミスがないかチェックする運用をおすすめします。

Tips5:多言語・多通貨展開時の割引率表示にも注意する

越境ECなど多言語・多通貨でストアを展開している場合、通貨換算のタイミングによって割引率の計算結果に誤差が生じることがあります。特に為替レートを自動反映する設定にしている場合、「割引前価格」と「販売価格」の換算タイミングがズレると、表示される割引率が実態と異なってしまうリスクがあるため、多通貨対応時は計算ロジックを個別に確認しておきましょう。

よくある質問(FAQ)

Q. 割引率表示のカスタマイズと、セールバッジのデザイン変更は同時に依頼できますか？

A. 実装のレイヤーは異なりますが、同じテーマファイル内で完結することが多いため、同時に対応することは技術的に可能です。ただし、それぞれ目的が異なるため(計算ロジックの実装 vs 見た目の装飾)、依頼する際は要件を分けて伝えると、認識のズレを防ぎやすくなります。

Q. 割引率の小数点以下はどう処理すればよいですか？

A. 一般的には四捨五入して整数で表示するケースが多く見られます。切り捨てにすると実際の割引率よりやや低い数値が表示されるため、顧客に「思ったより安い」という印象を与えたい場合は切り捨て、正確性を重視する場合は四捨五入、という使い分けも可能です。

Q. すべての商品に割引率を表示すべきですか？

A. 必ずしもすべての商品に表示する必要はありません。定番商品には表示せず、セール対象商品にのみ限定的に表示することで、割引訴求のインパクトを保つという考え方もあります。自社の商品構成や販売戦略に応じて表示範囲を検討しましょう。

Q. コード編集に失敗してサイトが表示されなくなった場合はどうすればよいですか？

A. 編集前にテーマを複製しておけば、複製前の状態(公開中のテーマ)には影響が及ばないため、慌てて対応する必要はありません。複製テーマ内でエラーが起きた場合は、追加したコードを削除するか、複製テーマ自体を破棄して最初からやり直すことができます。この点からも、必ず複製テーマ上で検証してから公開する運用を徹底してください。

Q. 割引率表示とセールバッジのデザインカスタマイズ、どちらを先に実装すべきですか？

A. 優先度は事業者様の課題によって異なりますが、一般的にはまず割引率という「情報」を正確に表示するロジック(本記事のテーマ)を実装し、その後にバッジの見た目(デザイン)を磨き込んでいく順序がおすすめです。土台となる計算ロジックが正しく機能していないと、デザインをどれだけ凝っても誤った情報を発信してしまうリスクがあるためです。

Q. 商品バリエーション(色・サイズ違い)によって割引率が異なる場合はどう対応すればよいですか？

A. Shopifyではバリエーションごとに価格・割引前価格を個別設定できるため、コード側もバリエーション単位で価格を参照するように調整する必要があります。商品一覧ページでは代表バリエーション(通常は最初のバリエーション)の割引率を表示し、商品詳細ページでは選択したバリエーションに応じて割引率が切り替わるよう実装するのが一般的な対応です。

まとめ｜割引率の可視化で「お得感」を正しく伝えよう

割引率の自動表示は、Shopify標準機能にはないものの、Liquidコードのカスタマイズによって実現可能な施策です。金額差よりも直感的に伝わりやすい割引率表示は、特にセールを頻繁に行う小売事業者様にとって、購買意欲を後押しする効果的な手段となります。コード編集に不安がある場合は無理をせず、専門家への依頼やアプリの活用も含めて検討しましょう。

実際にどの施策が自社に最適なのかは、商材特性や競合状況、社内の体制まで踏まえて総合的に判断する必要があり、自己判断だけでは見誤ってしまうことも少なくありません。迷った際は、EC構築と集客の両面を見渡せる専門家に一度相談し、客観的な視点で自社に合った進め方を整理してもらうことをおすすめします。