ウィジェットにカスタムCSSを追加する
Bundlexにはウィジェットのスタイルを設定するための完全なビジュアルエディターがありますが、エディターで変更できない細部を調整したい場合や、テーマによってウィジェットに適用される設定を上書きしたい場合があります。カスタムCSSは、まさにそのための上級者向けの手段です。この記事では、CSSを追加できる2つの場所と、ウィジェットを確実に指定する方法について説明します。
カスタムCSSを追加できる2つの場所
カスタムCSSフィールドは2つあり、適用範囲が異なります。
バンドルのカスタムCSSフィールド
各バンドルには独自のCustom CSSセクションがあり、Styleタブから利用できます。ここに貼り付けたCSSはそのバンドルに紐付けられるため、そのバンドルが表示される場所にのみ変更を適用したい場合に適しています。
- Bundlexダッシュボードでバンドルを開きます。
- Styleタブを開き、Custom CSSを展開します。これはWidget styleの下にある最後の項目です。
- コードエディターにルールを貼り付けます。フィールドにはプレースホルダーで形式のヒントが表示されます:
.bx-widget-container {margin-bottom: 10px;}。 - バンドルを保存します。
アプリ埋め込みのカスタムCSSフィールド
Shopifyテーマエディターの「App embeds」で有効にするテーマアプリ拡張機能であるBundlexアプリ埋め込みにも、Custom CSSフィールドがあります。Show advanced settingsを有効にすると表示されます。ここに追加したCSSは埋め込みが表示されるすべての場所に適用されるため、ウィジェットが表示されるすべての商品ページに適用したいテーマ全体の調整に使用してください。
- Shopify管理画面でOnline Storeを開き、Edit themeをクリックします。
- アプリの埋め込みを開き、Bundlex Bundlesを見つけます。
- Show advanced settingsを有効にし、Custom CSSフィールドにルールを貼り付けます。
- テーマを保存します。
目安として、バンドルごとの調整にはbundleフィールドを、ウィジェットが表示されるすべての場所に適用する変更にはapp embedフィールドを使用してください。
ウィジェットを指定する
Bundlexのマークアップではbx-クラスが使用されています。現在のウィジェットでは、これらを指定対象として使用できます:
.bx-widget-container- ウィジェットのコンテナ。.bx-widget- ウィジェットのコンテンツ。.bx-offer-wrap- オファーのラッパー。.bx-offer- そのラッパー内のオファーカード。.bx-active .bx-offer- 選択中のオファーカード。activeクラスはそのラッパーに付与されます。.bx-offer-titleと.bx-offer-subtitle- オファーのテキスト。.bx-original-priceと.bx-discounted-price- 通常価格と割引価格のテキスト。
ルールの対象をウィジェットのコンテナに限定します。例:
.bx-widget-container .bx-offer-title {
font-weight: 700;
}スタイルを設定する前に、商品ページ上の要素を確認してください。マークアップは有効にしている機能によって異なり、古いウィジェットバージョンからコピーしたセレクターは一致しなくなっている可能性があります。
!importantでテーマのスタイルを上書きする
まずは組み込みのコントロールを使用してください。ウィジェットの幅を変更する場合は、Style > Widget style > Container > Max width > Full width (100%)を試してください。それでもテーマのルールが結果を上書きする場合は、影響を受ける要素を確認し、!importantは必要な宣言にのみ使用してください。例:
.bx-widget-container {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}この例では、利用可能な親コンテナの幅いっぱいに広がります。幅の狭いテーマのカラム自体を広げることはできません。ルールが反映されない場合は、セレクターがレンダリングされた要素と一致していること、スタイルシートが読み込まれていること、宣言が有効であることを確認してください。その後、競合するルールのうちどれが優先されているかを確認します。!importantを使わなくても、より具体的なセレクターで十分な場合があります。
サポートに相談するタイミング
どちらのカスタムCSSフィールドにも、必要に応じてBundlexサポートに問い合わせられる旨が記載されており、その案内は実際に利用できます。適切なセレクターが分からない場合や、カスタムテーマによる上書きが!importantで解決できない場合は、商品ページへのリンクと希望する変更内容をサポートに送ってください。貼り付けて使える、テスト済みのセレクターを案内してもらえます。
埋め込みのShow advanced settingsオプションで表示されるセレクターフィールド（カスタム配置、カートに追加ボタン、商品フォーム、数量またはバリエーションブロック用）についても同様です。これらもCSSセレクターであり、自動検出されないカスタムテーマの場合は、サポートが入力をお手伝いできます。
CSSによって割引ルールが変わることはありませんが、価格、選択肢、ボタンが非表示になり、購入者がウィジェットを使用できなくなる可能性があります。ルールを適用した後は、デスクトップとモバイルで、すべてのオファー状態、バリエーションの選択、カートに追加をテストしてください。
この記事は役に立ちましたか？
皆さまからのフィードバックがドキュメントの改善に役立ちます。