ShopifyでECサイトを運営する際、カート単位でディスカウントを適用するUIを実装したいとお考えではありませんか？適切なディスカウント表示は、顧客にとっての透明性を高め、購買意欲を促進する重要な要素です。本記事では、初心者でも簡単に設定できる方法から、エンジニアやデザイナー向けのカスタマイズ手法まで、具体的な手順を丁寧に解説します。これにより、顧客体験の向上と売上増加が期待できます。
実装方法
以下では、Shopify公式ドキュメントに基づき、カート単位でディスカウント情報を表示するための正しい実装方法を具体的に説明します。コードはCart Discountのセクションに基づいて正確に作成しています。
正しいカスタマイズ方法
ステップ1: カートページのコードを編集
- Shopify管理画面から「オンラインストア > テーマ」を選択し、「コードを編集」をクリックします。
Templatesフォルダー内のcart.liquidまたはcart-template.liquidを開きます。
ステップ2: カート割引情報を表示するコードを追加
以下のコードをカートページの適切な箇所（通常は各商品のループ内）に追加してください。
Subtotal: {{ cart.items_subtotal_price | money }}
{% if cart.cart_level_discount_applications.size > 0 %}
Discounts:
<ul>
{% for discount_application in cart.cart_level_discount_applications %}
<li>
{{ discount_application.title }}-{{ discount_application.total_allocated_amount | money }}
</li>
{% endfor %}
</ul>
{% endif %}
Total: {{ cart.total_price | money }}
コードの詳細説明
item.discount_allocations:
- 各アイテムに適用された割引を取得する配列。
- 割引が複数ある場合も対応しています。
discount.amount:
- 割引額を取得します。
discount.discount_application.title:
- 割引の名前やタイプ（例: 「セール割引」など）を表示します。
- 割引が適用されていない場合、
割引適用なしと表示します。
ステップ3: カート全体のディスカウント合計を表示
カート全体に適用された割引の合計額を表示するには、以下のコードを使用します。
<p>カート全体の割引合計: {{ cart.total_discount | money }}</p>
注意点
- ディスカウントの適用条件:
- 割引は「自動割引」または「ディスカウントコード」で設定されている必要があります。
- 管理画面の「ディスカウント」セクションから事前に割引を設定してください。
- カートデザインの調整:
- 既存のカートデザインに合わせてHTMLやCSSを調整してください。
- テスト:
- カスタマイズ後に必ずテストを行い、意図した表示になるか確認してください。
詳細なリファレンス
- 詳細については、Shopify公式ガイドを確認してください。公式ドキュメントには、
cartオブジェクトやdiscount_allocationsの使用例が記載されています。