各ウィジェット要素の見た目をカスタマイズする

ウィジェットスタイルセクションでは、商品ページのウィジェットを個別の要素に分け、それぞれを個別にスタイル設定できます。バンドルエディターで開くと、要素ごとに1つずつアコーディオンパネルが表示され、カラー、フォント、枠線、間隔、バッジなどを設定できます。

ウィジェットスタイルセクションの使い方

バンドルのスタイルタブを開き、ウィジェットスタイルを見つけます。パネルの見出しをクリックすると、その要素の設定が表示されます。見出しにカーソルを合わせると、プレビュー内の対応する要素がハイライトされます。バンドルで該当する機能を利用できる場合にのみ表示されるパネルもあります。

ほとんどのパネルには、カラーピッカー、フォントサイズ、フォントスタイルセレクターという共通の設定があります。オファーカードやバッジなど、ボックスをスタイル設定するパネルでは、背景カラー、枠線カラー、枠線の太さ、角丸も設定できます。変更内容は、バンドルの他の設定と一緒に保存されます。

パネルの詳細

ヘッダー

ウィジェットヘッダーのテキストカラー、フォントサイズ、フォントスタイルを設定します。スタイルタブの上部でヘッダーテキストを入力すると、ヘッダーの配置（左、中央、中央線、右）を表示できます。配置を中央線に設定すると、このパネルに線のカラーと太さを設定する追加項目が表示されます。

オファーカード

各オファー（数量ティア）の周囲に表示されるボックスです。次の3つの表示状態を設定できるため、最も大きなパネルになっています。

• オファーが未選択: デフォルト状態の背景カラー、枠線カラー、枠線の太さ。
• オファーのホバー時: 購入者がカードにカーソルを合わせたときに適用される、同じ3つのコントロールです。
• 選択中のオファー: 現在選択されているオファーに適用される、同じ3つのコントロールです。

このパネルでは、カード共通のプロパティも設定できます。角の丸み、カード間の間隔、水平方向と垂直方向のパディング、ラジオボタンを表示または非表示にするラジオオプションです。アニメーション背景効果は、スタイルタブの上部にある装飾トグルで個別に設定します（ブロブ、リング、ハート、スターバースト、パーセント、星、時計、マネー）。この効果は選択中のオファーにのみ表示されます。オファーカードの色は、ラジオボタンの外観にも影響します。

オファータイトルとオファーサブタイトル

オファーのタイトル行とサブタイトル行について、それぞれ色、フォントサイズ、フォントスタイルを設定できる2つの独立したパネルです。

割引ラベル

テキストカラー、背景色、フォントサイズ、フォントスタイルで割引ラベルを設定します。これらの設定は、ギフト追加バッジにも適用されます。

オファー画像

オファー画像のサイズ、角の丸み、枠線の色、枠線の幅、影（なし、小、中、大）を設定します。また、画像の表示方法も設定できます。

• オリジナル: 画像本来のアスペクト比を維持します。
• 正方形: 画像を正方形に切り抜きます。
• 正方形（上）: 画像を正方形に切り抜き、上部を表示します。
• 正方形（フィット）: 切り抜かずに画像全体を正方形内に収めます。

数量バッジ

オファー画像上に表示できる小さな数量の数字を設定します。テキストカラー、背景色、角の丸み、フォントサイズ、フォントスタイル、位置（右上、左上、右下、左下）を設定できます。「数量バッジを表示」が有効になっている場合、この数字がオファー画像上に表示されます。

バリアントラベル

バリアントオプションのタイトル（サイズやカラーなど）とその行番号の色、フォントサイズ、フォントスタイルを設定します。

ドロップダウン

バリアントのドロップダウンでは、独立したドロップダウンパネルを使用して、テキスト、背景、枠線、角、パディングを調整します。

オファーバッジ

バッジは、オファー上に表示される「人気No.1」などの訴求ラベルです。通常のテキストカラー、背景色、フォントサイズ、フォントスタイルに加えて、このパネルには多くのプリセットから選べるバッジ形状セレクターがあります。

• デフォルト、折り返し、ピル
• 右矢印、左矢印
• 正方形
• バナー、角丸バナー
• コーナーリボン、サイドリボン、サイドリボン（別タイプ）、角丸サイドリボン

価格

価格パネルでは、3種類のテキストスタイルを設定できます。それぞれに独自の色、フォントサイズ、フォントスタイルがあります。

• メイン価格: 現在の販売価格です。
• 比較価格: 取り消し線付きの「変更前」の価格です。
• 商品単価テキスト: 1個あたりの価格テキストです。

バンドル

商品バンドルには、商品タイトルのテキスト、バンドル内の商品間の区切り線、商品間のプラス記号を設定するバンドルパネルもあります。

特典

特典の箇条書きリストを設定します。共通のフォントサイズとフォントスタイルに加えて、テキストカラーとアイコンカラーを個別に設定できるため、アイコンと文言に異なる色を指定できます。

ギフトとアップセル

無料ギフトブロックを2つの状態ごとに設定します。それぞれ背景色、タイトルカラー、フォントサイズ、フォントスタイルを指定できます。

• 選択中のオファーのギフト: 選択中のオファーに表示されるギフトブロックです。
• 未選択のオファーのギフト: その他のオファーに表示されるギフトブロックです。

3つ目のグループであるギフト画像では、ギフト画像の幅と角の丸みを設定します。

ギフトとミックス&マッチのポップアップ画像

スタイル > モーダルスタイル > ギフトモーダルを開き、画像のフィットを見つけます。ギフトまたはミックス&マッチセレクターの横にあるモーダルスタイルをカスタマイズからも、これらのコントロールにアクセスできます。写真全体の比率を維持するにはオリジナルを、サムネイルを統一するには正方形を選択します。この設定は、この割引内のギフト選択ポップアップとバンドルプールポップアップで共有されます。メインウィジェットの画像には、独立したオファー画像の設定が適用されます。

フッター

ウィジェットのフッターテキストの色、フォントサイズ、フォントスタイルを設定します。

コンテナと最大幅

コンテナパネルでは、最大幅設定によってウィジェット全体の幅を調整します。

• Shopifyのデフォルト（44rem）: 利用可能なスペース内でウィジェットの幅を44remまでに制限します。
• 全幅（100%）: ウィジェットをコンテナいっぱいに広げます。
• カスタム: ピクセル値を入力する幅フィールドを表示します。

このパネルには、在庫僅少アラートテキストに使用するアラートカラーもあります。

カスタムCSSを追加する前に、ここで上マージンと下マージンを使用して、この割引のウィジェット周辺の余白を調整します。

全幅では、ウィジェットの親コンテナいっぱいに広がります。テーマ内の狭い商品情報カラムを広げることはできません。

編集のヒント

• 作業中はライブプレビューを確認してください。パネルの見出しにカーソルを合わせると対応する要素がハイライトされるため、値を変更する前に正しい部分を編集しているか確認できます。
• オファーカードの3つの状態（未選択、ホバー、選択中）をまとめて設定し、選択中の状態が他の状態から明確に目立つようにします。
• パネルで設定できないスタイルが必要な場合は、セクション下部のカスタムCSSパネルでCSSを追加し、ウィジェットのスタイルを上書きできます。