ウィジェットをテーマのカラーに合わせる方法

Bundlexでは、数回のクリックでバンドルウィジェットをストアのデザインに合わせられます。ウィジェットのカラープリセットパネルは、Shopifyテーマのカラースキームを読み取り、すぐに使えるカラーの組み合わせを提案します。そのため、オファーが後付けの要素ではなく、ページに自然に組み込まれているように見えます。

カラープリセットの場所

エディターでバンドルを開き、スタイルタブに移動します。ウィジェットのカラープリセットパネルは、詳細設定のウィジェットスタイルの上にあります。プリセットですべてを一度に設定してから、必要に応じて下にあるウィジェットスタイルセクションで各要素のカラーを微調整できます。

プライマリカラーを選択

プライマリカラーの行は、パレット全体の起点です。設定方法は4つあります。

• おすすめのスウォッチ - 色付きのスウォッチは、Shopifyテーマのカラースキームから直接取得されます。ボタンのカラー、テキスト、背景などが対象です。クリックすると適用されます。
• デフォルトカラー - テーマのスウォッチの後にある濃いグレーのスウォッチをクリックすると、ウィジェットのデフォルトの白黒カラーに戻ります。
• カスタムカラー - プラスアイコンの付いたスウォッチをクリックするとカラーピッカーが開き、任意の16進数カラーコードを選択できます。カラーコードを入力したらEnterキーを押し、プレビューが変わったことを確認します。
• ランダムカラー - 選択肢を試してみたい場合は、更新スウォッチをクリックしてランダムなカラーを生成します。

どのカラーを選んでも、Bundlexはそのカラーを基準にウィジェットの残りのカラーをすぐに再構成し、結果をライブプレビューに適用します。

アクセントカラー（セカンダリカラー）を選択

セカンダリカラーは、バッジ、アクティブ状態、ハイライトに使用されるアクセントカラーです。Bundlexはプライマリカラーと調和するように自動生成し、クリックして切り替えられる調和パターンをスウォッチとしていくつか提示します。

アクセントを自分で設定する場合は、プライマリ行と同じ2つの上書き方法を利用できます。

• カスタムアクセントカラー - プラスのスウォッチをクリックするとカラーピッカーが開き、正確な16進数カラーコードを指定できます。
• ランダム調和カラー - 更新スウォッチをクリックすると、カラーホイールからプライマリカラーと調和する対照的なカラーが選択されます。

オファーの透明化切り替え

プライマリカラーの横には、選択されていないオファーカードの背景を制御する透明の切り替えがあります。

• オフ - 選択されていないオファーの背景が単色になります。プリセットから選んだ場合はカラーの薄い色合いになり、各ティアが独立したカードとして表示されます。
• オン - 選択されていないオファーの背景が透明のままになり、ページに自然に溶け込む、よりすっきりとしたフラットな見た目になります。

切り替えによって変わるのは、選択されていないオファーの背景の透明度だけです。選択中とホバー時の背景、テキスト、バッジ、枠線のカラーはそのまま維持されます。オフにすると、背景は再び完全に不透明になります。オンの状態でクリックしたスウォッチには、そのプリセットの透明版が適用されます。

「枠線の角丸を適用」の提案

Bundlexがテーマから取り込めるのはカラーだけではありません。テーマの角丸がウィジェットの現在の角丸と異なることを検出すると、枠線の角丸を適用バナーが表示され、「ウィジェットの角をテーマに合わせる」というメッセージが表示されます。

1. バナーの適用をクリックすると、テーマの角丸がウィジェットのオファーカード、オファー画像、クロスセル画像に適用されます。
2. 現在の角丸を使用する場合は、閉じるアイコンをクリックして提案を閉じます。

検出された差異がない場合、テーマに使用可能な角丸が設定されていない場合、または提案を閉じた場合は、この提案が表示されないことがあります。ウィジェットスタイルで、角丸を手動で設定することもできます。

各要素を個別に微調整

パレットを選択したら、ウィジェットスタイルで要素を展開します。オファーカードでは、角丸、間隔、選択中、ホバー時、選択されていない状態を個別に調整できます。この例では、カードの角丸を8ピクセルに設定しています。まずプリセットを適用してから、最後にこれらの調整を行ってください。別のプリセットを選択すると、個別に設定したカラーが置き換えられる場合があります。

保存してストアフロントを確認

保存をクリックします。対象の商品ページで有効な割引をテストします。各オファーを選択し、テキストとバッジのコントラストを確認して、バリエーションを選び、「カートに追加」を使用します。エディターのプレビューではすべてのテーマ背景や画面サイズを表示できないため、デスクトップとモバイルの両方でページを確認してください。

この例では、同じ数量割引のルールを使用しています。Ivory Smallのバッグ2個の商品の小計は、10%オフ適用後で$43.20です。スタイルの変更は表示方法に影響しますが、割引の計算は変わりません。最終確認の一環として、カートとチェックアウトを確認してください。

提案の生成方法

Bundlexはテーマのカラー設定を読み取り、調和する色合いを生成します。テーマから生成された提案は、同じテーマ設定であれば再現されます。「ランダムカラー」と「ランダム調和カラー」のコントロールでは、意図的に新しい選択肢が生成されます。

ヒント

• プリセットは、すぐに使える出発点です。適用後も、ウィジェットスタイルで各要素のカラーを個別に調整できます。
• おすすめのスウォッチが表示されない場合、Bundlexが有効なテーマからカラー値を読み取れなかった可能性があります。その場合でも、カスタムとランダムのオプションは使用できます。
• ライブプレビューを使用してコントラストを確認してください。特に透明の切り替えがオンの場合は、ページの背景上でバッジとテキストが読みやすい状態になっていることを確認します。