オンラインストアを運営する上で、顧客の購買意欲を高める施策は欠かせません。その代表的な方法の一つが「割引」です。
この割引施策を実施するうえで重要なポイントが「割引率」の表示です。割引率は顧客にとって非常に魅力的な情報であり、売上アップに直結します。たとえば、「30%OFF」と具体的な数字が示されていると、顧客は一目でどれだけお得かを認識できます。これにより、購入への心理的なハードルが下がり、衝動買いを促す効果も期待できるでしょう。
しかし、Shopifyのデフォルト機能には、残念ながら商品の割引率を直接表示する機能が備わっていません。
そこでこの記事では、Shopifyで割引率を表示する方法について詳しく解説します。顧客の購買意欲を最大限に引き出す参考にしてください。
なお、本記事ではコードを編集する記載があります。コードの編集では、ストアのデザインが崩れたり、正しく商品が表示されなくなったりする可能性があります。コードに関する知識が十分に無く、編集に不安がある場合には、専門家への依頼を強くおすすめします。
Shopifyの標準機能に割引率表示はない｜コードで対処可能
Shopifyでは商品を割引価格で販売すると、定価と割引価格の両方が表示され、顧客に割引されていることを明確に伝えられます。このとき、「セール」というラベルが表示されますが、「〇〇%OFF」のような具体的な割引率を表示する機能は、標準機能には備わっていません。
割引率を表示することで顧客にお得感を強くアピールし、売上アップにつながるでしょう。 この機能は、プログラミングコードを記述することで実現可能です。以降の章で、画像付きで具体的なコードの記述方法を解説します。
コード編集の知識がない場合には、Shopifyの制作スキルを持った「Shopifyパートナー」など、コード編集の経験が豊富な専門家に依頼することで、安全かつ確実に割引率表示を実装することが可能です。
Shopifyで割引率を表示をするための準備
商品の割引率を表示するためには、割引した後の販売価格と割引前の価格を設定する必要があります。これはShopifyの商品ページにて設定可能です。
割引販売したい商品の商品ページを開き、価格設定の箇所までスクロールしましょう。「価格」には割引した後の販売価格を、「割引前価格」には割引する前の価格を入力します。
画像出典：Shopify管理画面
これで準備は完了です。
上の画像では、元の価格が14,000円、割引後の価格が7,000円となり、50%OFFになっています。実際の画面で見てみましょう。
真ん中のシューズを見てみると、14,000円に取り消し線が付き、価格が7,000円と表示されています。現時点では割引率が表示されていないため、「50%OFF」が表示されるようにしていきます。
Shopifyにコードで割引率を表示する方法
Shopifyに割引率を表示するコードを紹介します。今回使用するテーマは公式無料テーマの「Dawn」です。バージョンは15.3.0です。Dawnテーマのバージョンや、使用しているテーマが異なる場合、記述箇所も異なる可能性があるので、注意してください。
また、割引率は様々な商品が並んでいるコレクションで表示するのが有効です。この記事ではコレクションに表示する方法を紹介しますが、その他のセクションや商品ページなどに表示したい場合には、今回の内容を参考に適宜変更してください。
コードの編集箇所
Shopifyの管理画面よりオンラインストアを選択。コード編集したいテーマの「⋯（三点リーダー）」をクリックし、「コードを編集」を選択します。
画像出典：Shopify管理画面
なお、コードを編集する際には、万が一の場合に備えて、必ずバックアップをとっておきましょう。「⋯（三点リーダー）」をクリックし、「複製」を選択するとバックアップがとれます。
コード編集の画面を開いたら、メニューより「snippets」を選択し、「card-product.liquid」を選択します。
画面の右側にコードが表示されますので、こちらを編集していきます。
コードの記述箇所と内容
今回のサンプルではコレクションで表示された各商品の価格の下に割引率を表示します。
コードを挿入する箇所は288行目の「{%- endif -%}」の直下で289行目「</div>」の前です。
※テーマのバージョンや、使用しているテーマが異なる場合、挿入位置も異なる可能性があるので注意してください。
288行目の「{%- endif -%}」の後ろで「Enter」を押下し、改行します。
改行した289行目に、以下のコードを貼り付けてください。
{%- comment -%}
割引率表示コード
{%- endcomment -%}
{%- liquid
assign compare_at_price = card_product.compare_at_price
assign price = card_product.price
if compare_at_price > price and card_product.available
assign sale_percentage = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round
echo '<span class="sale-badge">' | append: sale_percentage | append: '% OFF</span>'
endif
-%}
{%- style -%}
.sale-badge {
display: inline-block;
padding: 0.25rem 1.2rem;
font-size: 1.2rem;
font-weight: 500;
line-height: 1.2;
color: #FFFFFF !important;
background-color: #D93A46;
border-radius: 9999px;
text-align: center;
}
{%- endstyle -%}
貼り付けたら、右上にある「保存」をクリック後に、「ストアをプレビュー」をクリックして、実際の画面で見てみましょう。
コレクションを見てみると、シューズの価格の下に割引率が表示されました。
サイトのテーマカラーに合わせて色を変更したい場合には、コード内のカラーコードを変更します。カラーコードとは「#」のあとに続く6桁の半角英数字のことです。
- color：文字の色を指定
- background-color：背景色を指定
例えば以下のように変更すると、文字を赤に、背景色を黄色に変更できます。
color: #FF0000 !important;
background-color: #FFFF00;
その他、CSSを用いることでラベルの見た目も変更可能です。解説は以上になります。
割引施策を実施するなら「RuffRuff購入特典」がおすすめ
Shopifyでは割引価格での販売や「セール」のラベル表示、クーポン発行が可能ですが、それ以上の割引施策には標準機能では対応していません。
そこで、顧客の購買意欲を促進する割引施策を実施したい場合には、「RuffRuff購入特典」がおすすめです。
RuffRuff購入特典では、「数量割引」「小計金額による割引」「VIP会員限定割引」「期間限定セール」などあらゆる割引施策を実施できます。コードを編集することなく簡単な操作で設定できるため、プログラミングの知識がない方でもご利用いただけます。また、設定画面は日本語に対応しており、日本語によるカスタマーサポートもあるため、初心者の方でも安心です。
アプリは月額9ドルで利用でき、3日間の無料体験期間があります。割引施策を検討している方はぜひお試しください。
Shopifyに割引率を表示して、顧客の購買意欲を高めよう
この記事では、Shopifyストアのコレクションにある商品に、割引率を表示する方法について解説しました。
Shopifyの標準機能には割引率を表示する機能がありませんが、プログラミングコードを追加することで対応可能です。商品に「〇〇%OFF」と表示することで、顧客はお得感を強く感じ、購買意欲を高める効果が期待できます。
コード編集に自信がない場合には、専門家へ依頼しましょう。Shopifyパートナーや経験豊富なフリーランスの開発者に依頼することで、ストアのデザインや機能に悪影響を与えることなく、安全かつ確実に割引率表示を実装できます。
割引率を表示して、顧客の購買意欲を向上させ、売上アップにつなげましょう。
最後に、下記のブログ記事ではShopifyでセールを設定する方法や具体的なセール施策のアイデアを紹介してます。ご参考にしてください。
