Wo das Widget auf der Produktseite erscheint

Standardmäßig wird das Bundlex-Widget auf der Produktseite direkt über dem Warenkorb-Button angezeigt. Wenn diese Position nicht zu deinem Theme passt, kannst du es auf zwei Arten verschieben: mit einem benutzerdefinierten Platzierungsselektor im App-Embed oder mit einem Anker eines Page Builders. Dieser Artikel erklärt, wo das Widget platziert wird und wie Bundlex zwischen diesen Optionen entscheidet.

Die Standardposition

Wenn keine Überschreibung der Platzierung zutrifft, fügt Bundlex das Widget vor dem erkannten Produktformular-Container im Kaufbereich ein. Die genaue Position im Verhältnis zu den Varianten- und Mengensteuerelementen des Themes hängt vom jeweiligen Theme ab. In der Praxis bedeutet das, dass die Angebotskarten über dem Warenkorb-Button erscheinen, also dort, wo die meisten Käufer ein Mengen- oder Bundle-Angebot erwarten.

Diese Standardposition setzt voraus, dass Bundlex dein Produktformular automatisch erkennt. Die meisten Themes werden automatisch erkannt. Wenn deines nicht erkannt wird, kann das Widget keine zuverlässige Verbindung mit „In den Warenkorb“ herstellen. Ein Platzierungsanker allein behebt kein fehlendes oder falsch erkanntes Produktformular. Bitte den Support, auch die Formularerkennung zu prüfen.

Die Prioritätskette der Platzierung

Bei der Bereitstellung über ein App-Embed sucht Bundlex in einer festen Reihenfolge nach einem Platzierungsziel und verwendet das erste gefundene Ziel. Höhere Einträge in der Liste haben Vorrang vor niedrigeren.

1. Benutzerdefinierter Platzierungsselektor, höchste Priorität. Ein CSS-Selektor, den du im Bundlex-App-Embed festlegst. Wenn er festgelegt ist und auf ein Element zutrifft, wird das Widget direkt nach diesem Element eingefügt. Kein darunterliegender Eintrag in dieser Liste wird verwendet.
2. Anker eines Page Builders (data-bundlex-widget). Ein HTML-Element mit dem Attribut data-bundlex-widget, das du in deine Seite einfügst. Das Widget wird innerhalb des ersten passenden Ankers platziert. Diese Option wird verwendet, wenn kein benutzerdefiniertes Platzierungsziel gefunden wird.
3. Standardposition vor dem Produktformular, niedrigste Priorität. Die oben beschriebene automatische Platzierung. Sie wird verwendet, wenn keine der beiden Überschreibungen ein passendes Ziel liefert.

Da die Kette beim ersten Treffer endet, überschreibt ein passendes benutzerdefiniertes Platzierungsziel sowohl den Anker als auch die Standardposition. Ein passender Anker überschreibt die Standardposition. Wenn ein Selektor nach einer Theme-Änderung nicht mehr zutrifft, kann Bundlex auf eine niedrigere Platzierung zurückgreifen.

Option 1: der benutzerdefinierte Platzierungsselektor, App-Embed

Verwende einen benutzerdefinierten Platzierungsselektor, wenn du die Bereitstellung über das App-Embed beibehalten und das Widget nach einem bestimmten Seitenelement platzieren möchtest. Wenn du den Selektor nicht kennst, bitte den Bundlex-Support um Hilfe bei der Auswahl. Teste ihn zuerst in einem Entwurfstheme.

Du legst ihn im Bundlex-App-Embed fest:

1. Gehe im Shopify-Adminbereich zu Onlineshop und klicke auf Theme bearbeiten.
2. Öffne App-Embeds und suche Bundlex Bundles.
3. Aktiviere Erweiterte Einstellungen anzeigen und gib anschließend im Feld Benutzerdefinierter Platzierungsselektor einen CSS-Selektor ein.
4. Speichere das Theme.

Das Widget wird direkt nach dem Element eingefügt, auf das dein Selektor zutrifft. Wenn du nicht sicher bist, welchen Selektor du verwenden sollst, kann dir der Bundlex-Support bei der Suche helfen. In den erweiterten Einstellungen werden außerdem Felder für das Produktformular, den Warenkorb-Button und Mengenauswahlen angezeigt. Diese dienen dazu, die automatische Erkennung in benutzerdefinierten Themes zu korrigieren, nicht zur Positionierung des Widgets.

Option 2: ein Anker eines Page Builders

Wenn du Produktseiten mit einem visuellen Page Builder wie GemPages, PageFly oder Shogun erstellst, möchtest du das Widget normalerweise an einer bestimmten Stelle in deinem Layout einfügen. Füge dazu an der gewünschten Stelle einen benutzerdefinierten HTML- oder Code-Block hinzu und platziere darin ein leeres Element mit dem Attribut data-bundlex-widget:

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

Du musst dies nicht von Hand eingeben: Öffne im Bundle-Editor den Tab Erweitert und klappe Verwendest du einen Page Builder? auf. Wähle Kopieren und füge das Snippet anschließend in deine Seite ein.

Bundlex füllt den ersten passenden Anker mit dem Widget. Du benötigst kein anderes Snippet pro Bundle. Der Anker steuert nur die Position. Bundlex wählt weiterhin anhand des Produkts aus, welches veröffentlichte Bundle angezeigt wird.

Nur der erste passende Anker wird verwendet

Wenn auf der Seite mehr als ein data-bundlex-widget-Element vorhanden ist, verwendet Bundlex nur das erste in der DOM-Reihenfolge. Das ist wichtig, wenn dein Onlineshop Inhalte dupliziert, zum Beispiel in einem Schnellansichtsfenster oder einem Warenkorb-Drawer, der Produkt-Markup wiederholt. Platziere den Anker nur auf der Oberfläche, auf der das Widget tatsächlich erscheinen soll, damit der erste Treffer der richtige ist.

Wann du stattdessen den App-Block verwenden solltest

Bundlex bietet außerdem einen Theme-App-Block für die Produktseite. Dieser ist eine separate Möglichkeit, das Widget bereitzustellen, unabhängig vom App-Embed. Verwende den App-Block, wenn du das Widget per Drag-and-drop im Theme-Editor an einer bestimmten Position platzieren möchtest, ohne einen CSS-Selektor zu schreiben oder das Seiten-Markup zu bearbeiten:

1. Öffne im Theme-Editor ein Produkt-Template.
2. Klicke in dem Abschnitt, in dem das Widget erscheinen soll, auf Block hinzufügen.
3. Öffne den Tab Apps, wähle Bundlex Bundles und ziehe den Block an die gewünschte genaue Position.
4. Speichere das Theme.

Der Block platziert das Widget dort, wo du es im Abschnitt ablegst. Damit ist er ein guter Mittelweg zwischen der automatischen Standardposition und einem manuell geschriebenen Selektor. Der Block ignoriert den benutzerdefinierten Platzierungsselektor und den Page-Builder-Anker des Embeds. Verwende eine Bereitstellungsmethode für Produktseiten: Wenn Embed und Block gleichzeitig ausgeführt werden, können Platzierung und Einstellungen davon abhängen, was zuerst initialisiert wird.

Teste die Änderung zuerst in einem Entwurfstheme. Bevor du ein funktionierendes Embed in diesem Entwurf deaktivierst, prüfe, ob sich der Block in einem Abschnitt befindet, der im tatsächlichen Template des Produkts gerendert wird. Lade die Produktseite direkt nach dem Wechsel neu. Wenn das Widget verschwindet, aktiviere das Embed wieder. Bei Rabatten mit Geschenken solltest du eine Platzierung bevorzugen, bei der das Embed und die Bereinigung der Geschenke auf der Warenkorbseite erhalten bleiben. Siehe Embed oder Block.

Unabhängig von der gewählten Platzierung wird das Widget nur gerendert, wenn das App-Embed oder der Block aktiviert ist und ein veröffentlichtes Bundle zum Produkt passt. Wenn das Widget überhaupt nicht erscheint, bestätige diese beiden Punkte, bevor du die Platzierung anpasst.

Landingpages: der Block „Bundlex Bundles featured“

Die oben beschriebenen Methoden gelten für Produktseiten. Auf einer normalen Shopify-Seite, also jeder /pages/-URL, kann sich das Widget nicht selbstständig verbinden, und auch benutzerdefiniertes HTML lädt es nicht.

Füge stattdessen den eigenen Abschnitt Featured product deines Themes hinzu und platziere darin den Block Bundlex Bundles featured. Der Theme-Abschnitt stellt den Warenkorb-Button bereit, und der Block fügt das Widget hinzu, genauso wie auf der Startseite:

1. Gehe im Shopify-Adminbereich zu Onlineshop und klicke auf Theme bearbeiten.
2. Wähle im Template-Dropdown oben Pages und anschließend das Template aus, das deine Landingpage verwendet.
3. Klicke auf Abschnitt hinzufügen und wähle den eigenen Abschnitt Featured product deines Themes. Wähle anschließend das Produkt aus, dessen Bundle du anzeigen möchtest.
4. Klicke in diesem Abschnitt auf Block hinzufügen, öffne den Tab Apps und wähle Bundlex Bundles featured.
5. Lege in den Einstellungen des Featured-Blocks Produkt auf dasselbe Produkt wie im Abschnitt fest oder behalte die Verbindung Abschnittsprodukt bei.
6. Speichere das Theme.

Der Block allein, außerhalb eines Featured-Produkt-Abschnitts, findet kein Warenkorbformular und zeigt nichts an. Innerhalb des Abschnitts zeigt er das Produkt mit seinen veröffentlichten Bundle-Angeboten an, und Kundinnen und Kunden können direkt von der Landingpage aus Produkte in den Warenkorb legen. Dieselbe Konfiguration funktioniert auch auf deiner Startseite.

Kurzübersicht

Platzierungsmethode	Wo festlegen	Priorität
Benutzerdefinierter Platzierungsselektor	App-Einbettungen > Bundlex Bundles > Erweiterte Einstellungen anzeigen	Höchste
data-bundlex-widget-Anker	Seiten-Markup oder Page Builder	Wird verwendet, wenn kein benutzerdefiniertes Ziel übereinstimmt
Standard (vor dem Produktformular)	Automatisch	Wird verwendet, wenn keine der beiden Überschreibungen übereinstimmt