Das Bundlex-Widget an die Farben deines Themes anpassen

Bundlex kann das Bundle-Widget mit wenigen Klicks an das Erscheinungsbild deines Shops anpassen. Das Bedienfeld Farbvoreinstellungen für das Widget liest die Farbschemata deines Shopify-Themes aus und schlägt fertige Farbkombinationen vor, sodass deine Angebote wie ein nativer Bestandteil der Seite und nicht wie ein nachträglich hinzugefügtes Element wirken.

Wo du die Farbvoreinstellungen findest

(1) Wähle eine Primärfarbe und einen sekundären Akzent. (2) Die Einstellung „Transparent“ wirkt sich auf den Hintergrund des nicht ausgewählten Angebots aus. (3) Mit „Anwenden“ kannst du die Ecken an das Theme anpassen. Die Vorschau behält die gespeicherten individuellen Farben dieses Entwurfs bei.

Öffne ein Bundle im Editor und wechsle zum Tab Stil. Das Bedienfeld Farbvoreinstellungen für das Widget befindet sich über den detaillierten Einstellungen für den Widget-Stil. Verwende die Voreinstellungen, um alles auf einmal festzulegen, und passe einzelne Elementfarben anschließend im Abschnitt Widget-Stil darunter an, wenn du möchtest.

Primärfarbe auswählen

(1) Gib den Hexwert ein und drücke die Eingabetaste. (2) Prüfe die aktualisierte Palette in der Vorschau, bevor du speicherst. Diese Demonstration wurde anschließend verworfen.

Die Zeile Primärfarbe bildet den Ausgangspunkt für die gesamte Palette. Du kannst sie auf vier Arten festlegen:

Vorgeschlagene Farbfelder - die farbigen Farbfelder werden direkt aus den Farbschemata deines Shopify-Themes übernommen, etwa aus Buttonfarben, Textfarben, Hintergründen und mehr. Klicke auf eines, um es anzuwenden.
Standardfarben - das dunkelgraue Farbfeld nach den Farbfeldern deines Themes stellt die standardmäßigen schwarzen und weißen Widget-Farben wieder her.
Benutzerdefinierte Farbe - klicke auf das Farbfeld mit dem Plus-Symbol, um eine Farbauswahl zu öffnen und einen beliebigen Hexwert auszuwählen. Drücke nach der Eingabe des Hexwerts die Eingabetaste und prüfe, ob sich die Vorschau ändert.
Zufällige Farbe - klicke auf das Aktualisierungs-Farbfeld, um eine zufällige Farbe auszuwählen, wenn du einfach Optionen erkunden möchtest.

Unabhängig davon, wofür du dich entscheidest, erstellt Bundlex die übrigen Widget-Farben sofort neu und wendet das Ergebnis auf die Live-Vorschau an.

Akzentfarbe (sekundäre Farbe) auswählen

Die Sekundärfarbe ist der Akzent für Badges, aktive Zustände und Hervorhebungen. Bundlex erzeugt sie automatisch passend zu deiner Primärfarbe und bietet mehrere harmonische Optionen als anklickbare Farbfelder an.

Wenn du den Akzent lieber selbst festlegen möchtest, stehen dir dieselben zwei Überschreibungsoptionen wie in der Zeile für die Primärfarbe zur Verfügung:

Benutzerdefinierte Akzentfarbe - das Plus-Farbfeld öffnet eine Auswahl für einen exakten Hexwert.
Zufällige harmonische Farbe - das Aktualisierungs-Farbfeld wählt aus dem Farbkreis eine kontrastierende Farbe aus, die weiterhin zu deiner Primärfarbe passt.

Schalter für transparente Angebote

Neben der Primärfarbe findest du einen Schalter Transparent, der den Hintergrund nicht ausgewählter Angebotskarten steuert:

Aus - Hintergründe nicht ausgewählter Angebote erhalten eine deckende Farbe, bei einer Voreinstellung einen hellen Farbton deiner Farben. Dadurch wird jede Stufe als eigene Karte dargestellt.
Ein - Hintergründe nicht ausgewählter Angebote bleiben transparent. Das sorgt für ein klareres, flacheres Erscheinungsbild, das sich in die Seite einfügt.

Das Umschalten ändert nur die Transparenz des Hintergrunds nicht ausgewählter Angebote. Die Hintergründe sowie die Text-, Badge- und Rahmenfarben der ausgewählten und per Hover aktivierten Zustände bleiben unverändert. Wenn du den Schalter deaktivierst, wird der Hintergrund wieder vollständig deckend. Farbfelder, die du bei aktivierter Transparenz anklickst, wenden die transparente Version der jeweiligen Voreinstellung an.

Der Vorschlag „Eckenradius anwenden“

Bundlex kann nicht nur Farben aus deinem Theme übernehmen. Wenn festgestellt wird, dass sich der Eckenradius deines Themes von den aktuellen Widget-Ecken unterscheidet, erscheint ein Banner Eckenradius anwenden mit dem Hinweis „Widget-Ecken an dein Theme anpassen.“

Klicke im Banner auf Anwenden, um den Eckenradius deines Themes auf die Angebotskarten, Angebotsbilder und Cross-Sell-Bilder des Widgets anzuwenden.
Oder schließe ihn mit dem Schließen-Symbol, wenn du deine aktuellen Ecken beibehalten möchtest.

Der Vorschlag kann fehlen, weil kein Unterschied festgestellt wurde, das Theme keinen verwendbaren Radius bereitstellt oder du ihn geschlossen hast. Du kannst die Ecken weiterhin unter Widget-Stil selbst festlegen.

Einzelne Elemente fein abstimmen

(1) Lege Kartenecken und Abstände fest. (2) Gestalte ausgewählte, per Hover aktivierte und nicht ausgewählte Zustände separat. Das gespeicherte Beispiel verwendet einen Eckenradius von 8 px.

Nachdem du deine Palette ausgewählt hast, erweitere unter Widget-Stil ein Element. Mit Angebotskarte kannst du den Eckenradius, die Abstände sowie die ausgewählten, per Hover aktivierten und nicht ausgewählten Zustände separat anpassen. In diesem Beispiel haben wir den Eckenradius der Karte auf 8 Pixel festgelegt. Wende zuerst Voreinstellungen an und nimm anschließend diese letzten Anpassungen vor, da die Auswahl einer anderen Voreinstellung individuelle Farbauswahlen ersetzen kann.

Speichern und Storefront prüfen

(1) Die gespeicherten Farben heben die ausgewählte Karte „2 kaufen“ hervor. (2) Jede Zeile „Ivory / Small“ zeigt denselben verfügbaren Bestand von 12. Dies ist keine Reservierung und kein separater Bestandspool für jede Zeile. Zwei Taschen haben nach 10 % Rabatt eine Warensumme von 43,20 USD.

Klicke auf Speichern. Teste einen aktiven Rabatt auf der zugehörigen Produktseite. Wähle jedes Angebot aus, prüfe den Kontrast von Text und Badge, wähle Varianten aus und verwende „In den Warenkorb“. Prüfe die Seite auf Desktop und Mobilgeräten, da die Editorvorschau nicht jeden Theme-Hintergrund und jede Bildschirmgröße anzeigen kann.

Unser Beispiel behält dieselben Regeln für Mengenrabatte bei: Zwei Taschen der Variante „Ivory Small“ haben nach 10 % Rabatt eine Warensumme von 43,20 USD. Die Gestaltung ändert die Darstellung, nicht die Rabattberechnung. Prüfe den Warenkorb und die Kasse als Teil deiner abschließenden Kontrolle.

So werden Vorschläge erstellt

Bundlex liest die Farbeinstellungen deines Themes aus und leitet passende Farbtöne ab. Die aus dem Theme abgeleiteten Vorschläge sind bei denselben Theme-Einstellungen reproduzierbar. Die Steuerelemente für zufällige Farben und zufällige harmonische Farben erzeugen bewusst neue Auswahlen.

Tipps

Voreinstellungen sind ein schneller Ausgangspunkt. Nach dem Anwenden kannst du jede einzelne Elementfarbe weiterhin unter Widget-Stil anpassen.
Wenn keine vorgeschlagenen Farbfelder angezeigt werden, konnte Bundlex keine Farbwerte aus deinem aktiven Theme auslesen. Du kannst weiterhin die benutzerdefinierten und zufälligen Optionen verwenden.
Verwende die Live-Vorschau, um den Kontrast zu prüfen, insbesondere bei aktiviertem Schalter Transparent, damit Badges und Text auf dem Hintergrund deiner Seite lesbar bleiben.

So passt du das Widget an die Farben deines Themes an