Benutzerdefiniertes CSS zum Widget hinzufügen

Bundlex bietet dir einen vollständigen visuellen Editor für die Widget-Gestaltung. Manchmal musst du jedoch ein Detail anpassen, das der Editor nicht anbietet, oder etwas überschreiben, das dein Theme auf das Widget anwendet. Benutzerdefiniertes CSS ist genau dafür die Lösung für fortgeschrittene Nutzer. Dieser Artikel erklärt, an welchen zwei Stellen du CSS hinzufügen kannst und wie du das Widget zuverlässig ansprichst.

Zwei Stellen zum Hinzufügen von benutzerdefiniertem CSS

Es gibt zwei separate Felder für benutzerdefiniertes CSS, die sich in ihrem Geltungsbereich unterscheiden.

Das Feld für benutzerdefiniertes CSS des Bundles

Jedes Bundle verfügt über einen eigenen Bereich Benutzerdefiniertes CSS, der im Tab Stil verfügbar ist. Das hier eingefügte CSS wird zusammen mit diesem einen Bundle gespeichert. Es ist daher die richtige Wahl, wenn eine Anpassung nur dort gelten soll, wo dieses bestimmte Bundle angezeigt wird.

1. Öffne das Bundle im Bundlex-Dashboard.
2. Öffne den Tab Stil und klappe Benutzerdefiniertes CSS auf, den letzten Eintrag unter Widget-Stil.
3. Füge deine Regeln in den Code-Editor ein. Das Feld zeigt das Format anhand eines Platzhalters an: .bx-widget-container {margin-bottom: 10px;}.
4. Speichere das Bundle.

Das Feld für benutzerdefiniertes CSS des App-Embeds

Das Bundlex-App-Embed, also die Theme-App-Erweiterung, die du im Shopify-Theme-Editor unter „App-Embeds“ aktivierst, verfügt ebenfalls über ein Feld Benutzerdefiniertes CSS. Es wird angezeigt, wenn Erweiterte Einstellungen anzeigen aktiviert ist. Das CSS gilt überall dort, wo das Embed gerendert wird. Verwende es daher für Anpassungen am gesamten Theme, die auf jeder Produktseite gelten sollen, auf der das Widget erscheint.

1. Öffne im Shopify-Admin Onlineshop und klicke auf Theme bearbeiten.
2. Öffne App-Embeds und suche Bundlex Bundles.
3. Aktiviere Erweiterte Einstellungen anzeigen und füge deine Regeln in das Feld Benutzerdefiniertes CSS ein.
4. Speichere das Theme.

Als Faustregel gilt: Verwende das Feld des Bundles für Anpassungen pro Bundle und das Feld des App-Embeds für Änderungen, die überall gelten sollen, wo das Widget angezeigt wird.

Das Widget ansprechen

Das Markup von Bundlex verwendet bx--Klassen. Diese eignen sich als Selektoren im aktuellen Widget:

• .bx-widget-container - der Widget-Container.
• .bx-widget - der Widget-Inhalt.
• .bx-offer-wrap - ein Angebots-Wrapper.
• .bx-offer - die Angebotskarte innerhalb dieses Wrappers.
• .bx-active .bx-offer - die ausgewählte Angebotskarte. Die aktive Klasse befindet sich auf ihrem Wrapper.
• .bx-offer-title und .bx-offer-subtitle - Angebotstext.
• .bx-original-price und .bx-discounted-price - Text für ursprünglichen und reduzierten Preis.

Begrenze Regeln auf den Widget-Container. Beispiel:

.bx-widget-container .bx-offer-title {
  font-weight: 700;
}

Prüfe das Element auf deiner Produktseite, bevor du es gestaltest. Das Markup hängt von den aktivierten Funktionen ab, und ein aus einer älteren Widget-Version kopierter Selektor stimmt möglicherweise nicht mehr überein.

Theme-Stile mit !important überschreiben

Verwende zuerst die integrierten Steuerelemente. Für die Widget-Breite kannst du beispielsweise Stil > Widget-Stil > Container > Maximale Breite > Volle Breite (100 %) auswählen. Wenn eine Theme-Regel das Ergebnis weiterhin überschreibt, prüfe das betroffene Element und verwende !important nur für die Deklarationen, die dies benötigen. Beispiel:

.bx-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

Dieses Beispiel füllt den verfügbaren übergeordneten Container aus. Eine schmale Theme-Spalte kann dadurch nicht breiter werden. Wenn eine Regel keine Wirkung hat, prüfe, ob der Selektor mit einem gerenderten Element übereinstimmt, das Stylesheet geladen ist und die Deklaration gültig ist. Prüfe anschließend, welche konkurrierende Regel gewinnt. Ein spezifischerer Selektor kann ausreichen, ohne !important zu verwenden.

Wann du den Support um Hilfe bitten solltest

Beide Felder für benutzerdefiniertes CSS weisen darauf hin, dass du dich bei Bedarf an den Bundlex-Support wenden kannst, und dieses Angebot gilt tatsächlich. Wenn du den richtigen Selektor nicht herausfindest oder ein benutzerdefiniertes Theme deine Überschreibungen auf eine Weise bekämpft, die !important nicht behebt, sende dem Support einen Link zur Produktseite und eine Beschreibung der gewünschten Änderung. Der Support kann dir einen getesteten Selektor zum Einfügen bereitstellen.

Dasselbe gilt für die Selektorfelder, die über die Option Erweiterte Einstellungen anzeigen des Embeds eingeblendet werden, etwa für die benutzerdefinierte Platzierung, den Warenkorb-Button, das Produktformular sowie die Mengen- oder Variantenblöcke. Auch dabei handelt es sich um CSS-Selektoren. Der Support kann dir helfen, sie für benutzerdefinierte Themes auszufüllen, die nicht automatisch erkannt werden.

CSS ändert die Rabattregeln nicht. Es kann jedoch Preise, Auswahlmöglichkeiten oder Buttons ausblenden und Käufer daran hindern, das Widget zu verwenden. Teste nach dem Anwenden einer Regel alle Angebotszustände, Variantenoptionen und „In den Warenkorb“ auf Desktop und Mobilgeräten.