> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkout

> Optimiere den Bestellprozess mit dem NIU Checkout, detaillierten Artikelkarten und vertrauensbildenden Elementen.

## NIU Checkout

Hier aktivierst und konfigurierst du das optimierte Checkout-Layout des Themes.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/TJPSQlz-Prdcn9_i/images/niu-plus-checkout-niu-checkout.jpg?fit=max&auto=format&n=TJPSQlz-Prdcn9_i&q=85&s=9d19620a66f72307d8885e32db9b7086" alt="NIU Checkout" width="2022" height="758" data-path="images/niu-plus-checkout-niu-checkout.jpg" />
  </Frame>
</div>

<Warning>
  **Achtung!** Bei Aktivierung des neuen Checkouts müssen für den Express Checkout neue CSS Query-Selektoren eingestellt werden. Die Aktivierung hat auch Auswirkungen auf den Sidebar Warenkorb und aktiviert die Toast Messages.
</Warning>

<ParamField path="NIU Checkout verwenden" type="boolean">
  Aktiviere den neuen Checkout, der sich am bewährten Shopify Checkout orientiert und schalte neue Features frei für bessere Conversions und mehr Trust.

  <Warning>
    **ACHTUNG!** Bei Aktivierung des neuen Checkouts müssen für den Express Checkout neue CSS Query-Selektoren eingestellt werden. Die Aktivierung des Checkouts hat auch Auswirkungen auf den Sidebar Warenkorb und aktiviert die Toast Messages.
  </Warning>
</ParamField>

<ParamField path="Express Checkout Container verwenden" type="boolean">
  Aktiviert eine extra Karte im Checkout für deine Express Checkout Buttons. Verwende die ID **niu-checkout-express-container** als Selektor, um die Buttons dort einzufügen.
</ParamField>

<ParamField path="Versand- und Zahlungsicons anzeigen" type="boolean">
  Zeigt auf der ersten Checkout Seite eine neue Karte an, die alle deine ausgewählten Zahlungs- und Versandicons beinhaltet, um dem User eine Preview möglicher Optionen vorab anzuzeigen. Dadurch soll Vertrauen gestärkt werden, um den ersten Schritt abzuschließen. Um Verwirrungen auszuschließen, solltest du diese Option im besten Fall nur dann verwenden, wenn du gewährleisten kannst, dass deine Optionen im nächsten Schritt auch zur Verfügung stehen.
</ParamField>

<ParamField path="Zahlungsicons anzeigen" type="boolean">
  Steuere spezifisch die Sichtbarkeit der Icons für Zahlungsarten.
</ParamField>

<ParamField path="Versandicons anzeigen" type="boolean">
  Steuere spezifisch die Sichtbarkeit der Icons für Versandarten.
</ParamField>

<ParamField path="Position der Zahlungs- und Versandicons" type="select">
  Lege fest, an welcher Stelle die Icons platziert werden sollen zwischen

  * Unterm Button zum nächsten Schritt
  * In eigener Box vor dem Button zum nächsten Schritt
</ParamField>

***

## CSV Importer verwenden

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/CU5FwIX_DV1jnQVY/images/niu-plus-checkout-csv-importer.jpg?fit=max&auto=format&n=CU5FwIX_DV1jnQVY&q=85&s=cc3c6a3a5e709391cb539f3bcadc5ea0" alt="CSV Importer verwenden" width="2314" height="316" data-path="images/niu-plus-checkout-csv-importer.jpg" />
  </Frame>
</div>

<ParamField path="CSV Importer im Kundenkonto verwenden" type="boolean">
  Gibt den Kunden die Möglichkeit, eine Bulk-Bestellung per CSV in den Warenkorb zu laden.
</ParamField>

<ParamField path="Erlaubte Kundengruppen" type="select">
  Wähle die Kundengruppen aus, die den CSV Importer nutzen dürfen. Ohne Auswahl ist der Importer für niemanden sichtbar. Die Liste wird aus den in deinem Shop angelegten Kundengruppen befüllt, etwa Endkunden, B2B oder eigene, individuell benannte Gruppen.
</ParamField>

***

## Artikelkarten

Diese Einstellungen beschäftigen sich mit der Darstellung der Artikel (Item Cards) im Checkout und in der Zusammenfassung.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/TJPSQlz-Prdcn9_i/images/niu-plus-checkout-artikelkarten.jpg?fit=max&auto=format&n=TJPSQlz-Prdcn9_i&q=85&s=986a450a8fcc23e641ba75295f8db5a7" alt="Artikelkarten" width="2010" height="796" data-path="images/niu-plus-checkout-artikelkarten.jpg" />
  </Frame>
</div>

<ParamField path="Verfügbarkeit und Lieferzeit anzeigen" type="boolean">
  Aktiviere diese Option, um den Lagerstatus und die Lieferzeit direkt in der Artikelkarte anzuzeigen.
</ParamField>

<ParamField path="Variationsinformationen anzeigen" type="boolean">
  Entscheide, ob gewählte Variationen (z. B. "Größe: L", "Farbe: Rot") angezeigt werden sollen.
</ParamField>

<ParamField path="Konfigurationsdetails anzeigen" type="boolean">
  Lege fest, ob Details aus dem Konfigurator (falls verwendet) sichtbar sein sollen.
</ParamField>

<ParamField path="Produktdetails anzeigen" type="boolean">
  Steuere die Anzeige allgemeiner Produktdetails.
</ParamField>

<ParamField path="SKU anzeigen" type="boolean">
  Aktiviere diese Option, um die Artikelnummer (SKU) anzuzeigen.
</ParamField>

<ParamField path="GTIN anzeigen" type="boolean">
  Aktiviere diese Option, um die Global Trade Item Number (EAN/GTIN) anzuzeigen.
</ParamField>

<ParamField path="Dimensionen anzeigen" type="boolean">
  Entscheide, ob Maße oder Gewichtsangaben des Artikels in der Übersicht dargestellt werden sollen.
</ParamField>

***

## Couponhinweis

Das Theme integriert einen Hinweis auf die Coupon-Eingabe bereits in Schritt 1 und 2 des Checkouts, um Unsicherheiten bei Kunden zu vermeiden, da das technische Eingabefeld oft erst im letzten Schritt erscheint.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/TJPSQlz-Prdcn9_i/images/niu-plus-checkout-couponhinweis.jpg?fit=max&auto=format&n=TJPSQlz-Prdcn9_i&q=85&s=70f15057df7bd8fc160db2c2ea5dfabd" alt="Couponhinweis" width="2016" height="360" data-path="images/niu-plus-checkout-couponhinweis.jpg" />
  </Frame>
</div>

<ParamField path="Couponhinweis ausblenden, wenn kein verfügbarer Coupon vorhanden ist." type="boolean">
  Aktiviere diese Option, wenn der Hinweistext komplett ausgeblendet werden soll, falls im Kundenkonto oder Warenkorb technisch kein Coupon zur Verfügung steht.
</ParamField>

***

## Trust Container

Hier kannst du einen globalen Inhalt (z. B. eine USP-Bar oder Trust-Badges) definieren, der im Checkout angezeigt wird, um das Vertrauen zu erhöhen.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/TJPSQlz-Prdcn9_i/images/niu-plus-checkout-trust-container.jpg?fit=max&auto=format&n=TJPSQlz-Prdcn9_i&q=85&s=f6ca09b73d95a719207b369c5e22e258" alt="Trust Container" width="2018" height="350" data-path="images/niu-plus-checkout-trust-container.jpg" />
  </Frame>
</div>

<ParamField path="Trust Container ID" type="string">
  Trage hier die ID des CMS-Blocks oder Portlets ein, das an dieser Stelle geladen werden soll (z. B. `trust-checkout`).
</ParamField>

<ParamField path="Trust Container Style" type="string">
  Hier kannst du bei Bedarf spezifische CSS-Styles für den Container hinterlegen.
</ParamField>

***

## Sonstige

Hier findest du Einstellungen zur Erfassung zusätzlicher Kundeninformationen, wie beispielsweise einer internen Referenznummer.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/TJPSQlz-Prdcn9_i/images/niu-plus-checkout-sonstige.jpg?fit=max&auto=format&n=TJPSQlz-Prdcn9_i&q=85&s=463b3dae776fcc0c98509fef92bdab7e" alt="Sonstige" width="2006" height="322" data-path="images/niu-plus-checkout-sonstige.jpg" />
  </Frame>
</div>

<ParamField path="Kundenreferenz Eingabe erlauben" type="boolean">
  Es wird ein Eingabefeld angezeigt, in welches der Kunde seine eigene Referenz angeben kann. Der Inhalt wird als Custom Attribute im Auftrag gespeichert und an die Wawi übergeben. Der Inhalt befindet sich dann im Auftrag unter Eigene Felder im Feld Kundenreferenz. Du kannst dieses Feld nutzen, um die Kundenreferenz auf deinen Druckvorlagen auszugeben.
</ParamField>

<ParamField path="Name des Feldes wie es in der Wawi ankommen soll" type="string">
  Definiere hier den internen Namen des Feldes, damit die Daten korrekt an die JTL-Wawi übergeben werden (Standard: `Kundenreferenz`).
</ParamField>

<div style={{height: '1px', backgroundColor: 'silver', margin: '24px 0'}} />


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.