ShopifyでECサイトを運営する際、特定の商品に対して個別にディスカウントを適用したいと考える方も多いでしょう。本記事では、初心者でも簡単に設定できる方法から、エンジニアやデザイナー向けのカスタマイズ手法まで、カート内の商品ごとにディスカウントを適用する方法を詳しく解説します。これにより、柔軟な価格設定が可能となり、顧客満足度の向上や売上増加が期待できます。
実装方法
1. Shopifyのディスカウント機能を利用する
Shopifyでは、商品ごとにディスカウントを適用するための機能が提供されています。以下の手順で設定を行います。
- 管理画面にログイン: Shopifyの管理画面にアクセスします。
- 「ディスカウント」を選択: 左側のメニューから「ディスカウント」をクリックします。
- 新しいディスカウントを作成: 「ディスカウントを作成する」ボタンをクリックし、適用したいディスカウントの種類（例: 固定額、パーセンテージ、無料配送など）を選択します。
- ディスカウントの詳細を設定: ディスカウントコード、適用対象の商品やコレクション、割引率、使用条件などを設定します。
- ディスカウントの組み合わせを設定: 必要に応じて、他のディスカウントとの組み合わせ設定を行います。詳細はShopifyヘルプセンターの「ディスカウントの組み合わせ」を参照してください。
- ディスカウントを保存: 設定が完了したら、「保存」ボタンをクリックしてディスカウントを有効化します。
この方法により、特定の商品やコレクションに対して個別のディスカウントを適用することができます。
2. Liquidテンプレートをカスタマイズしてディスカウント情報を表示する
エンジニアやデザイナー向けに、Liquidテンプレートをカスタマイズして、カート内の商品ごとにディスカウント情報を表示する方法を解説します。
1.テーマの編集
Shopify管理画面の「オンラインストア」 > 「テーマ」から、使用中のテーマの「アクション」 > 「コードを編集する」を選択します。
2.カートテンプレートの編集
「Templates」フォルダ内のcart.liquidファイルを開きます。
3.ディスカウント情報の表示
カート内の商品ごとにディスカウント情報を表示するため、以下のコードを適切な場所に追加します。
{% for item in cart.items %}
<div class="cart-item">
<p>{{ item.title }}</p>
{% if item.line_level_discount_allocations.size > 0 %}
<p>割引前価格: {{ item.original_price | money }}</p>
<p>割引後価格: {{ item.final_price | money }}</p>
<p>割引額: {{ item.line_level_total_discount | money }}</p>
{% else %}
<p>価格: {{ item.final_price | money }}</p>
{% endif %}
</div>
{% endfor %}
このコードは、各カートアイテムに対して、ディスカウントが適用されている場合は割引前後の価格と割引額を表示し、適用されていない場合は通常の価格を表示します。 より具体的なサンプルを見たい場合は、Dawnのテーマを参照してください。
4. スタイルの調整
必要に応じて、CSSを編集して表示スタイルを調整します。
注意点
- テーマのバックアップ: コードを編集する前に、必ずテーマのバックアップを取ってください。
- テストの実施: 変更後は、必ずテスト環境で動作確認を行い、意図した通りに表示されることを確認してください。
- 公式ドキュメントの参照: 詳細な情報や最新の仕様については、Shopifyの公式ドキュメントを参照してください。