So fügst du eine fixierte Warenkorb-Leiste hinzu

Die fixierte Warenkorb-Leiste hält deine Angebote beim Durchsuchen der Produktseite in Reichweite. Mit ihrer Schaltfläche können Kundinnen und Kunden zurück zu den Angeboten scrollen oder das ausgewählte Angebot direkt in den Warenkorb legen. Du kannst sie anzeigen, nachdem sie über das Widget hinausgescrollt haben, oder bereits beim Laden der Seite.

Fixierten Warenkorb-Button aktivieren

Die fixierte Leiste wird im Bundle-Editor für jedes Bundle einzeln konfiguriert.

1. Öffne das Bundle, das du bearbeiten möchtest.
2. Öffne den Tab Add-ons und erweitere anschließend Fixierte Warenkorb-Leiste.
3. Aktiviere den Schalter neben dem Titel Fixierte Warenkorb-Leiste.

Die Leiste wird auf den Produktseiten angezeigt, auf denen dieses Bundle erscheint. Stelle daher sicher, dass das Bundle veröffentlicht ist und dein Widget so eingestellt ist, dass es auf den richtigen Produkten angezeigt wird.

Aktion der Schaltfläche auswählen

Die Schaltflächenaktion bietet zwei Optionen:

• Zu den Angeboten scrollen bringt Kundinnen und Kunden zurück zum Widget, um ein Angebot auszuwählen.
• Ausgewähltes Angebot in den Warenkorb legen zeigt das ausgewählte Angebot an und legt es mit den gewählten Produkten, Geschenken und Extras in den Warenkorb.

Im Modus zum Hinzufügen in den Warenkorb folgt die Leiste Änderungen am ausgewählten Angebot, an Varianten, Mengen, Abonnements und Add-ons. Die Gesamtsumme entspricht der Fußzeile des Widgets. Du kannst Preis anzeigen, Originalpreis anzeigen, Spar-Badge anzeigen und Preis in der Schaltfläche anzeigen aktivieren.

Wenn Kundinnen und Kunden noch eine Variante auswählen oder einen Bundle-Platz ausfüllen müssen, führt die Schaltfläche sie zum Widget, damit sie den Vorgang abschließen können. Wenn kein Angebot ausgewählt ist, werden sie aufgefordert, Optionen auszuwählen. Bei Themes, die ein direktes Hinzufügen verhindern, scrollt die Schaltfläche stattdessen zum Widget. Rabatte mit ausschließlich optionalen Add-ons verwenden die Aktion „Zu den Angeboten scrollen“, damit Kundinnen und Kunden ihre Auswahl im Widget treffen können. Diese Schaltfläche verwendet den normalen Warenkorbablauf, nicht „Jetzt kaufen“.

Anzeigezeitpunkt der Leiste auswählen

Wähle unter Leiste anzeigen die Option Nachdem das Widget aus dem sichtbaren Bereich gescrollt wurde oder Immer, ab dem Laden der Seite. Beide Optionen funktionieren mit jeder Schaltflächenaktion. Bestehende Leisten behalten ihr Verhalten nach dem Scrollen bei, sofern du es nicht änderst.

Wenn „Immer“ ausgewählt ist, startet der Modus zum Hinzufügen in den Warenkorb mit deinem vorausgewählten Angebot und folgt späteren Auswahlen. Wenn du zulässt, dass die Seite ohne ausgewähltes Angebot geladen wird, müssen Kundinnen und Kunden ein Angebot auswählen, bevor die Leiste es in den Warenkorb legen kann.

Layout auswählen: Schwebend oder Fixiert

Verwende die Option Layout der fixierten Leiste, um festzulegen, wie die Leiste auf der Seite positioniert wird:

• Schwebend - eine zentrierte Karte mit kleinem Abstand zu den Rändern und abgerundeten Ecken.
• Fixiert - eine über die gesamte Breite reichende Leiste, die am unteren Rand befestigt ist und von Kante zu Kante verläuft.

Die beiden Layouts behandeln die Abrundung der Ecken unterschiedlich. Beim Wechsel zu Fixiert wird der Eckenradius auf 0 gesetzt, damit die Leiste bündig an den Bildschirmrändern anliegt. Beim Wechsel zu Schwebend wird eine abgerundete Ecke wiederhergestellt, wenn der Radius zuvor 0 war. Du kannst den Eckenradius anschließend in den Stileinstellungen weiter anpassen (siehe unten), aber „Fixiert“ ist für eckige Ecken ausgelegt.

Auf Desktop und Mobilgeräten anzeigen

Zwei Kontrollkästchen bestimmen, wo die Leiste angezeigt wird:

• Auf Desktop anzeigen
• Auf Mobilgeräten anzeigen

Beide Optionen sind standardmäßig aktiviert. Du kannst eine davon deaktivieren, um die fixierte Leiste beispielsweise nur auf Mobilgeräten anzuzeigen, wo die ursprüngliche Schaltfläche zum Hinzufügen in den Warenkorb wahrscheinlich aus dem sichtbaren Bereich scrollt.

Prüfe die tatsächliche mobile Seite mit deinem längsten Angebotstitel und Preis. Auf schmalen Bildschirmen vereinfacht die Leiste einige Angaben zu Originalpreis, Ersparnis und Preis in der Schaltfläche, damit die Aktion lesbar bleibt. Erwarte nicht, dass jedes Detail der Desktop-Version auf einem kleinen Smartphone angezeigt wird.

Titel und Schaltflächentext festlegen

Im Modus „Zu den Angeboten scrollen“ enthält die fixierte Leiste zwei Textfelder:

• Titel - der neben der Schaltfläche angezeigte Text. Er unterstützt Vorlagenvariablen, sodass du dynamische Werte wie {{product_title}} (Standard), {{saved_percentage}} oder {{price_total}} einfügen kannst. Verwende den Variablen-Einfüger im Feld, um sie hinzuzufügen.
• Schaltflächentext - die Beschriftung der fixierten Schaltfläche. Der Standardwert ist „Bundle auswählen“.

Der Modus zum Hinzufügen in den Warenkorb zeigt den Titel des ausgewählten Angebots an und verwendet sein eigenes Feld Text der Schaltfläche „In den Warenkorb“. Die beiden Schaltflächentexte haben separate Übersetzungen. Wenn du den Wortlaut eines Modus änderst, wird der andere nicht überschrieben.

Unter Wortlaut der fixierten Leiste kannst du außerdem das Gratisgeschenk-Badge, die Badges für einzelne und mehrere Add-ons sowie den Text der Schaltfläche Optionen auswählen ändern. Lass {{count}} in der Nachricht für mehrere Add-ons stehen, damit die tatsächliche Anzahl angezeigt werden kann.

Eingebetteten Countdown hinzufügen (optional)

Mit dem Kontrollkästchen Countdown in der fixierten Leiste anzeigen kannst du einen Countdown in der fixierten Leiste anzeigen.

Diese Option setzt voraus, dass der Countdown-Timer für dasselbe Bundle aktiviert ist. Wenn der Countdown-Timer deaktiviert ist, ist das Kontrollkästchen deaktiviert und kann nicht ausgewählt werden. Sobald du den Countdown-Timer aktivierst, kannst du diese Option einschalten.

Der eingebettete Countdown verwendet den kompakten Titel aus den Einstellungen des Countdown-Timers erneut. Sein Stil richtet sich nach dem Design der fixierten Leiste.

Wenn du den Countdown-Timer später deaktivierst, wird der Countdown der fixierten Leiste automatisch ausgeschaltet.

Fixierte Leiste gestalten

Öffne die Gruppe Stil der fixierten Leiste zum Hinzufügen in den Warenkorb, um das Erscheinungsbild anzupassen. Die Einstellungen sind in Akkordeons gruppiert:

• Hintergrund - Volltonfarbe oder Farbverlauf für die Leiste.
• Container - Rahmenfarbe, Rahmenbreite, Eckenradius, Innenabstand und Schatten.
• Titel - Textfarbe, Schriftgröße und Schriftstärke.
• Preis - Gestaltung des Preises im Modus zum Hinzufügen in den Warenkorb.
• Schaltfläche - Hintergrundfarbe, Textfarbe, Schriftgröße, Schriftstärke, Innenabstand und Eckenradius.
• Produktbild - Bildgröße, Eckenradius, Rahmenbreite und Rahmenfarbe.
• Countdown - Hintergrundfarbe, Textfarbe, Schriftgröße, Schriftstärke und Innenabstand. Diese Gruppe wird nur angezeigt, wenn der eingebettete Countdown aktiviert ist.

Für ein schnell abgestimmtes Erscheinungsbild verwende die voreingestellte Farbauswahl oben im Abschnitt. Sie bietet außerdem Ecken der fixierten Leiste zum Hinzufügen in den Warenkorb an das Haupt-Widget anpassen. Dadurch wird der Eckenradius der Leiste an den deines Haupt-Bundle-Widgets angepasst, sodass beide Elemente einheitlich wirken.

Hinweis zum Eckenradius

Beachte, dass das Layout Fixiert einen Eckenradius von 0 erzwingt. Wenn du in den Container-Stileinstellungen einen abgerundeten Radius festlegst, die Ecken aber weiterhin eckig aussehen, prüfe, ob das Layout auf Schwebend eingestellt ist.

Beide Aktionen speichern und testen

Speichere die Einstellungen und teste anschließend eine gezielte Produktseite mit aktiviertem Rabatt. Scrolle im Scroll-Modus über die Angebote hinaus und verwende die fixierte Schaltfläche, um zurückzukehren. Wähle im Modus zum Hinzufügen in den Warenkorb ein Angebot und Varianten aus und lege es anschließend über die fixierte Schaltfläche in den Warenkorb. Prüfe im Warenkorb und im Checkout Mengen, Varianten und Gesamtsumme. Wiederhole den Test auf Mobilgeräten und teste eine nicht verfügbare oder unvollständige Auswahl: Die Leiste sollte die kaufende Person zurückführen, damit sie ihre Auswahl abschließen kann.

In unserem Beispiel legt „2 kaufen“ zwei Taschen in Elfenbein, Klein, mit einer Zwischensumme der Waren von 43,20 $ nach 10 % Rabatt in den Warenkorb. Die Auswahl der nicht verfügbaren Kombination aus Rouge und Klein ändert die Aktion der fixierten Leiste zu Optionen auswählen. Wenn die Größe auf eine verfügbare Größe geändert wird, erscheint wieder „In den Warenkorb“. Der Countdown bleibt eine visuelle Anzeige und beendet den Rabatt nicht bei null. Informationen zum Ablauf finden Sie unter Countdown-Timer.