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

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

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

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

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

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

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

CSSコードの優先順位

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

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

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

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

例：

組み合わせ商品	スタイル設定	【複数の組み合わせ】 表示を申請しますか？
A	AとBの両方が詳細設定に従います。	はい
B
A	AとBの両方が商品モジュール下の全幅を使用します。	はい
B
A	Aは詳細設定に従い、カスタムスタイルの中で「カートに追加」ボタン下：連携テンプレートを選択します。	いいえ。2つの組み合わせキャンペーンは、それぞれの設定に基づき同じ商品ページで異なるスタイルで表示されます。
B	Bは商品モジュール下の全幅を使用します。

組み合わせ商品の表示位置

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

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

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

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

1. Product Upsells & Add-onsアプリを開き、Product bundlesタブに移動します。Custom styleセクションを見つけて、Set nowをクリックします。
   

2. バンドルのテンプレートをカスタマイズします：
   
   単一バンドルのテンプレートを設定するには、単一の組み合わせセクションで以下の設定を調整します。変更内容は単一の組み合わせパネルでプレビューできます。

   注：もし詳細設定でテーマに複合コンポーネントを手動で追加するを選択している場合、バンドルの配置はテーマエディターで定義されたパーツのスタイリングに従い、カスタムスタイル設定で設定したテンプレートの影響を受けません。

• テンプレート：以下から選択してください：
  • 「カートに追加」ボタンの下：統合型
  • 「カートに追加」ボタンの下：分割型
  • 商品下部：全幅
• タイトル PC版 フォントサイズ：PC版表示でのバンドルタイトルのフォントサイズを設定します。
• タイトル PC版 フォントサイズ：PC版表示のフォントサイズを設定します。
• タイトル モバイル フォントサイズ：モバイル表示でのバンドルタイトルのフォントサイズを設定します。
• タイトルカラー：タイトルの色をカスタマイズします。ストアのテーマに合わせたい場合は、Follow theme colorsをチェックしてください。
• タイトルフォントの太さ：タイトルを太字にするには、Bold fontをチェックします。

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

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

3. 商品バンドルセクションで、バンドルに含まれる商品の設定を行います:

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

4. 購入ボタンセクションで、購入ボタンに関する設定を行います:

• ボタンテキストのPC版フォントサイズ: PC版表示での購入ボタンのテキストのフォントサイズを設定します。
• ボタンテキストのモバイルフォントサイズ: モバイル表示での購入ボタンのテキストのフォントサイズを設定します。
• ボタンの色: ボタンの背景とボタンのテキストの色をカスタマイズします。ストアのテーマに合わせたい場合は、テーマの色に従うにチェックを入れてください。
• ボタンの角丸半径: 購入ボタンのボーダー半径のスタイルを調整します。ストアのテーマに合わせたい場合は、テーマのボーダー半径設定を適用にチェックを入れてください。

5. コーディングの経験があり、CSSに慣れている場合は、Custom CSS セクションを使用してバンドルの表示をカスタマイズしてください。

   注意：  カスタムCSSコードが適用されている場合、それが優先され、Custom style で設定された衝突する設定を上書きします。 プレビューにはCSS設定の効果が反映されません。設定を保存し、ストアフロントで結果をご確認ください。

   

6. PC版とモバイルモードを切り替えて効果をプレビューします。結果に満足したら、Update をクリックして設定を保存し、申請してください。