組み合わせ販売：商品バンドルの表示スタイルをカスタマイズする

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

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

バンドルスタイルの適用方法：ルールとロジック

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

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

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

CSSコードの優先順位

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

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

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

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

例：

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

バンドル表示の配置

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

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

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

スタイリング設定がどのように適用されるかを理解した後、対象となるバンドルキャンペーンのテンプレートをカスタマイズし始めることができます。

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

   Note: 高度な設定でテーマに商品バンドルブロックを手動で追加するを選択した場合、バンドルの配置はテーマエディタで定義されたパーツスタイリングに従い、カスタムスタイル設定で設定されたテンプレートには影響されません。

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

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

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

3. バンドルに含まれる商品に関連する設定を商品バンドルセクションで設定します：

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

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

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

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

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

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