自動割引の表示スタイルのカスタム設定 – SHOPLINE ヘルプセンター

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

レイアウト、色、テキストを簡単に調整して、ストアのブランドに合わせることができ、顧客が閲覧中に有効なプロモーションに気づきやすくなります。また、複数の自動割引にわたって統一された表示スタイルを適用し、一貫した視覚体験を維持することも可能です。

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

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

商品詳細ページに自動割引キャンペーンを表示することで、顧客がプロモーションにすぐに気づき、購入完了の可能性が高まります。

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

個別の自動割引デザインのカスタマイズ

特定の自動割引の表示を設定するには：

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

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

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

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

スマートカラーマッチングを有効にする: ストアのテーマに合わせてスタイル（色、フォント、角の半径など）を自動的に調整します。
カラースキーム: 利用可能なスキームオプションから表示色を選択するか、スマートカラーマッチングを有効にするが無効の場合は、カスタムカラーを選択して表示色を手動で調整します。

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

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

コンテンツ設定: 表示する情報を設定します:
- 割引文言を表示: 自動割引の文言とコードを表示およびカスタマイズするために選択します。
- 有効期限を表示: 割引の有効期限を表示し、表示形式としてテキスト表示またはカウントダウンを選択します。
  
  注： 有効期限を表示は、自動割引にSHOPLINE管理画面で有効期限が設定されている場合のみ利用可能です。
- クリック後のジャンプリンク: 顧客が自動割引をクリックした後に、カスタムまたはキャンペーンページへリダイレクトする設定を有効にします。

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

完了すると、顧客は該当する商品の詳細ページで自動割引を直接確認できます。

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

自動割引のデザインを一貫させるために、グローバルスタイルに従う機能を使用してください。これにより、選択した自動割引が商品ページで統一された表示スタイルに従います。まずグローバル設定をセットアップし、設定を適用したい各自動割引でグローバルスタイルに従うを有効にする必要があります。

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

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

割引キャンペーンデザインダッシュボードで、グローバル自動割引設定の下にあるスタイル設定をクリックします。
商品詳細ページタブをクリックします。

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

テンプレート選択：自動割引の表示テンプレートを選択します。

デザイン：

スマートカラーマッチングを有効にする：このオプションをサポートするテーマの場合、ストアのテーマに合わせてスタイル（色、フォント、角の半径など）を自動的に調整するために有効にできます。
カラースキーム：利用可能なスキームオプションから表示色を選択するか、スマートカラーマッチングを有効にしていない場合はカスタムカラーを選択して表示色を手動で調整します。

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

右側で自動割引の設定を確認します。PC版とモバイルの表示切替や、スタイル階層割引と多段階割引の切替でプレビュー効果を確認できます。
変更を保存するには更新をクリックします。

自動割引表示のグローバルスタイル有効化

全体デザイン設定を構成した後、以下の手順に従って個別の自動割引に対して全体デザインに従うを有効にします：

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

全体デザインに従うが有効になっているすべての自動割引は、商品詳細ページで同じ全体表示設定が自動的に適用されます。

カートページの表示設定

カートページに自動割引を表示することで、顧客に利用可能な割引を思い出させ、購入完了を促進します。

自動割引の表示方法は2通りあります：各自動割引を個別にカスタマイズするか、または全体デザインに従うを有効にして統一されたデザイン設定を適用します。

個別の自動割引デザインのカスタマイズ

特定の自動割引に対してカートページを個別に設定するには、以下の手順に従ってください：

割引キャンペーンデザインのダッシュボードから、自動割引タブに移動し、カスタマイズしたい自動割引を選択します。
カートページタブをクリックし、割引バナーを表示のトグルをオンにします。
以下のセクションでデザインを設定します:
- デザイン:
  - スマートカラーマッチングを有効にする: ストアのテーマに合わせてスタイル（色、フォント、角の半径など）を自動的に調整します。
  - カラースキーム: 利用可能なスキームオプションから表示色を選択するか、スマートカラーマッチングを有効にしない場合は、カスタムカラーを選択して表示色を手動で調整します。
  - コンテンツ設定: バナーに表示されるテキストをカスタマイズでき、いつでもデフォルトの文言にリセットできます。カスタマイズ可能なバナーテキストのオプションには以下が含まれます:
    - 最低条件未達成
    - 最大条件未達成
    - 最大割引を享受済み
右側のプレビューはリアルタイムで更新されます。PC版とモバイルの表示を切り替えて効果を確認してください。
更新をクリックして変更を保存します。

完了すると、顧客は適用可能なカートページで自動割引を直接確認できるようになります。

グローバルスタイルで統一デザインを適用する

自動割引のデザインを一貫させるために、グローバルスタイルに従う機能を使用します。これにより、選択した自動割引がカートページで統一された表示スタイルに従います。まずグローバル設定を設定し、設定を適用したい各自動割引でグローバルスタイルに従うを有効にする必要があります。

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

グローバル自動割引設定セクションで、カートページの自動割引表示を設定する手順に従ってください。

割引キャンペーンデザインのダッシュボードで、全体自動割引設定の下にあるスタイル設定をクリックします。
次に、カートページタブをクリックします。
以下のセクションでデザインを設定します:
- スマートカラー自動調整を有効にする: この機能を有効にすると、システムがストアのテーマに合わせてスタイル（色、フォント、角の半径など）を自動的に調整します。
- カラースキーム: 利用可能なスキームオプションから表示色を選択するか、スマートカラー自動調整を有効にするが無効の場合は、カスタムカラーを選択して表示色を手動で調整します。
更新をクリックして変更を保存します。

自動割引表示の全体スタイルを有効にする

全体デザイン設定を構成した後、個別の自動割引に対して全体スタイルに従うを有効にするには、以下の手順に従ってください:

割引キャンペーンデザインのダッシュボードから、自動割引タブに移動し、対象の自動割引を選択します。
カートページタブをクリックし、割引バナーを表示と全体スタイルに従うのトグルをオンにします。
コンテンツ設定を構成します（これは全体スタイルとは独立しています）: バナーに表示されるテキストをカスタマイズでき、全体スタイルに従うを有効にした際にはいつでもデフォルトの文言にリセットできます。カスタマイズ可能なバナーテキストのオプションは以下の通りです:
- 最小条件未達成
- 最大条件未達成
- 最大割引適用済み
更新をクリックして変更を保存します。

全体スタイルに従うが有効なすべての自動割引は、同じ全体表示設定が適用されます。

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

アクティビティランディングページは、専用ページで自動割引キャンペーンを紹介し、顧客を引き付けてアクティブな割引を強調表示します。自動割引のアクティビティランディングページを設定するには、以下の手順に従ってください:

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

作成されると、アクティビティランディングページはストア内のカスタムページとして自動的に生成されます。設定ページでは、以下の構成オプションが利用可能です：

3.1.png

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

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

アクティビティバナー： PC版とモバイル用のバナー画像をアップロードし、必要に応じて画像表示ルールを調整します。
アクティビティ情報の表示：このオプションを有効にすると、アクティビティランディングページに割引バナーが表示されます。バナータイプは、コピー用バナーまたは進捗バー付きバナーから選択できます。

デザイン：自動割引の表示に使用するカラースキームを選択するか、カスタムカラーを選択して表示色を手動で調整します。

注：デザインセクションの右上にある商品詳細ページにデザインを適用オプションがあります。これをクリックし、続けて同期をクリックすると、現在のデザインスタイルが商品詳細ページに自動的に同期され、表示の視覚的一貫性が保たれます。

コンテンツ設定：緊急性を高めるためにバナーテキストを編集します。
カウントダウンの表示：割引の有効期限までのカウントダウンを表示するには、カウントダウンの表示を有効にします。カウントダウンの単位は、日または時間で選択できます。

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

完了すると、顧客はストアフロントで自動割引のランディングページを見ることができます。

自動割引表示の詳細設定

自動割引の外観をカスタマイズすることに加えて、商品詳細ページやチェックアウトページで複数の割引を表示するための詳細設定を構成できます。これにより、顧客により多くの選択肢を提供し、最終注文に適用される割引の透明性を向上させます。

自動割引の表示オプションとルールの設定方法の詳細については、詳細設定による自動割引の表示強化を参照してください。

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