Das Erscheinungsbild anpassen: Voreinstellungen, Farben, Schriften, benutzerdefiniertes CSS

Designoptionen pro Angebot, shopweite Voreinstellungen und die CSS-Klassen, die Sie ansprechen können.

5 Min. Lesezeit

Pro Angebot (Schritt 3 des Assistenten)

Layout: Gestaffelte Karten, Horizontal, Einfache Tabelle. „Häufig zusammen gekauft“ verwendet immer das nebeneinander liegende Layout.
Labels „Am beliebtesten“ und „Bestes Preis-Leistungs-Verhältnis“ auf ausgewählten Staffeln.
Vergleichspreis (durchgestrichen) ein- oder ausgeschaltet.
Theme-Farben übernehmen (empfohlen) oder eine Akzentfarbe; Eckenradius 0 bis 20 px.
Widget-Titel und Position (unter dem Preis oder über dem Kaufen-Button; Sie können den Block im Editor weiterhin verschieben).

Shopweit (Einstellungen › Allgemein › Erweitert)

Stil-Voreinstellungen: Wie Theme, Minimal, Sanft, Kräftig. Sie ändern Rahmen, Abzeichen und Tönung auf einmal.
Überschreiben von Akzentfarbe und Schriftfamilie.
Textrichtung: Auto (folgt der Storefront-Sprache), von links nach rechts, von rechts nach links.
Benutzerdefiniertes CSS mit bis zu 5.000 Zeichen, eingefügt auf Produktseiten und im Warenkorb neben dem Widget.

Theme-Editor (Blockeinstellungen)

Layout-Überschreibung, Größe (kompakt / komfortabel), Abstände und ein zweites Feld für benutzerdefiniertes CSS pro Blockinstanz.

CSS-Klassen

Alles beginnt mit .bf-: .bf-widget, .bf-title, .bf-tier, .bf-tier.is-selected, .bf-badge, .bf-add (Button), .bf-fbt-item, .bf-urgency, .bf-cart-bar, .bf-cart-track, .bf-card-badge. Größen sind in em angegeben, daher skaliert eine Änderung von font-size auf .bf-widget das gesamte Widget.

Häufige Probleme

Farbe oder Form des Buttons passen nicht zu meinem Theme.

Das Widget liest Farbe, Textfarbe, Eckenradius, Rahmen und Schrift des primären Buttons aus Themes der Dawn- und Horizon-Familie (Dawn, Sense, Craft, Horizon, Tinker, Ritual und die anderen Shopify-Themes). Ein Drittanbieter-Theme, das keine dieser Variablen bereitstellt, erhält einen fast schwarzen Button: Legen Sie unter Einstellungen › Widget oder im Angebot eine Akzentfarbe fest, und der Text wird automatisch schwarz oder weiß.

Das Widget wirkt winzig oder riesig.

Das Theme legt eine andere Basis-Schriftgröße fest. Verwenden Sie die Einstellung Größe im Block (kompakt/komfortabel) oder benutzerdefiniertes CSS: .bf-widget { font-size: 15px; }.

Mehr in Onlineshop

← Alle Artikel · Weiter: Sprachen, Übersetzungen und RTL-Shops · Kommen Sie nicht weiter? Support kontaktieren