商品の組み合わせの表示スタイルをカスタマイズ

カスタムスタイル機能は、組み合わせ販売アプリで、商品の組み合わせがストアの商品ページにどのように表示されるかをより細かく制御できます。この機能を使用すると、レイアウト、色、フォント、ボタンなどを簡単にカスタマイズして、商品の組み合わせをより魅力的に表示し、ショッピング体験を向上させることができます。

このガイドでは、カスタムスタイルオプションにアクセスして商品の組み合わせを簡単にカスタマイズする方法を説明します。

組み合わせスタイルの適用方法：ルールとロジック

商品の組み合わせの表示スタイルをカスタマイズする前に、スタイリング設定がどのように適用されるかを理解することが重要です。このセクションでは、スタイル設定に影響を与える主なルールと条件を概説し、カスタマイズが意図した通りに機能するようにします。

スタイルカスタマイズ条件

スタイル設定セクションで高度な設定に従うを有効にするバンドルキャンペーンのみ、カスタムスタイル機能で設定されたスタイル構成が適用されます。

CSSコードの優先順位

カスタムCSSコードが追加されている場合、それが優先され、カスタムテンプレートを介して構成されたスタイル設定を上書きします。

例： カスタムスタイル構成でボタンの色を赤に設定した場合でも、CSSコードに .bundle-product-title { color: blue; } を含めた場合、ボタンは青色で表示されます。

複数の一致するキャンペーンの表示

1つの商品が「同じテンプレートを使用する」複数のキャンペーンに一致する場合（たとえば、これらのキャンペーンがすべてスタイル設定の高度な設定に従うか、どれも従わないが同じテンプレートを使用する場合）、カスタムスタイル＞複数のバンドルの表示設定が適用されます。

例：

商品の組み合わせ	スタイル設定	適用 【複数の組み合わせ】 表示？
A	AとBは両方とも 高度な設定	はい
B
A	AとBは両方とも 商品モジュールの下の全幅	はい
B
A	Aは 高度な設定 に従い、カスタムスタイル で 'カートに追加' ボタンの下：統合 テンプレートを選択します。	いいえ。2つの組み合わせキャンペーンは、それぞれの設定に基づいて同じ商品ページで異なるスタイルで表示されます。
B	Bは 商品モジュールの下の全幅

組み合わせの表示位置

組み合わせキャンペーンが 高度な設定に従う に設定されている場合、その表示位置は 高度な設定 セクションの スタイル設定 オプションによって決定されます。

• ウィジェットを自動的に埋め込む が選択されている場合、表示位置は カスタムスタイル セクションで選択したテンプレートに従います。
• テーマに商品の組み合わせブロックを手動で追加する が選択されている場合、表示位置はテーマエディタで構成されたレイアウトに従います。

カスタムスタイル設定の構成

スタイリング設定が適用される方法を理解した後、対象の組み合わせキャンペーンのテンプレートをカスタマイズできます。

1. 商品アップセル＆組み合わせアプリを開き、商品の組み合わせタブに移動します。 カスタムスタイルセクションを見つけ、今すぐ設定をクリックします。
   
2. バンドルテンプレートをカスタマイズします：
   
   単一のバンドルのテンプレートを構成するには、単一のバンドルセクションで以下の設定を調整します。変更内容は単一のバンドルパネルでプレビューできます。

   Note: テーマに手動で商品組み合わせブロックを追加を選択した場合、バンドルの配置はテンプレート設定に影響されず、テーマエディタで定義されたコンポーネントスタイルに従います。

• • • テンプレート： 以下から選択：
      • 「カートに追加」ボタンの下： 統合
      • 「カートに追加」ボタンの下： 分割
      • 商品の下： 全幅
    • デスクトップ用タイトルフォントサイズ：デスクトップビューでのバンドルタイトルのフォントサイズを設定します。
    • デスクトップ用タイトルフォントサイズ：デスクトップビューのフォントサイズを設定します。
    • モバイル用タイトルフォントサイズ：モバイルビューでのバンドルタイトルのフォントサイズを設定します。
    • タイトルの色：タイトルの色をカスタマイズします。ストアのテーマに合わせたい場合は、テーマカラーに従うをチェックします。
    • タイトルのフォントウェイト：タイトルを太字にするには、太字フォントをチェックします。

複数のバンドルキャンペーンに一致する商品の表示をさらに設定できます。 複数のバンドルセクションで設定を調整し、変更内容を複数のバンドルパネルでプレビューします。

• • • テンプレート： バンドルの表示方法を選択します：
      • タブモード：ユーザーが切り替えられるタブとしてバンドルが表示されます。このオプションを選択すると、以下をさらに設定できます：
        • タブタイトル：各バンドルセットのタイトルを名前を付けます。
        • タブタイトルフォントサイズ（デスクトップ）：デスクトップビューでのタブタイトルのフォントサイズを設定します。
        • タブタイトルフォントサイズ（モバイル）：モバイルビューでのタブタイトルのフォントサイズを設定します。
        • タブタイトルの色：タブの色をカスタマイズします。ストアのテーマに合わせたい場合は、テーマカラーに従うをチェックします。
        • タブタイトルのフォントウェイト：タブタイトルを太字にするには、太字フォントをチェックします。
      • タイルモード：バンドルがタイルレイアウトで表示されます。

3. 商品の組み合わせセクションで、バンドルに含まれる商品に関連する設定を構成します。

• • 商品画像の比率： 商品画像の比率を設定します。
  • 画像表示ルール： 自動調整 と パディング の間から選択します。
  • 色： 商品タイトル、セール価格、および 割引額または割合 の色をカスタマイズします。ストアのテーマに従う場合は、テーマの色に従う をチェックしてください。
  • 選択した商品： 選択したアイテムの ハイライト色 をカスタマイズします。

4. Buy Button セクションで、バイボタンに関連する設定を構成します：

• • PC用ボタンテキストのフォントサイズ： PCビューでのバイボタンテキストのフォントサイズを設定します。
  • モバイル用ボタンテキストのフォントサイズ： モバイルビューでのバイボタンテキストのフォントサイズを設定します。
  • ボタンの色： ボタンの背景 と ボタンテキスト の色をカスタマイズします。ストアのテーマに従う場合は、テーマの色に従う をチェックしてください。
  • ボタンの角丸： バイボタンの角丸スタイルを調整します。ストアのテーマに合わせるためには、テーマの角丸設定を適用 をチェックしてください。

5. コーディングのバックグラウンドがあり、CSSに慣れている場合は、カスタムCSS セクションを使用してバンドル表示をカスタマイズします。

   注意：  カスタムCSSコードが展開されると、優先され、カスタムスタイル を介して構成された競合する設定を上書きします。 プレビューにはCSS設定の効果が反映されません。設定を保存してストアフロントを訪れて結果を表示してください。

   
6. デスクトップモードとモバイルモードを切り替えて効果をプレビューします。結果に満足したら、更新 をクリックして設定を保存および適用してください。