割引コードの表示スタイルのカスタム設定
割引キャンペーンデザイン アプリを使うと、商品詳細ページ、キャンペーンランディングページ、および チェックアウトページ を含むさまざまなストアフロントページで割引コードの表示方法をカスタマイズできます。
各キャンペーンのレイアウト、色、テキストを簡単にカスタマイズしてブランドアイデンティティに合わせることで、顧客がすぐに割引に気づき、申請できるようにします。また、複数の割引コードに適用できる統一されたスタイルを作成して、キャンペーン全体でプロフェッショナルで一貫した外観を保証できます。
以下の手順に従って、表示デザインの設定を開始してください。
商品詳細ページの表示設定
商品詳細ページに割引コードを表示することで、顧客がプロモーションにすばやく気づき、割引を申請して購入を完了するよう促します。
表示デザインは、各割引コードを個別にカスタマイズするか、または統一設定を適用するためにグローバルスタイルに従うを有効にする、の2通りの方法で設定できます。
個別の割引コードデザインのカスタマイズ
特定の割引コードの表示を設定するには：
- 割引キャンペーンデザインのダッシュボードから、割引コードキャンペーンタブに移動し、カスタマイズしたいコードを選択します。
-
商品詳細ページタブに移動し、クーポンを表示のトグルをオンにします。
- 左側の設定パネルで、デザインオプションを設定します:
- テンプレート選択: お好みの表示テンプレートを選択します。
-
デザイン: 選択したテンプレートによって、以下のオプションが利用可能な場合があります:
- スマートカラーマッチングを有効にする: このオプションをサポートするテンプレートでは、ストアのテンプレートに合わせてスタイル（色、フォント、角の半径など）を自動的にマッチングするようシステムに許可できます。
-
カラー設定: スマートカラーマッチングを有効にするが無効または選択したテンプレートでサポートされていない場合は、手動で色を設定します。
-
バナー背景画像: PC版とモバイル用のバナー背景画像をアップロードし、画像表示ルールと配置を希望に応じて調整します。
注： 配置で表示位置をカスタマイズを選択した場合、バナーが正しく表示されるように、テーマエディターの商品ページに割引キャンペーンデザインアプリブロックを手動で追加する必要があります。
-
コンテンツ設定: 表示する情報を設定します:
- 割引文言を表示: 割引文言とコードを表示し、カスタマイズするために選択します。
-
有効期限を表示: 割引の有効期限を表示し、表示形式をテキスト表示またはカウントダウン表示から選択します。
注： 有効期限を表示オプションは、SHOPLINE管理画面で割引コードに有効期限が設定されている場合のみ利用可能です。 - 割引コード適用後の遷移ページ: 顧客が割引コードをクリックした後に、キャンペーンのランディングページまたはカスタムページへリダイレクトする設定を有効にします。
-
右側のプレビューはリアルタイムで更新されます。PC版とモバイルの表示を切り替えて効果を確認してください。
- 更新をクリックして変更を保存します。
保存後、顧客は該当する商品詳細ページで直接割引コードを表示および申請できます。
グローバルスタイルによる統一デザインの適用
割引コードキャンペーン全体で一貫したデザインを確保するには、グローバルスタイルに従う機能を使用します。これにより、選択した割引コードが商品ページで統一された表示スタイルに従うようになります。まず、グローバル設定をセットアップし、設定を適用したい各割引コードでグローバルスタイルに従うを有効にする必要があります。
グローバルスタイルデザインの設定
商品詳細ページでグローバルスタイルに従うオプションを使用して割引コードのグローバルスタイルを設定するには、以下の手順に従ってください：
-
割引キャンペーンデザインのダッシュボードで、マルチ割引コードバナーセクションのスタイル設定をクリックします。
- 左側の設定パネルで、デザインオプションを設定します:
- テンプレート選択: 全体デザインの表示テンプレートを選択します。
-
デザイン: 選択したテンプレートに応じて、以下のオプションが利用可能です:
- スマートカラーマッチングを有効にする: このオプションをサポートするテンプレートでは、ストアのテンプレートに合わせて色、フォント、角の半径などのスタイルを自動的にマッチングするために有効にできます。
- カラー設定: 選択したテンプレートでスマートカラーマッチングを有効にするが無効またはサポートされていない場合に、手動で色を設定します。
-
デザイン: 選択したテンプレートがサポートする場合、PC版およびモバイル用のバナー背景画像のアップロード、画像表示ルール、および配置などのデザイン要素を必要に応じて調整します。
注： 配置で表示位置をカスタマイズを選択した場合、バナーが正しく表示されるように、テーマエディターの商品ページに割引キャンペーンデザインアプリブロックを手動で追加する必要があります。 - 割引コード取得バナーのスタイル設定: この機能をサポートするテンプレートでは、複数の割引コードが同じ商品に適用される場合、それらを1つのバナーに閉じることができます。顧客はバナーをクリックしてすべての利用可能なコードを開いて表示できます。対応テンプレートでは、選択したテンプレートに基づいてバナー、ボタン、テキストの色もカスタマイズ可能です。
-
クーポン背景画像のアップロード: 複数の割引コードを1つのバナーに閉じることをサポートするテンプレートでは、複数コードが適用される場合の閉じたバナーのPC版およびモバイル用背景画像をアップロードできます。
-
右側で割引コードの設定を確認します。PC版とモバイルの表示切替や、単一クーポンのスタイルと複数クーポンのスタイルの切替で効果をプレビューできます。
- 変更を保存するには、更新をクリックします。
割引コード表示の全体デザインを有効にする
全体デザインの設定を行った後、個別の割引コードに対して全体デザインに従うを有効にするには、以下の手順に従ってください:
- 「割引キャンペーンデザイン」ダッシュボードから、「割引コードキャンペーン」タブに移動し、希望の割引コードを選択します。
-
「商品詳細ページ」タブに移動し、「グローバルスタイルに従う」のトグルをオンにします。
- 「コンテンツ設定」を構成します（これらはグローバルスタイルとは独立しています）：
- 割引コピーの表示： 割引コピーとコードを表示およびカスタマイズするために選択します。
-
有効期限の表示： 割引の有効期限を表示し、表示形式を「テキスト表示」または「カウントダウン表示」から選択します。
注：「有効期限の表示」オプションは、SHOPLINE管理画面で割引コードに有効期限が設定されている場合にのみ利用可能です。 - 割引コード適用後の遷移ページ： 顧客が割引コードをクリックした後に、アクティビティランディングページまたはカスタムページへリダイレクトする設定を有効にします。
-
「PC版」と「モバイル」ビューを切り替えて、表示スタイルをリアルタイムでプレビューします。
- 「更新」をクリックして変更を保存します。
「商品詳細ページ」で「グローバルスタイルに従う」に設定されたすべての割引コードは、同じ統一されたグローバル表示設定を使用するようになります。
アクティビティランディングページの表示設定
「アクティビティランディングページ」では、割引コードキャンペーンを専用ページで紹介し、顧客を引き付けてアクティブなプロモーションを強調できます。以下の手順に従って設定してください：
- 割引キャンペーンデザインのダッシュボードから、割引コードキャンペーンに移動し、カスタマイズしたい割引コードを選択します。
-
アクティビティランディングページタブで、作成をクリックしてページを生成します。
-
作成されると、アクティビティランディングページは自動的にストアのカスタムページとして生成されます。設定ページの左側パネルには以下の設定オプションがあります：
-
アクティビティランディングページURL： コピーをクリックしてアクティビティのURLを共有します。ページのSEOを強化するには、検索エンジン最適化をクリックして、SHOPLINE管理画面でタイトル、説明、その他の詳細を調整してください。
注：アクティビティタイトルを変更してもランディングページのURLは更新されません。SEO向上のためにアクティビティURLをカスタマイズするには、カスタムページ > 検索エンジン最適化 > URLの設定を更新してください。詳細な手順は、"カスタムページの作成と管理"をご参照ください。 - アクティビティバナー： PC版とモバイル用のバナー画像をアップロードし、必要に応じて画像表示ルールを調整します。
- 割引バナーの表示： トグルをオンにして、アクティビティランディングページに割引キャンペーンバナーを表示します。
-
デザイン：
- スタイルテンプレートの選択： キャンペーンバナーの表示テンプレートを選択します。
- カラー設定： 選択したテンプレートに基づいてバナーの色をカスタマイズします。
- コンテンツ設定： バナーテキストを編集し、またはカウントダウンタイマーの表示を有効にして緊急性を追加します。
-
-
右側のプレビューはリアルタイムで更新されます。PC版とモバイルの表示を切り替えて効果を確認してください。
- 更新をクリックして変更を保存します。
完了すると、割引コードキャンペーンのランディングページがストアフロントに表示されます。
チェックアウトページの表示設定
チェックアウトページに割引コードキャンペーンを表示することで、顧客に利用可能な割引を思い出させ、購入完了を促進します。以下の手順で設定してください：
- 割引キャンペーンデザインのダッシュボードから、割引コードキャンペーンタブに移動し、カスタマイズしたい割引コードを選択します。
-
チェックアウトページタブに移動し、クーポンを表示のトグルをオンにします。
-
チェックアウト時に割引情報をどのように表示するかを選択します：
- 割引コードの節約金額を表示：顧客が節約できる金額を表示します。
- 割引コードのキャンペーン名を表示：割引に関連付けられたキャンペーン名を表示およびカスタマイズします。
- スタイルを調整すると、右側のプレビューがリアルタイムで更新されます。
- 更新をクリックして変更を保存します。
完了すると、設定した割引の詳細がストアのチェックアウトページに表示されます。
割引コードの表示順序のカスタマイズ
複数の有効な割引コードキャンペーンがある場合、商品詳細ページでの表示順序をカスタマイズできます：
-
割引キャンペーンデザインのダッシュボードで、マルチ割引コードバナーの下にある割引コードの順序をクリックします。
- ポップアップウィンドウで、ストアフロント上で割引コードをどのように並べ替えるかを選択します。並べ替え基準のドロップダウンから並べ替えルールを選択してください：
- 作成日：新しい → 古い
- 作成日：古い → 新しい
- 更新日：新しい → 古い
- 更新日：古い → 新しい
- 割引レベル：大きい → 小さい
- カスタム：手動で順序を調整
- 変更を更新するには、保存をクリックします。
この記事はAIを使用して翻訳されており、不正確な部分が含まれている可能性があります。最も正確な情報については、元の英語版をご参照ください。