割引コードの表示スタイルのカスタマイズ – SHOPLINE ヘルプセンター

割引キャンペーンデザインアプリを使うと、商品詳細ページ、アクティビティランディングページ、およびチェックアウトページなど、さまざまなストアフロントページで割引コードの表示方法をカスタマイズできます。

各キャンペーンのレイアウト、色、テキストを簡単にカスタマイズしてブランドアイデンティティに合わせることで、顧客がすぐに割引に気づき、申請できるようにします。また、複数の割引コードに適用できる統一されたスタイルを作成して、キャンペーン全体でプロフェッショナルで一貫した見た目を保証できます。

以下の手順に従って、表示デザインの設定を開始してください。

商品詳細ページの表示設定

商品詳細ページに割引コードを表示することで、顧客がプロモーションにすぐ気づき、割引を申請して購入を完了するよう促せます。

表示デザインは、各割引コードを個別にカスタマイズするか、またはグローバルスタイルに従うを有効にして統一設定を適用する、2つの方法で設定できます。

個別の割引コードデザインのカスタマイズ

特定の割引コードの表示を設定するには：

割引キャンペーンデザインのダッシュボードから、割引コードキャンペーンタブに移動し、カスタマイズしたいコードを選択します。
商品詳細ページタブに移動し、クーポンを表示のトグルをオンにします。

左側の設定パネルで、デザインオプションを設定します:

テンプレート選択: お好みの表示テンプレートを選択します。

デザイン: 選択したテンプレートによって、以下のオプションが利用可能です:

スマートカラー自動調整を有効にする: このオプションに対応したテンプレートの場合、ストアのテンプレートに合わせてスタイル（色、フォント、角丸など）を自動で調整するために有効にできます。
カラー設定: スマートカラー自動調整を有効にするが無効または選択したテンプレートで対応していない場合は、手動で色を設定します。

バナー背景画像: PC版とモバイル用のバナー背景画像をアップロードし、画像表示ルールと配置を希望に合わせて調整します。

注：配置で表示位置をカスタマイズを選択した場合、バナーが正しく表示されるように、テーマエディターの商品ページに割引キャンペーンデザインアプリパーツを手動で追加する必要があります。

コンテンツ設定: 表示する情報を設定します:
- 割引文言を表示: 割引文言と割引コードを表示およびカスタマイズするために選択します。
- 有効期限を表示: 割引の有効期限を表示し、表示形式をテキスト表示またはカウントダウン表示から選択します。
  
  注： 有効期限を表示オプションは、SHOPLINE管理画面で割引コードに有効期限が設定されている場合のみ利用可能です。
- 割引コード適用後の遷移ページ: 顧客が割引コードをクリックした後に、アクティビティランディングページまたはカスタムページへリダイレクトする設定を有効にします。
- 表示設定: 割引が特定の顧客グループを対象としている場合、ログインしていない購入者に割引バナーを表示しないようにするには、ログインしていない特定顧客に割引バナーを表示しないを選択します。

右側のプレビューはリアルタイムで更新されます。効果を確認するために、PC版とモバイルの表示を切り替えてください。
更新をクリックして変更を保存します。

保存すると、顧客は該当する商品詳細ページで割引コードを直接表示および申請できます。

グローバルスタイルによる統一デザインの適用

割引コードキャンペーン全体で一貫したデザインを確保するために、グローバルスタイルに従う機能を使用してください。これにより、選択した割引コードが商品ページで統一された表示スタイルに従います。まずグローバル設定を設定し、設定を適用したい各割引コードでグローバルスタイルに従うを有効にする必要があります。

グローバルスタイルデザインの設定

商品詳細ページでグローバルスタイルに従うオプションを使用して割引コードのグローバルスタイルを設定するには、以下の手順に従ってください：

割引キャンペーンデザインのダッシュボードで、マルチ割引コードバナーセクションのスタイル設定をクリックします。

左側の設定パネルで、デザインオプションを設定します:

テンプレート選択: 全体デザインの表示テンプレートを選択します。

デザイン: 選択したテンプレートに応じて、以下のオプションが利用可能です:

スマートカラー自動調整を有効にする: このオプションをサポートするテンプレートでは、ストアのテンプレートに合わせて色、フォント、角丸などのスタイルをシステムが自動で調整するように設定できます。
カラー設定: スマートカラー自動調整を有効にするが無効または選択したテンプレートでサポートされていない場合に、手動で色を設定します。

デザイン: 選択したテンプレートが対応している場合、PC版およびモバイル用のバナー背景画像のアップロード、画像表示ルール、および配置などのデザイン要素を調整できます。

1.5.png

割引コード取得バナーのスタイル設定: この機能をサポートするテンプレートでは、複数の割引コードが同じ商品に適用される場合、それらを1つのバナーにまとめて表示します。顧客はバナーをクリックして展開し、すべての利用可能なコードを確認できます。対応テンプレートでは、選択したテンプレートに基づいてバナー、ボタン、テキストの色もカスタマイズ可能です。
クーポン背景画像のアップロード: 複数の割引コードを1つのバナーにまとめる機能をサポートするテンプレートでは、複数コード適用時の折りたたみバナーのPC版およびモバイル用背景画像をアップロードできます。

右側で割引コードの設定を確認します。PC版とモバイルの表示切替や、単一クーポンのスタイルと複数クーポンのスタイルの切替で効果をプレビューできます。
変更を保存するには、更新をクリックします。

割引コード表示の全体デザインを有効にする

全体デザイン設定を行った後、個別の割引コードに対して全体デザインに従うを有効にするには、以下の手順に従ってください:

「割引キャンペーンデザイン」ダッシュボードの「割引コードキャンペーン」タブから、目的の割引コードを選択します。
「商品詳細ページ」タブに移動し、「グローバルスタイルに従う」のトグルをオンにします。
以下の「コンテンツ設定」（グローバルスタイルとは独立しています）を設定します。
- 割引コピーの表示： 割引コピーと割引コードを表示およびカスタマイズするために選択します。
- 有効期限の表示： 割引の有効期限を表示し、表示形式を「テキスト表示」または「カウントダウン表示」から選択します。
  
  注：「有効期限の表示」オプションは、SHOPLINE管理画面で割引コードに有効期限が設定されている場合のみ利用可能です。
- 割引コード適用後の遷移ページ： 顧客が割引コードをクリックした後に、アクティビティランディングページまたはカスタムページへリダイレクトする設定を有効にします。
- 表示設定： 割引が特定の顧客グループを対象としている場合、ログインしていない購入者に割引バナーを表示しないように「ログインしていない特定顧客に割引バナーを表示しない」を選択します。
「PC版」と「モバイル」ビューを切り替えて、表示スタイルをリアルタイムでプレビューします。
「更新」をクリックして変更を保存します。

「商品詳細ページ」で「グローバルスタイルに従う」に設定されたすべての割引コードは、同じ統一されたグローバル表示設定を使用するようになります。

アクティビティランディングページの表示設定

「アクティビティランディングページ」では、割引コードキャンペーンを専用ページで紹介し、顧客を惹きつけてアクティブなプロモーションを強調できます。以下の手順に従って設定してください：

割引キャンペーンデザインのダッシュボードから、割引コードキャンペーンに移動し、カスタマイズしたい割引コードを選択します。
アクティビティランディングページタブで、作成をクリックしてページを生成します。

作成されると、アクティビティランディングページは自動的にストアのカスタムページとして生成されます。設定ページの左側パネルには以下の設定オプションがあります：

2.2.png

アクティビティランディングページURL： コピーをクリックしてアクティビティURLを共有します。ページのSEOを強化するには、検索エンジン最適化をクリックして、SHOPLINE管理画面でタイトル、説明、その他の詳細を調整してください。

注：アクティビティタイトルを変更してもランディングページのURLは更新されません。SEO向上のためにアクティビティURLをカスタマイズするには、カスタムページ > 検索エンジン最適化 > URLの設定を更新してください。詳細な手順は、"カスタムページの作成と管理."

アクティビティバナー： PC版とモバイル用のバナー画像をアップロードし、必要に応じて画像表示ルールを調整します。
割引バナーの表示： トグルをオンにして、アクティビティランディングページに割引キャンペーンバナーを表示します。
デザイン：
- スタイルテンプレートの選択： キャンペーンバナーの表示テンプレートを選択します。
- カラー設定： 選択したテンプレートに基づいてバナーの色をカスタマイズします。
コンテンツ設定： バナーテキストを編集し、またはカウントダウンタイマーの表示を有効にして緊急性を追加します。

右側のプレビューはリアルタイムで更新されます。PC版とモバイルの表示を切り替えて効果を確認してください。
更新をクリックして変更を保存します。

完了すると、割引コードキャンペーンのランディングページがストアフロントに表示されます。

チェックアウトページの表示設定

チェックアウトページに割引コードキャンペーンを表示することで、顧客に利用可能な割引を思い出させ、購入完了を促進します。以下の手順で設定してください：

割引キャンペーンデザインのダッシュボードから、割引コードキャンペーンタブに移動し、カスタマイズしたい割引コードを選択します。
チェックアウトページタブに移動し、クーポンを表示のトグルをオンにします。
チェックアウト時に割引情報をどのように表示するかを選択します：
- 割引コードの節約金額を表示：顧客が節約できる金額を表示します。
- 割引コードのキャンペーン名を表示：割引に関連付けられたキャンペーン名を表示およびカスタマイズします。
（任意）表示設定の下で、ログインしていない特定の顧客に割引バナーを表示しないを選択すると、割引が特定の顧客グループを対象としている場合に、ログインしていない購入者から割引バナーを非表示にできます。
スタイルを調整すると、右側のプレビューがリアルタイムで更新されます。
変更を保存するには、更新をクリックします。

完了すると、設定した割引の詳細がストアのチェックアウトページに表示されます。

割引コードの表示順序のカスタマイズ

複数の有効な割引コードキャンペーンがある場合、商品詳細ページで表示される順序をカスタマイズできます：

割引キャンペーンデザインのダッシュボードで、マルチ割引コードバナーの下にある割引コードの順序をクリックします。
ポップアップウィンドウで、ストアフロントで割引コードをどのように並べ替えるかを選択します。並べ替え基準のドロップダウンから並べ替えルールを選択してください：
- 作成日：新しい → 古い
- 作成日：古い → 新しい
- 更新日：新しい → 古い
- 更新日：古い → 新しい
- 割引レベル：大きい → 小さい
- カスタム：手動で順序を調整
変更を更新するには、保存をクリックします。

この記事はAIを使用して翻訳されており、不正確な部分が含まれている可能性があります。最も正確な情報については、元の英語版をご参照ください。