Upgrade des Online-Checkouts durchführen

Sie können Ihren Online-Checkout anpassen, um Ihre Marke auszubauen, Texte zu ändern, Angebote bereitzustellen und andere Verbesserungen am Einkaufserlebnis Ihrer Kunden vorzunehmen. Damit sichergestellt ist, dass Ihre Anpassungen mit den laufenden Änderungen von Shopify kompatibel sind, müssen Sie Ihren Checkout regelmäßig aktualisieren.

Um sich auf dieses Upgrade vorzubereiten, müssen Sie Folgendes tun:

  1. Sehen Sie sich eine Vorschau des neuen Checkouts an und testen Sie das Kundenerlebnis. Je nachdem, welche Anpassungen Sie an Ihrem Checkout vorgenommen haben, kann es sein, dass Sie vor dem Upgrade Änderungen an Ihrer checkout.liquid-Datei vornehmen müssen.
  2. Wenn Sie mit Ihren Änderungen zufrieden sind, nehmen Sie das Upgrade für Ihren Shop vor, um den neuen Shopify-Checkout zu verwenden.

Sehen Sie sich Ihren Checkout in einer Vorschau an und testen Sie ihn auf Fehler

Denken Sie daran, sich eine Vorschau mit den Änderungen anzusehen, bevor Sie ein Upgrade Ihres Shops auf die neue Checkout-Version vornehmen.

Vorschau für Checkout anzeigen

Tun Sie einfach so, als wären Sie ein Kunde, und durchlaufen Sie mehrere Test-Checkouts. Sollten Sie während dieser Tests Fehler finden, stehen einige Ihrer Checkout-Anpassungen in Konflikt mit anderen Verbesserungen an der neuen Version. In diesem Fall müssen Sie vor dem Upgrade Änderungen an Ihrer checkout.liquid-Datei vornehmen.

Fehlerbehebung

Schritte:

  1. Gehen Sie im Shopify-Adminbereich auf Onlineshop > Themes.
  2. Klicke auf Aktionen und dann auf Duplizieren.
  3. Suchen Sie unter Weitere Themes nach dem duplizierten Theme und klicken Sie anschließend auf Aktionen > Code bearbeiten. Sie nehmen Ihre Änderungen vor und testen sie mit dieser duplizierten und unveröffentlichten Version Ihres Themes.

Hinweis: Wenn Sie Änderungen an einem Theme vornehmen oder ein Theme testen, erstellen Sie eine Kopie und arbeiten Sie mit der Kopie. Wenn Sie bei der Arbeit mit der Kopie einen Fehler machen, können Sie das Duplikat löschen und eine weitere Kopie des ursprünglichen Themes erstellen (ohne Auswirkungen für Ihre Kunden).

  1. Öffnen Sie 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: Sie müssen den Shopify-Checkout aktualisieren und das aktuelle veröffentlichte Theme durch die Kopie mit den Änderungen ersetzen.

Führen Sie 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. Klicken Sie auf der Seite Checkout-Upgrade auf Upgrade für Checkout vornehmen (diese Schaltfläche befindet sich unten auf der Seite).

  2. Wenn Sie bei der ersten Vorschau Ihres Themes auf Fehler gestoßen sind, stellen Sie zunächst sicher, dass diese behoben wurden (siehe oben). Veröffentlichen Sie dann Ihr aktualisiertes duplizierte Theme:

    1. Klicken Sie in Ihrem Onlineshop auf Themes.
    2. Suchen Sie nach dem duplizierten Theme und klicken Sie anschließend auf Aktionen > Veröffentlichen.

Ihr Checkout wurde aktualisiert und das duplizierte Theme ist jetzt Ihr 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 Ihre 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 Sie die Script Editor-App verwenden.

Opt-in für Shop

Auf der Bestellstatusseite wurde ein eigenes Telefonnummernfeld hinzugefügt. Kunden werden aufgefordert, eine Mobiltelefonnummer einzugeben, um Versandaktualisierungen per SMS zu erhalten. Diese SMS-Nachrichten 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 Ihres Kunden erfordert.

Wenn Ihre Checkout-Anpassungen den Brotkrümel verwenden, um den aktuellen Schritt des Checkouts zu identifizieren, dann sollten Sie stattdessen das Shopify.Checkout.step-Objekt verwenden. Weitere Informationen erhalten Sie 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 Ihren 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, gehen Sie zu Onlineshop > Themes, und klicken Sie 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) können Cardinal nutzen, um 3D Secure-Checkouts anzubieten. Weitere Informationen finden Sie unter 3D Secure mit Cardinal.

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 Ihrem 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 Sie Ihrem Checkout aus anderen Gründen benutzerdefiniertes JavaScript hinzufügen möchten, dann fügen Sie 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