Upgrade des Online-Checkouts durchführen

Du kannst deinen Online-Checkout anpassen, um deine Marke auszubauen, Texte zu ändern, Angebote bereitzustellen und andere Verbesserungen am Einkaufserlebnis deiner Kunden vorzunehmen. Damit sichergestellt ist, dass deine Anpassungen mit den laufenden Änderungen von Shopify kompatibel sind, musst du deinen Checkout regelmäßig aktualisieren.

Um sich auf dieses Upgrade vorzubereiten, musst du Folgendes tun:

  1. Sieh dir eine Vorschau des neuen Checkouts an und teste das Kundenerlebnis. Je nachdem, welche Anpassungen du an deinem Checkout vorgenommen hast, kann es sein, dass du vor dem Upgrade Änderungen an deiner checkout.liquid-Datei vornehmen musst.
  2. Wenn du mit deinen Änderungen zufrieden bist, nimm das Upgrade für deinenShop vor, um den neuen Shopify-Checkout zu verwenden.

Sieh dir deinen Checkout in einer Vorschau an und teste ihn auf Fehler

Denke daran, sich eine Vorschau mit den Änderungen anzusehen, bevor du ein Upgrade deines Shops auf die neue Checkout-Version vornimmst.

Vorschau für Checkout anzeigen

Tue einfach so, als wärst du ein Kunde, und durchlaufe mehrere Test-Checkouts. Solltest du während dieser Tests Fehler finden, stehen einige deiner Checkout-Anpassungen in Konflikt mit anderen Verbesserungen an der neuen Version. In diesem Fall musst du vor dem Upgrade Änderungen an deiner checkout.liquid-Datei vornehmen.

Fehlerbehebung

Schritte:

  1. Gehe im Shopify-Adminbereich auf Onlineshop > Themes.
  2. Klicke auf Aktionen und dann auf Duplizieren.
  3. Suche unter Weitere Themes nach dem duplizierten Theme und klicke anschließend auf Aktionen > Code bearbeiten. Du nimmst deine Änderungen vor und testest sie mit dieser duplizierten und unveröffentlichten Version deines Themes.

Hinweis: Wenn du Änderungen an einem Theme vornimmst oder ein Theme testest, erstelle eine Kopie und arbeite mit der Kopie. Wenn du bei der Arbeit mit der Kopie einen Fehler machst, kannst du das Duplikat löschen und eine weitere Kopie des ursprünglichen Themes erstellen (ohne Auswirkungen für deine Kunden).

  1. Öffne die Datei checkout.liquid.

  2. Sieh dir eine Vorschau der Datei checkout.liquid in deinem duplizierten Theme mit der neuen Version des Shopify-Checkouts an:

    1. Öffne die Seite Checkout-Upgrade im Shopify-Adminbereich, klicke auf Vorschau für Checkout anzeigen und wähle das duplizierte Theme aus.
    2. Führe Testbestellungen in der Vorschau durch.

Wenn Fehler vorliegen oder du Probleme mit der Darstellung des Checkouts feststellst, musst du die Datei checkout.liquid bearbeiten, um die Fehler und Probleme zu beheben.

Upgrade auf den neuen Shopify-Checkout durchführen

Das Upgrade des Checkouts erfolgt in zwei Schritten: Du musst den Shopify-Checkout aktualisieren und das aktuelle veröffentlichte Theme durch die Kopie mit den Änderungen ersetzen.

Führe das Upgrade zu einer ruhigeren Tageszeit durch, z. B. am frühen Morgen, am späten Abend oder am Wochenende, um mögliche Störungen zu minimieren.

Schritte:

  1. Klicke auf der Seite Checkout-Upgrade auf Upgrade für Checkout vornehmen (diese Schaltfläche befindet sich unten auf der Seite).

  2. Wenn du bei der ersten Vorschau deines Themes auf Fehler gestoßen bist, stelle zunächst sicher, dass diese behoben wurden (siehe oben). Veröffentliche dann dein aktualisiertes duplizierte Theme:

    1. Klicke in deinem Onlineshop auf Themes.
    2. Suche nach dem duplizierten Theme und klicke anschließend auf Aktionen > Veröffentlichen.

Dein Checkout wurde aktualisiert und das duplizierte Theme ist jetzt dein aktuelles Theme.

Neuheiten beim Shopify-Checkout

Die neue Version des Shopify-Checkouts enthält die folgenden Änderungen und neuen Funktionen:

  • Liquid-Variablen für Rabatte
  • Opt-in für Shop
  • Bestelländerungen
  • Verbesserungen der Barrierefreiheit
  • Entferntes Padding
  • Anzeige der Zahlungsmethode
  • Entfernte Platzhalter-Strings
  • Anzeige der gespeicherten Kundenadresse
  • 3D-Secure-Authentifizierung
  • Zusätzliche Änderungen in den JavaScript-Feldern von Google Analytics
  • CSS-Änderungen
  • Fehlermeldungen

Liquid-Variablen für Rabatte

Mehrere neue Liquid-Variablen für die Anzeige von Rabatten wurden im gesamten Checkout-Prozess eingeführt. Durch diese Änderungen können automatische und skriptbasierte Rabatte für deine Kunden sinnvoll dargestellt werden.

Tabelle der neuen Liquid-Variablen
Variable Definition
checkout.cart_level_discount_applications Gibt ein Array von beliebigen warenkorbspezifischen Rabatten für den Checkout zurück.
line_item.discount_allocations Gibt eine Liste aller Rabatte zurück, einschließlich des ermäßigten Betrags und eines Verweises auf den übergeordneten Rabatt. line_item.discount_allocations ist für Positionen in Warenkörben, Checkouts, Bestellungen und Bestellentwürfen verfügbar.
line_item.final_line_price Gibt den kombinierten Preis aller Artikel in der Position zurück. Dies entspricht line_item.final_price multipliziert mit line_item.quantity.
line_item.final_price Gibt den Preis der Position einschließlich aller Rabattbeträge auf Positionsebene zurück.
line_item.line_level_discount_allocations Gibt eine Liste zeilenspezifischer Rabattzuweisungen zurück, die den rabattierten Betrag und den Verweis auf die übergeordnete Rabattanwendung enthält. line_item.line_level_discount_allocations ist für Einzelposten in Warenkörben, Kassen, Aufträgen und Auftragsentwürfen verfügbar.
line_item.total_discount Gibt den Gesamtbetrag aller auf die Position angewendeten Rabatte an. Dieses Attribut hat nur dann einen Wert, wenn du die Script Editor-App verwendest.

Opt-in für Shop

Es wurde ein dediziertes Telefonnummernfeld zur Bestellstatus-Seite hinzugefügt. Kunden werden aufgefordert, eine Mobiltelefonnummer einzugeben, um Versand Updates per Text zu erhalten. Diese Texte enthalten auch einen Link zur Shop-App.

Bestelländerungen

Wenn die Bestellbearbeitung für Shopify Plus-Händler verfügbar gemacht wird, ermöglicht sie die Erfassung zusätzlicher ausstehender Zahlungen für bearbeitete Bestellungen über den Shopify-Checkout. Es wurden einige Änderungen an der Checkout-Seite vorgenommen, um sicherzustellen, dass sie wie beabsichtigt funktioniert:

  • Der Kunde kann seine Kontaktdaten, die Lieferadresse oder die Versandart nicht ändern.
  • Es gibt zusätzliche Positionen mit Angabe des Gesamtbestellwerts und des bereits bezahlten Betrags.
  • Die Schaltfläche Kauf abschließen ändert sich in Jetzt bezahlen. Summe ändert sich in Zu zahlender Betrag.
  • Anstelle der Brotkrümelinformationen, die angeben, wo sich der Kunde im Checkout-Prozess befindet, sieht der Kunde ein einklappbares Banner mit zusätzlichen Informationen zur Bestellung: - Der zusätzliche Zahlungsbetrag.
    • Produkte, die der Bestellung hinzugefügt oder daraus entfernt werden.
    • Die Bestellnummer.

Bild der Checkout-Seite, wenn zusätzliche Zahlungen erforderlich sind

Diese Änderungen werden erst dann wirksam, wenn eine Bestellung bearbeitet wird und eine zusätzliche Zahlung deines Kunden erfordert.

Wenn deine Checkout-Anpassungen den Brotkrümel verwenden, um den aktuellen Schritt des Checkouts zu identifizieren, dann solltest du stattdessen das Shopify.Checkout.step-Objekt verwenden. Weitere Informationen erhältst du unter Schritt-Identifizierung.

Verbesserungen der Barrierefreiheit

Für den Checkout wurden mehrere Änderungen vorgenommen, um die Einhaltung der Barrierefreiheitstandards im Web zu gewährleisten. Dies erleichtert Kunden, die Technologien für die Barrierefreiheit wie z. B. Bildschirmlesegeräte verwenden, die Navigation beim Checkout-Prozess.

  • Brotkrümel sind nun bei allen Checkout-Schritten in ein nav-Element eingebettet. Das aria-current-Attribut wurde vom span-Element zum li-Element verschoben.
  • Bestellübersichten befinden sich jetzt in einem aside-Element.
  • Die Rabattcode-Feld-ID für mobile Kunden wurde bei allen Checkout-Schritten von checkout_reduction_code zu checkout_reduction_code_mobile geändert.
  • Der Karte für die Seiten Vielen Dank und Bestellstatus wurden Barrierefreiheitsattribute hinzugefügt. Die Karte umfasst jetzt role=region und aria-label für die Lieferadresse.
  • step und step__section-Wrapper-Divs wurden den Seiten Bestellstatus, Ausverkauft und Vielen Dank hinzugefügt.
  • Es wurden semantische HTML5-Elemente für den Checkout-Prozess eingeführt und role-Attribute wurden aktualisiert. - Die Bestellübersicht befindet sich nun innerhalb eines aside-Elements.
    • Das div für .main__header ist nun ein Kopfzeilenelement mit role=banner.
    • Das div für .main__content ist jetzt ein Hauptelement mit role=main.
    • Das div für .main__footer ist nun ein Fußelement mit role=contentinfo.
    • Das div für banner ist nun eine Kopfzeile mit role=banner.

Entferntes Padding

Auf den Seiten Bestellstatus, Ausverkauft und Vielen Dank wurde der Leerraum zwischen dem Shop-Namen und der Bestellnummer entfernt. Dieses zusätzliche Padding wurde aus dem Abschnitt div.section.section--page-title entfernt.

Anzeige der Zahlungsmethode

Der Gesamtbetrag einer Bestellung wird Kunden nun auf der Bestellstatusseite im Abschnitt Zahlungsmethode angezeigt.

Bild der Bestellstatusseite mit Anzeige des Gesamtbetrags der Bestellung

Entfernte Platzhalter-Strings

Die Felder E-Mail-Platzhalter und E-Mail- bzw. Telefon-Platzhalter wurden aus den Sprachoptionen in deinen Theme-Einstellungen entfernt. Notwendige Änderungen können in den Feldern E-Mail-Label und E-Mail- bzw. Telefon-Label vorgenommen werden. Um auf diese Felder zuzugreifen, gehe zu Onlineshop > Themes, und klicke dann auf Aktionen > Sprachen bearbeiten> Checkout und System.

Anzeige der gespeicherten Kundenadresse

Die Art und Weise, wie gespeicherte Adressen beim Checkout für angemeldete Kunden angezeigt werden, hat sich geändert.

Bild mit einer Liste der gespeicherten Adressen

Die Adressoptionen werden in der folgenden Reihenfolge angezeigt:

  1. Die standardmäßig gespeicherte Adresse.
  2. Die zuletzt hinzugefügten Adressen, beginnend mit der neuesten hinzugefügten Adresse.
  3. Die Möglichkeit, eine neue Adresse zu verwenden.

Das Dropdownmenü zeigt maximal fünf Adressen an.

3D-Secure-Authentifizierung

Die 3D Secure-Technologie bietet eine zusätzliche Sicherheitsebene, die Kunden vor dem Abschluss ihres Kaufs durchlaufen müssen, und unterstützt Dienstleistungen wie Verified by Visa, Mastercard Identity Check oder Amex SafeKey. Während des Checkouts werden einige Kunden möglicherweise zur zusätzlichen Authentifizierung auf das Portal ihrer Bank umgeleitet. Weitere Informationen findest du unter PSD2 und starke Kundenauthentifizierung verstehen.

Händler im Europäischen Wirtschaftsraum (EWR) und im Vereinigten Königreich können Cardinal nutzen, um 3D Secure-Checkouts anzubieten. Siehe 3D Secure mit Cardinal für mehr Informationen.

Die Entscheidung, welche Checkouts eine zusätzliche Überprüfung erfordern, wird von der Bank getroffen und kann nicht durch den Shopify-Admin gesteuert werden. Es sind keine Maßnahmen erforderlich, um diese Änderung umzusetzen.

Zusätzliche Änderungen in den JavaScript-Feldern von Google Analytics

JavaScript, das in den Bereich Zusätzliches JavaScript für Google Analytics in deinem Shopify-Adminbereich unter Onlineshop > Konfigurationen eingegeben wurde, wird dem Checkout als nicht sichtbarer iFrame hinzugefügt. Dies hat keinen Einfluss auf das zu Analysezwecken verwendete JavaScript, verhindert jedoch, dass andere Änderungen am Checkout vorgenommen werden können. Wenn du deinem Checkout aus anderen Gründen benutzerdefiniertes JavaScript hinzufügen möchtest, dann füge es direkt in die checkout.liquid-Datei ein.

CSS-Änderungen

heading-* und text-container-CSS-Klassen wurden allen Checkout-Schritten hinzugefügt.

Fehlermeldungen

Es wurde ein Fehlerbanner hinzugefügt, das die Kunden informiert, wenn die von ihnen gewählte Express-Checkout-Zahlungsmethode nicht verfügbar ist. Dieses Banner erscheint oben im Schritt Kontaktinformationen des Checkouts.

Bild

Das Fehlerbanner, das die Kunden darüber informiert, dass ein früherer Versandtarif nicht mehr gültig ist, wurde verschoben. Dieses Banner erscheint nun direkt über den verfügbaren Versandoptionen.

Bild

Bereit, mit Shopify zu verkaufen?

Kostenlos ausprobieren