【Dawn】商品一覧でセール商品に割引率or割引額を表示する方法

# Shopifyノウハウ # Shopify運営店舗向け情報

はじめに

オンラインストアでセールを実施する際、「どれくらいお得なのか」をひと目で伝えることはとても重要です。
しかし、Shopifyの標準テーマであるDawnやRiseでは、商品一覧で割引率や割引額が自動で表示されないため、「お得感」が伝わりづらくセール商品が埋もれがちになることも。

そこで本記事では、Dawnの商品一覧に「●%OFF」や「○○円OFF」といったバッジを表示させる方法をわかりやすく解説します。
簡単なカスタマイズを加えることで、セール商品の訴求力が高まり、購入率UPが期待できます。

テーマエディタ上で直感的に表示の設定ができるようカスタマイズしていますので、運営者さんご自身でも柔軟に調整が可能です。
今すぐにでも使える販促強化の施策として、ぜひご参考ください！

実装方法

1. 「main-collection-product-grid.liquid」に割引表示用のコードを追加

まず、「main-collection-product-grid.liquid」の{% schema %}{% endschema %}内に下記コードを追加して、テーマエディタから割引表示の設定をできるようにします。
今回は、既存の記述の一番最後に追記しています。
※背景および文字のデフォルトのカラーコードは適宜ご調整ください。

{
  "type": "select",
  "id": "show_discount",
  "options": [
    {
      "value": "percent",
      "label": "パーセント（●％ OFF）"
    },
    {
      "value": "yen",
      "label": "通貨（〇〇 OFF）"
    },
    {
      "value": "none",
      "label": "非表示"
    }
  ],
  "default": "percent",
  "label": "ディスカウント"
},
{
  "type": "color",
  "id": "color_discountbk",
  "label": "ディスカウントバッジ背景カラー ",
  "default": "#FCE2B2"
},
{
  "type": "color",
  "id": "color_discount",
  "label": "ディスカウントバッジ文字カラー",
  "default": "#D11515"
}

これにより、テーマエディタ上にこのような設定項目が加わります。
ここで、割引率/割引額のどちらで表示させるのか、などを設定することが可能です。

次に、同ファイル内で「{% render 'card-product' ～～」と書かれた箇所を探し、「show_rating: section.settings.show_rating,」の直後に下記を追加します。（画像はクリックで拡大します）

show_discount: section.settings.show_discount,
color_discountbk: section.settings.color_discountbk,
color_discount: section.settings.color_discount,

さらに、テーマエディタで設定した背景や文字のカラーを適用させるため、同ファイル内にあるスタイルの記述に下記を追加します。

:root {
  --discountrate-bg-color: {{ section.settings.color_discountbk }};
  --discountrate-txt-color: {{ section.settings.color_discount }};
}

2. 「card-product.liquid」にコードを追加してバッジを表示

43行目あたりにある「<div class="card-wrapper product-card-wrapper underline-links-hover">」の直前に、下記コードを追加します。
本記事では、パーセンテージ表示の場合に小数点以下を四捨五入させるため「round」を使用していますが、必要に応じて変更してください。

<!-- 割引表示用 -->
{%- liquid
  assign discount = card_product.compare_at_price | minus: card_product.price
  assign discountrate = discount | times: 100.0 | divided_by: card_product.compare_at_price | round
-%}
<!-- ここまで -->

次に、実際にバッジを表示させたい任意の箇所に下記コードを追加します。
今回は「{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}」の直後に追加しました。

<!-- 割引表示用 -->
{%- if card_product.compare_at_price > card_product.price and card_product.available -%}
    <p class="discountrate">
      {% if show_discount ==  'yen' %}
        <span>{{ discount | money }} OFF</span>
      {% elsif show_discount ==  'percent' %}
        <span>{{ discountrate }}% OFF</span>
      {%  endif %}
    </p>
{%- endif -%}
<!-- ここまで -->

3. バッジのスタイルを調整

任意のファイルに下記CSSを追加し、バッジのカラーやフォントのスタイルを調整します。

.discountrate {
    display: inline-block;
    background-color: var(--discountrate-bg-color);
    padding: 3px 5px;
    font-size: 13px;
}
.discountrate span {
    color: var(--discountrate-txt-color);
}


以上のステップによって、このような割引表示のバッジを出すことができます。

まとめ

いかがでしたが？
具体的な割引率・割引額を明示することでエンドユーザーにとって購入の後押しとなり、結果としてクリック率・CV率の向上が期待できます。

セールの成果の最大化へと繋がり、また競合ストアとの差別化を図ることもできるカスタマイズですので、積極的に取り入れてみてくださいね。
実装手順のご不明点や運用の中でのお悩みなどがありましたら、ぜひお気軽にお問い合わせください！

ストア構築から運用コンサルまで売上UPのための全てをサポート！

共にストアを成長させる併走型コンサルサービスをご提供します
ご相談・ご質問はまずお気軽にご連絡ください

お問い合わせはこちら サービス詳細はこちら
一覧に戻る