Bundlex mit einem Page Builder verwenden (GemPages, PageFly, Shogun)

Wenn deine Produktseite mit einem Page Builder wie GemPages, PageFly oder Shogun erstellt wurde, verwende ein Anker-Snippet, um festzulegen, wo das Bundlex-Widget erscheint. Füge es in einen benutzerdefinierten HTML-Block auf der Produktseite ein. Wenn das Widget vollständig fehlt, prüfe außerdem die App-Einbettung, das veröffentlichte Bundle und das Produktformular. Der Anker steuert nur die Platzierung.

Warum ein Page Builder einen Anker benötigt

Normalerweise erkennt das Widget dein Produktformular und fügt sich vor dessen Container ein. Ein Page Builder kann dieses Layout verändern. Der Anker gibt dem Widget eine bestimmte Position zum Rendern. Bundlex muss jedoch weiterhin das Warenkorbformular des Produkts finden, um das Angebot mit dem Kauf-Button zu verbinden.

Snippet abrufen

Der Anker ist ein Snippet zum Kopieren im Bundle-Editor.

1. Öffne in deinem Bundlex-Dashboard das Bundle, das du auf der Page-Builder-Seite anzeigen möchtest.
2. Öffne den Tab Advanced.
3. Suche nach der Option Verwendest du einen Page Builder? und klicke darauf, um sie aufzuklappen.
4. Klicke auf Kopieren, um das Snippet in deine Zwischenablage zu kopieren.

Das Snippet ist immer gleich:

<div data-bundlex-widget></div>

In deinen Page Builder einfügen

1. Öffne deine Produktseite im Editor deines Page Builders (GemPages, PageFly, Shogun oder ein anderer Builder).
2. Füge an der genauen Stelle, an der das Widget erscheinen soll, einen benutzerdefinierten HTML- oder Code-Block hinzu, zum Beispiel direkt unter dem Preis oder über dem In-den-Warenkorb-Button.
3. Füge das Snippet in diesen Block ein.
4. Zeige eine Vorschau der Produktseite an und speichere und veröffentliche sie, sobald sich das Widget an der richtigen Stelle befindet.

Wenn die App-Einbettung aktiv ist und kein übereinstimmendes benutzerdefiniertes Platzierungsziel Vorrang hat, wird das Widget im ersten Anker gerendert. Ein App-Block wird stattdessen an seiner eigenen Blockposition gerendert. Platziere den Anker innerhalb des Produktbereichs der Seite, in der Nähe der Kaufsteuerung.

Ein Snippet funktioniert für jedes Bundle

Du benötigst kein anderes Snippet pro Bundle. Genau dasselbe <div data-bundlex-widget></div> wird für alle verwendet. Bundlex entscheidet anhand des auf der Seite angezeigten Produkts, welches Bundle gerendert wird. Der Anker steuert daher nur, wo das Widget erscheint, niemals, welches Bundle angezeigt wird. Füge es einmal auf jeder Produktseite im Page Builder ein, auf der es benötigt wird.

Nur auf der relevanten Oberfläche platzieren

Füge den Anker nur auf der Seitenoberfläche hinzu, auf der das Widget tatsächlich erscheinen soll. Wenn dasselbe Snippet an mehr als einer gleichzeitig geladenen Stelle landet, zum Beispiel in einem Warenkorb-Drawer oder einem Quick-View-Popup, das dein Produkt-Markup wiederholt, wird das Widget mit dem ersten Anker verbunden, den es auf der Seite findet. Platziere das Snippet an einer einzigen relevanten Stelle, statt es über mehrere Templates zu verteilen, damit die Platzierung vorhersehbar bleibt.

Prüfe sowohl Desktop- als auch Smartphone-Layouts. Einige Builder behalten separate Produktformulare für Desktop und Mobilgeräte auf derselben Seite. Ein Selektor oder Anker, der die ausgeblendete Kopie erreicht, kann bei einer Breite funktionieren und bei einer anderen fehlschlagen. Bitte den Support, beide Layouts zu prüfen, wenn das passiert.

Wenn sich das Widget nach dem Einfügen nicht verschiebt

Wenn das Widget nicht an die neue Stelle verschoben wurde:

• Prüfe, ob du die App-Einbettung und nicht einen an anderer Stelle positionierten App-Block verwendest. Ein übereinstimmender benutzerdefinierter Platzierungsselektor in der Einbettung hat Vorrang vor dem Anker.
• Lade die Storefront-Seite vollständig neu: Cmd/Ctrl + Shift + R. Dadurch können veraltete Browser-Assets neu geladen werden. Eine Entwurfsseite wird dadurch jedoch nicht veröffentlicht und ein falscher Selektor wird nicht korrigiert.
• Bestätige, dass die Seite veröffentlicht und nicht nur im Editor des Page Builders gespeichert wurde.
• Stelle sicher, dass du das Snippet exakt und ohne zusätzliche Zeichen darum herum eingefügt hast.

Wenn das Widget weiterhin überhaupt nicht erscheint

Der Anker positioniert das Widget nur. Für das Laden müssen weiterhin die üblichen Bedingungen erfüllt sein:

• Die Bundlex-App-Einbettung muss für diese Anker-Methode aktiviert sein. Verwende einen App-Block, wenn die Platzierung stattdessen durch den Block gesteuert werden soll.
• Ein veröffentlichtes Bundle muss zum Produkt auf dieser Seite passen.
• Bundlex muss das richtige Produktformular und den Warenkorb-Button erkennen können.

Wenn die Einbettung und der passende Rabatt aktiv sind, prüfe die Platzierungspriorität und die Erkennung des Produktformulars. Kontaktiere den Support mit der Produkt-URL, wenn der Anker leer bleibt.

Landingpages sind anders

Das Anker-Snippet funktioniert nur auf Produktseiten. Wenn du Bundle-Angebote auf einer normalen Shopify-Seite anzeigen möchtest, also auf jeder /pages/-URL, füge den Featured-Produkt-Abschnitt deines Themes hinzu und platziere den Block Bundlex Bundles featured darin. Lege das Produkt des Blocks auf dasselbe Produkt wie im Abschnitt fest oder behalte die Verbindung zum Abschnittsprodukt bei. Der Abschnitt stellt das Kaufformular bereit, der Block lädt das Widget ohne Anker-Snippet.

Ergebnis prüfen

1. Öffne die tatsächlich veröffentlichte Produkt-URL bei Desktop- und Smartphone-Breiten.
2. Bestätige, dass ein Widget an der vorgesehenen Position mit dem passenden Produkt und den Angebotspreisen erscheint.
3. Wähle ein Angebot aus und lege es in den Warenkorb. Prüfe das Hauptprodukt, die Varianten, Mengen und alle ausgewählten Zusatzprodukte.
4. Gehe zur Kasse und prüfe den Rabatt und die Zwischensumme, bevor du die Bestellung aufgibst. Wenn nur die Vorschau im Page Builder funktioniert, sende dem Support die veröffentlichte Produkt-URL.

Eine vollständige Übersicht darüber, wie Bundlex eine Platzierung auswählt, einschließlich des Featured-Produkt-Blocks für Landingpages, des benutzerdefinierten Platzierungsselektors und des Theme-App-Blocks, findest du unter Wo das Widget auf deiner Produktseite erscheint.