Für dieses Tutorial verwenden wir ein Theme, das derzeit weder von der Standard- noch von der Template-Platzierung unterstützt wird. Wir richten die Produktseite ein; die Schritte sind für jeden Ort in Ihrem Store dieselben.
Schritt 1
Navigieren Sie zum Tab „Advanced“. Dieser Abschnitt dient der Konfiguration der App für nicht unterstützte Themes. Hier können Sie die DOM-Selektoren anpassen, um zu bestimmen, wo das Angebot in Ihrem Store angezeigt wird.
Schritt 2
Gehen Sie zu Ihrer Website. Klicken Sie mit der rechten Maustaste irgendwo auf der Seite und wählen Sie „Untersuchen“ aus. Dies öffnet das Entwicklertool.
Schritt 3
Wählen Sie aus, wo auf der Seite das Angebot erscheinen soll (Wir möchten, dass das Angebot unterhalb der Schaltflächen erscheint). Nachdem Sie dies getan haben, untersuchen Sie das Element, indem Sie auf das Elementauswahl-Symbol in der oberen linken Ecke des Panels klicken.
Schritt 4
Klicken Sie auf das Seitenelement, vor oder nach dem das Angebot platziert werden soll (In diesem Tutorial sind die Elemente die Schaltflächen, da wir möchten, dass unser Angebot nach den Schaltflächen erscheint). Nachdem Sie das Element angeklickt haben, wird der Quellcode im Untersuchen-Panel angezeigt.
Schritt 5
Suchen Sie das im Entwicklertool hervorgehobene Element unter dem Tab „Elemente“. Das Element wird entweder einen Klassennamen oder einen ID-Namen haben. Sie können entweder den Klassennamen oder den ID-Namen kopieren, um ihn in der App als DOM-Selektor zu verwenden. Bitte beachten Sie, dass jedes Element mehrere Klassennamen haben kann, die jeweils durch ein Leerzeichen getrennt sind. Sie können den ersten Klassennamen kopieren, um ihn in solchen Fällen zu verwenden. In diesem Fall hat das Element einen Klassennamen, daher werden wir diesen Klassennamen kopieren, um ihn in die App einzufügen.
Schritt 6
Gehen Sie zurück zu In Cart Upsell.
Ein class-Selektor ist ein Name, dem ein Punkt („.“) vorangestellt ist, und ein ID-Selektor ist ein Name, dem ein Hash-Zeichen („#“) vorangestellt ist.
Da wir den class-Namen als Selektor verwenden, müssen wir den Punkt vor dem Namen hinzufügen. Zum Beispiel „.product-form__item“.
Nachdem Sie den Punkt oder das Hash-Zeichen hinzugefügt haben, wenn ein ID-Name verwendet wird, fügen Sie den Namen im Tab „Advanced“ in dem Abschnitt ein, für den Sie die Angebotsplatzierung vornehmen. In diesem Fall richten wir die Produktseite ein.
Scrollen Sie nach unten zum Abschnitt Dom Action und klicken Sie auf den Dropdown-Pfeil, um die Optionsliste zu öffnen. Wählen Sie “Before”, wenn das Angebots-Widget über dem ausgewählten Element erscheinen soll, oder “After”, wenn das Angebots-Widget unter dem ausgewählten Element erscheinen soll.
Schritt 6
Scrollen Sie ganz nach unten auf der Seite. Wenn Sie möchten, dass alle Ihre Angebote an derselben Position in Ihrem Store erscheinen, klicken Sie auf die Option, um die Einstellungen für jedes Angebot standardmäßig zu übernehmen. Wenn Sie hingegen möchten, dass jedes Ihrer Angebote an einer anderen Position erscheint, können Sie diese Option deaktiviert lassen. Speichern Sie Ihr Angebot als „draft“ oder „publish“.