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.

Schritte:

1. Gehe im Shopify-Adminbereich zur Seite Checkout-Upgrade und klicke auf Vorschau für Checkout anzeigen.
2. Wähle das aktuelle Theme aus der Liste aus und klicke auf Vorschau.
3. Erstelle einen Test-Checkout, indem du den Checkout-Prozess als Kunde durchläufst.

Hinweis

Einige Zahlungsanbieter verlangen einen Mindestausgabebetrag für Test-Checkouts. Bei Shopify Payments beträgt dieser 0,50 CAD, 0,35 USD oder 0,30 EUR. Andere Zahlungsanbieter wenden unter Umständen andere Grenzbeträge an.

Wenn du die Fehlermeldung Deine Zahlung konnte zu diesem Zeitpunkt nicht verarbeitet werden. Bitte versuche es in einigen Minuten noch einmal. erhältst, erhöhe den Preis der Testbestellung oder schließe einen Test-Checkout mit kostenlosen Artikeln ab.

Solltest du während dieser Tests Fehler finden, stehen einige deiner Checkout-Anpassungen eventuell 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 zu Onlineshop > Themes.
2. Klicke auf die Schaltfläche ... und dann auf Duplizieren.
3. Suche unter Weitere Themes nach dem duplizierten Theme und klicke anschließend auf die Schaltfläche ... > Code bearbeiten. Nimm deine Änderungen vor und teste 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:

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.

Hinweis

Stelle sicher, dass du eine Vorschau des Checkouts angezeigt hast, bevor du dieses Upgrade durchführst. Du musst dich davon überzeugen, dass dieses Upgrade das Checkout-Erlebnis deiner Kunden nicht beeinträchtigt und dass Kunden auch mit dem neuen Checkout für Bestellungen bezahlen können.

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:

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

Neues im Shopify-Checkout

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

• Abonnements
• Upselling
• Trinkgeld beim Checkout
• Abholung und lokale Zustellung
• Zusätzliche internationale Felder
• Schaltfläche "Bestellung mit Shop verfolgen"
• Aktualisierungen der Bestellstatusseite
• Allgemeine Dateiänderungen
• Grundgerüste/Ladestatus
• Fehlermeldungen
• Änderungen an Datenattributen
• Verbesserungen der Barrierefreiheit

Abonnements

Es wurden mehrere Abschnitte zum Shopify-Checkout hinzugefügt, damit du Abonnementprodukte anbieten kannst und deine Checkout-Anpassungen beibehalten werden. In diesen Abschnitten kannst du Abonnementprodukte verkaufen und wiederkehrende Zahlungen direkt im Shopify-Checkout bearbeiten.

Nach Ausführung des Checkout-Upgrades kannst du Abonnements anbieten, indem du eine Abonnement-App aus dem Shopify App Store hinzufügst oder eine benutzerdefinierte App mit neuen Abonnement-APIs erstellst.

Mehr Informationen zu Abonnements findest du im Shopify Help Center.

• Wenn Abonnements aktiviert sind, werden die Versandarten, die für Abonnements verwendet werden, getrennt von den Versandarten für einmalige Käufe angezeigt.
• .product_description_variant Span.product_description_selling_plan wird als zusätzliche Positions-Eigenschaft angezeigt, wenn ein Abonnement mit dem Produkt verknüpft ist.
• Eine wiederkehrende Summe mit einem dazugehörigen Tooltip wird unter der Summe in der Bestellübersicht angezeigt.
• Abonnement-Versandoptionen werden angezeigt, wenn in der Bestellung ein Abonnementprodukt enthalten ist.

Upselling

Neue Apps für das Upselling nach dem Kauf sind im Shopify App Store verfügbar. Diese Apps präsentieren deinen Kunden direkt im Shopify-Checkout Angebote nach dem Kauf und ändern ihre abgeschlossene Bestellung ggf. so, dass das Upselling-Produkt enthalten ist, ohne dass Rechnungs- oder Versandinformationen erneut eingegeben werden müssen.

Dieses Checkout-Upgrade enthält Änderungen an deinen Checkout-Dateien, die dir ermöglichen, Upselling nach dem Kauf mit deinem angepassten Checkout zu verwenden.

Mehr Informationen über das Upselling nach dem Kauf.

• Wenn im Shopify-Adminbereich eine gültige App für Upselling nach dem Kauf installiert ist, erhalten Kunden Angebote nach dem Kauf.

Hinweis

Die Anpassung der Seite, die nach dem Kauf angezeigt wird, erfolgt in der Upselling-App eines Drittanbieters. Die Seite kann nicht mit checkout.liquid angepasst werden.

Trinkgeld beim Checkout

Trinkgeldoptionen können verwendet werden, damit Kunden bei Onlinebestellungen Trinkgeld geben können oder damit anstelle von Trinkgeld Spenden gesammelt werden können. Wenn Trinkgeld aktiviert ist, wird der Abschnitt Trinkgeld hinzufügen im Schritt Zahlungsmethode des Checkout angezeigt. Der Abschnitt Trinkgeld hinzufügen umfasst drei vorab ausgewählte Trinkgeldoptionen sowie ein Feld, um einen benutzerdefinierten Trinkgeldbetrag einzugeben.

Mehr Informationen über das Anbieten von Trinkgeldoptionen.

• Wenn Trinkgeld aktiviert ist, wird der Abschnitt Trinkgeld hinzufügen im Schritt Zahlungsmethode des Checkout angezeigt.

Abholung und lokale Zustellung

Lokale Abholung und Zustellung sind neue Zustellmethoden, mit denen Kunden ihre Bestellungen lokal erhalten können. Wenn diese Zustellmethoden aktiviert sind, können Kunden die lokale Abholung oder Zustellung im Schritt Versand des Checkout auswählen.

Erfahre, wie du lokale Abholung und lokale Zustellung aktivierst.

• Zusätzliche Felder für die lokale Zustellung werden angezeigt, wenn die lokale Zustellung aktiviert ist und vom Kunden ausgewählt wird.
• Wenn die lokale Abholung aktiviert ist, wird dem Kunden auf der Seite Informationen im Checkout ein Abschnitt mit den Zustellmethoden angezeigt. Wenn der Versand nicht verfügbar ist, werden nur Abholinformationen angezeigt.

• Zustellmethoden werden als getrennte Tabs angezeigt.

  • Wenn Kunden die Option Versenden auswählen, werden sie aufgefordert, ihre Versandinformationen einzugeben. Die verfügbaren Versandarten werden angezeigt, wenn sie auf Weiter zum Versand klicken.
  • Durch Auswählen von Abholen wird eine Liste mit Abholorten angezeigt. Kunden klicken auf die Optionsschaltfläche für den gewünschten Abholort und klicken dann auf Weiter zur Zahlung.

• Wenn Kunden die Option Abholen im Schritt Versand des Checkouts auswählen, werden keine Versandinformationen erfasst. Kunden müssen die Abrechnungsdaten im Schritt Zahlung im Checkout eingeben.

• Anweisungen für die lokale Zustellung werden auf der Bestellstatusseite angezeigt. Diese können bearbeitet werden, indem du in deinem Shopify-Adminbereich zu Einstellungen > Versand und Zustellung gehst. Suche im Abschnitt Lokale Abholung den Standort, den du bearbeiten möchtest, und klicke auf Verwalten.

• Die Bestellstatusseite wurde aktualisiert, um den Status von Zustellungen und Abholungen anzuzeigen. Nachrichten werden in folgenden Fällen angezeigt:

  • Eine Bestellung wurde vorbereitet und ist bereit zur Zustellung.
  • Eine Zustellung wurde abgeschlossen. Diese Nachricht enthält auch einen Link, um dieselben Artikel erneut zu bestellen.
  • Eine Bestellung zur Abholung wurde bestätigt. Der Kunde erhält eine E-Mail, wenn die Bestellung zur Abholung bereit ist.
  • Eine Bestellung zur Abholung kann abgeholt werden.
  • Eine Bestellung zur Abholung wurde abgeholt.

Zusätzliche internationale Felder

Einige Länder haben eindeutige Versandbestimmungen, die du einhalten musst, damit deine Kunden deine Lieferungen erhalten. Für Länder mit eindeutigen Versandbestimmungen sind jetzt zusätzliche Felder verfügbar. Diese neuen Felder werden im Schritt Zahlungsmethode im Checkout angezeigt.

Mehr Informationen über zusätzliche internationale Felder.

• Zusätzliche Checkout-Felder werden nur Kunden in Brasilien, Südkorea, Italien und China angezeigt.

Schaltfläche "Bestellung mit Shop verfolgen"

Die Schaltfläche Bestellung mit Shop verfolgen auf der Bestellstatus- und Dankesseite wurde mit einem neuen Design aktualisiert.

Mehr Informationen über die Shop-App.

• Es wurde eine Text-Schaltfläche hinzugefügt, mit der Kunden aufgefordert werden, ihren Kauf in der Shop-App zu verfolgen.
• Es wurden Parameter hinzugefügt, um Shop-Pay-Verfolgung anzuzeigen.
• Rendern für die Schaltfläche Bestellung mit Shop verfolgen für die folgenden Fälle:
  • versuchte Zustellung
  • Bestätigung
  • zugestellt
  • Fehlgeschlagen
  • unterwegs
  • nicht versendbar
  • Zustellung läuft

Aktualisierungen der Bestellstatusseite

Es wurden mehrere Aktualisierungen für die Bestellstatusseite vorgenommen.

• Für Geschenkgutscheininformationen wurde ein spezieller Abschnitt erstellt, der angezeigt wird, wenn ein Geschenkgutschein gekauft wurde.
• Abonnementinformationen wurden hinzugefügt.
• Die Klasse icon-svg--align-text-bottom wurde entfernt.
• data-step="thank-you" wurde in data-step="thank_you" geändert. Wenn du dieses Attribut verwendest, um anzugeben, auf welcher Seite des Checkouts der Kunde sich befindet, verwende stattdessen das JavaScript-Objekt Shopify.Checkout.page.
• Eine Bestellstatus-Karte wurde hinzugefügt.

Allgemeine Dateiänderungen

• div.content-box__row enthält jetzt role="table".
• Wenn sich der Kunde im Schritt Danke befindet und das QR-Bundle nutzt, wird show_qr.js hinzugefügt.
• Es wurde eine Überprüfung hinzugefügt, um sicherzustellen, dass der Kunde Zugriff auf den Checkout hat.
• Geschenkgutscheine werden jetzt mit checkouts/order_status/gift_cards angezeigt.
• Die Ausrichtung der Kontaktinformation wurde mithilfe von enforce_content_directionality fixiert.
• Die Versandinformationen wurden checkouts/web/checkouts/contact_information/pickup verschoben.
• Die Anzeige mehrerer Versandzeilen in der Seitenleiste der Bestellübersicht wird jetzt unterstützt.
• tr.total-line wird nur angezeigt, wenn aktualisierte Summen vorhanden sind.
• Generische Zahlungszeilen werden jetzt unterstützt.
• Die Änderung der Währung im Checkout wird jetzt unterstützt.

• #payment-gateway-subfields enthält jetzt Klassen:

  • .radio-wrapper content-box__row .content-box__row--secondary
  • .card-fields-container

• Der Kreditkarten-Tooltip wurde angepasst und befindet sich jetzt in div.field__icon.

• Das Aria-Etikett wurde aus der vollständigen Beschreibung für die Versandtarife entfernt.

• Felder für Versandtarifformulare wurden nach checkouts/web/checkouts/shipping_method/shipping_rate_additional_fields verschoben.

Grundgerüste/Ladestatus

Der Ladestatus für Checkout-Seiten wurde so aktualisiert, dass Grundgerüste hinzugefügt werden, die sichtbar sind, während die Seite geladen wird, bzw. dass einige Elemente selektiv ausgeblendet werden, bis das Laden abgeschlossen ist. Durch diese Änderungen werden die Ladezeiten optimiert.

• Objekte, die beim Laden ausgeblendet werden:

  • del.total-recap__original-price
  • .total-line__price span.payment-due__currency
  • span.order-summary__emphasis

• Objekte, die während des Ladens ein Grundgerüst anzeigen:

  • Span.total-recap__final-price
  • .product__price del.order-summary__small-text
  • .product__price del.order-summary__emphasis
  • .total-line__price span.payment-due__price
  • .total-line__price span.order-summary__emphasis
  • .total-line__price span.visually-hidden
  • .total-line__price.total-line--subtotal span.order-summary__emphasis

Fehlermeldungen

Zum Checkout wurden neue Fehlermeldungen hinzugefügt.

• Zum Adressfeld wurde eine Warnung bezüglich der Hausnummer hinzugefügt.
• Eine Warnung, die angibt, dass für einen Warenkorb, ein Versandziel oder ein Land keine Versandtarife verfügbar sind, wurde in zwei unterschiedliche Warnmeldungen unterteilt: eine Warnmeldung, die darauf hinweist, dass für einen Warenkorb oder ein Versandziel keine Tarife verfügbar sind, und eine separate Warnung, die darauf hinweist, dass für ein Land keine Tarife verfügbar sind.
• Ein Banner mit Warnung wurde zum Checkout hinzugefügt, wenn versucht wird, einen Kauf in einem Development Shop abzuschließen.
• Eine Benachrichtigung wurde hinzugefügt, die angezeigt wird, wenn einem Kunden beim Checkout kein Betrag berechnet wird.
• Ein Banner mit Warnung wurde hinzugefügt, um auf einen Fehler bei der Änderung der Authentifizierung hinzuweisen.
• Eine Fehlermeldung wurde hinzugefügt, die angibt, wenn Versandarten im Schritt Versand im Checkout nicht verfügbar sind.

Änderungen an Datenattributen

Trekkie wurde aus den folgenden Objekten entfernt:

• Continue_shipping_button
• Get_shipping_updates_button
• Shipping_updates_handle_field
• Shipping_updates_submit_button
• Change_shipping_address_link
• breadcrumb_cart_link
• apply_discount_button
• Have_an_account_login_link
• Email_or_phone_field
• Email_field
• buyer_accepts_marketing_field
• Change_billing_address_link
• Change_contact_method_link
• Change_payment_method_link
• Change_pickup_method_link
• Change_shipping_address_link
• Checkout-Eingabefelder:
  • {type}_address_field
  • {type}_firstname_field
  • {type}_lastname_field
  • {type}_company_field
  • {type}_address1_google_autocomplete_field
  • {type}_address1_field
  • {type}_address2_field
  • {type}_city_field
  • {type}_country_field
  • {type}_province_field
  • {type}_zip_google_autocomplete_field
  • {type}_phone_field

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.

• role="list" für ul für Folgendes hinzugefügt:

  • u.breadcrumb
  • ul.payment-method-list
  • ul.os-timeline
  • ul.policy-list

• Der Tooltip wurde aus aria-labelledby für telephone_field entfernt.

• In Shop wurde das Eingabe-Etikett so geändert, dass es auf Telefon verweist.

• h3-Überschriften wurden hinzugefügt, wenn auf Steuern gewartet wird.

• h3-Überschriften wurden bei Weiterleitungen hinzugefügt.

• Beim Laden von Versandarten wurde das p-Tag in ein h3-Tag geändert.

• AutoComplete bezieht sich jetzt auf mobile tel anstelle von phone.

• div[data-processing-order] wurde durch Hinzufügen von role="region" aktualisiert.

• div[data-announce-change] wurde mit Folgendem aktualisiert:

  • hinzugefügt role="region"
  • aria-labelledby wurde so festgelegt, dass es der ID des Header-Elements entspricht
  • aria-describedby wurde so festgelegt, dass es der ID des Inhaltscontainer-Elements entspricht

• div.content-box blank-slate wurde mit Folgendem aktualisiert:

  • hinzugefügt role="region"
  • aria-labelledby wurde so festgelegt, dass es der ID des Header-Elements entspricht

• Das Express-Checkout-Raster wurde verbessert und verwendet ul- und li-Elemente anstelle div.

• Die Bestellübersicht wurde mit Folgendem aktualisiert:

  • mehr Klarheit beim Verkaufspreis und dem regulären Preis
  • Spanne wurde in dl-Tag geändert
  • del-Tag wurde in die Tags dt und dd geändert.

• Details der Zahlungsmethoden wurden mit Folgendem aktualisiert:

  • span.radio__label__accessory geändert in div.radio__label__accessory
  • span.visually-hidden geändert in h3.visually-hidden
  • span.payment-icon-list__more geändert in li.payment-icon-list__more
  • span.content-box__small-text geändert in small.content-box__small-text

Verwandte Links

• Best Practices für das Bearbeiten von checkout.liquid
• checkout.liquid
• CSS in checkout.liquid