Das Erscheinungsbild jedes Widget-Elements anpassen

Der Abschnitt Widget-Stil unterteilt das Widget auf der Produktseite in einzelne Elemente, sodass du jedes separat gestalten kannst. Öffne ihn im Bundle-Editor. Dort findest du eine Reihe von Akkordeon-Bedienfeldern, eines pro Element, in denen du Farben, Schriftarten, Rahmen, Abstände, Badges und mehr steuerst.

So funktioniert der Abschnitt „Widget-Stil“

Öffne den Tab Style des Bundles und suche nach Widget style. Klicke auf eine Panel-Überschrift, um die Steuerelemente des jeweiligen Elements anzuzeigen. Wenn du den Mauszeiger über eine Überschrift bewegst, wird das entsprechende Element in der Vorschau hervorgehoben. Einige Panels werden nur angezeigt, wenn die entsprechende Funktion im Bundle verfügbar ist.

Die meisten Panels bestehen aus denselben Bausteinen: einer Farbauswahl, einer Schriftgröße und einer Auswahl für den Schriftstil. Panels, die einen Bereich gestalten, etwa die Angebotskarte oder ein Badge, bieten zusätzlich Hintergrundfarbe, Rahmenfarbe, Rahmenbreite und Eckenradius. Deine Änderungen werden zusammen mit dem restlichen Bundle gespeichert.

Die Panels, Element für Element

Kopfzeile

Steuert Textfarbe, Schriftgröße und Schriftstil der Widget-Kopfzeile. Gib den Kopfzeilentext weiter oben im Tab Style ein, um Header alignment anzuzeigen (Left, Center, Center line through oder Right). Wenn die Ausrichtung auf Center line through gesetzt ist, wird in diesem Panel eine zusätzliche Einstellung für die Farbe und Stärke der Linie angezeigt.

Angebotskarte

Dies ist der Bereich um jedes Angebot (jede Mengenstufe). Es ist das größte Panel, da es drei visuelle Zustände abdeckt:

• Offer not selected: Hintergrundfarbe, Rahmenfarbe und Rahmenbreite für den Standardzustand.
• Offer hover: dieselben drei Einstellungen, wenn ein Kunde den Mauszeiger über die Karte bewegt.
• Offer selected: dieselben drei Einstellungen für das aktuell ausgewählte Angebot.

Das Panel legt außerdem gemeinsame Eigenschaften der Karten fest: Eckenradius, Abstand zwischen den Karten sowie horizontale und vertikale Innenabstände. Außerdem enthält es die Option Radio, mit der du das Optionsfeld ein- oder ausblenden kannst. Der animierte Hintergrundeffekt wird separat über den weiter oben im Tab Style befindlichen Schalter Decoration festgelegt (Blobs, Rings, Hearts, Starburst, Percent, Stars, Clock oder Money) und erscheint nur beim ausgewählten Angebot. Die Farben der Angebotskarte steuern auch das Erscheinungsbild des Optionsfelds.

Angebotstitel und Angebotsuntertitel

Zwei separate Panels, jeweils mit Farbe, Schriftgröße und Schriftstil für die Titelzeile und die Untertitelzeile des Angebots.

Rabattbezeichnung

Gestaltet die Rabattbezeichnung mit Textfarbe, Hintergrundfarbe, Schriftgröße und Schriftstil. Beachte, dass diese Einstellungen auch zusätzliche Geschenkbeschriftungen beeinflussen.

Angebotsbild

Steuert Größe, Eckenradius, Rahmenfarbe und Rahmenbreite des Angebotsbilds sowie einen Shadow (None, Small, Medium oder Large). Außerdem wird festgelegt, wie das Bild angezeigt wird:

• Original: behält das native Seitenverhältnis des Bilds bei.
• Square: schneidet das Bild quadratisch zu.
• Square (top): schneidet das Bild quadratisch zu und behält den oberen Bereich bei.
• Square (fit): passt das gesamte Bild ohne Zuschneiden in ein Quadrat ein.

Mengen-Badge

Gestaltet die kleine Mengenangabe, die auf dem Angebotsbild angezeigt werden kann. Du kannst Textfarbe, Hintergrundfarbe, Eckenradius, Schriftgröße, Schriftstil und Position festlegen (Top right, Top left, Bottom right oder Bottom left). Diese Zahl wird auf dem Angebotsbild angezeigt, wenn „Show quantity badge“ aktiviert ist.

Variantenbezeichnung

Legt Farbe, Schriftgröße und Schriftstil der Titel von Variantenoptionen (zum Beispiel Größe oder Farbe) sowie deren Zeilennummern fest.

Dropdown

Verwende für Variantendropdowns das separate Panel Dropdown, um Text, Hintergrund, Rahmen, Ecken und Innenabstände anzupassen.

Angebots-Badge

Das Badge ist der Hinweis (zum Beispiel „Most popular“) auf einem Angebot. Neben der üblichen Textfarbe, Hintergrundfarbe, Schriftgröße und dem Schriftstil bietet dieses Panel eine Auswahl Badge shape mit zahlreichen Voreinstellungen:

• Default, Folded, Pill
• Arrow Right, Arrow Left
• Square
• Banner, Banner Rounded
• Corner Ribbon, Side Ribbon, Side Ribbon Alt, Side Ribbon Rounded

Preis

Das Panel Price umfasst drei Textstile, jeweils mit eigener Farbe, Schriftgröße und eigenem Schriftstil:

• Main price: der aktuelle Verkaufspreis.
• Compare price: der durchgestrichene „Vorher“-Preis.
• Per item text: der Text mit dem Preis pro Einheit.

Bundle

Produkt-Bundles verfügen außerdem über ein Panel Bundle für den Produktnamen, den Rahmen zwischen Bundle-Artikeln und das Pluszeichen zwischen den Produkten.

Vorteile

Gestaltet die Aufzählung der Vorteile. Hier legst du eine gemeinsame Schriftgröße und einen gemeinsamen Schriftstil sowie eine separate Text color und Icon color fest, damit sich Symbole und Text unterscheiden können.

Geschenk und Upsell

Gestaltet den Bereich für Gratisgeschenke in zwei Zuständen, jeweils mit Hintergrundfarbe, Titelfarbe, Schriftgröße und Schriftstil:

• Selected offer gift: der Geschenkbereich des ausgewählten Angebots.
• Not selected offer gift: der Geschenkbereich anderer Angebote.

Eine dritte Gruppe, Gift image, steuert die Breite und den Eckenradius des Geschenkbilder.

Bilder von Geschenken und Mix-&-Match-Popups

Öffne Style > Modal style > Gift modal und suche nach Image fit. Du kannst diese Einstellungen auch über Customize modal style neben einer Geschenkauswahl oder Mix-&-Match-Auswahl aufrufen. Wähle Original, um die Proportionen des gesamten Fotos beizubehalten, oder Square für einheitliche Vorschaubilder. Die Einstellung wird von Popups zur Geschenkauswahl und zur Bundle-Auswahl innerhalb dieses Rabatts gemeinsam verwendet. Die Bilder des Haupt-Widgets nutzen die separaten Einstellungen für Angebotsbilder.

Fußzeile

Legt Farbe, Schriftgröße und Schriftstil des Fußzeilentexts des Widgets fest.

Container und maximale Breite

Das Panel Container steuert die Gesamtbreite des Widgets über die Einstellung Max width:

• Shopify default (44rem): begrenzt das Widget innerhalb des verfügbaren Bereichs auf 44rem.
• Full width (100%): lässt das Widget die gesamte Breite seines Containers einnehmen.
• Custom: zeigt ein Feld Width an, in das du einen Pixelwert eingibst.

Dieses Panel enthält außerdem eine Alert color, die für den Warntext zu niedrigem Lagerbestand verwendet wird.

Verwende hier Margin top und Margin bottom, um den Abstand um das Widget dieses Rabatts anzupassen, bevor du benutzerdefiniertes CSS hinzufügst.

Full width füllt den übergeordneten Container des Widgets aus. Eine schmale Produktinformationsspalte in deinem Theme kann dadurch nicht verbreitert werden.

Tipps zur Bearbeitung

• Beobachte während der Bearbeitung die Live-Vorschau. Da das Bewegen des Mauszeigers über eine Panel-Überschrift das entsprechende Element hervorhebt, kannst du vor dem Ändern eines Werts prüfen, ob du den richtigen Bereich bearbeitest.
• Gestalte die drei Zustände der Angebotskarte (nicht ausgewählt, Hover, ausgewählt) gemeinsam, damit sich der ausgewählte Zustand deutlich vom Rest abhebt.
• Wenn du eine Gestaltung benötigst, die in den Panels nicht angeboten wird, kannst du im Panel Custom CSS am Ende des Abschnitts CSS hinzufügen, um die Widget-Stile zu überschreiben.