Code-Editor für gedruckte Belege

Du kannst deine gedruckten Belege mit dem Code-Editor in deinem Shopify-Adminbereich anpassen. Mit dem Code-Editor kannst du komplexere Anpassungen mit HTML, CSS und Liquid erstellen als mit dem visuellen Editor.

Du kannst die Belegvorlage und die auf deinen ausgedruckten Belegen verwendeten Abschnittsvorlagen ändern. Die Vorlagedateien für die Belege sind die Arten von Belegen, die du in deinem Shop drucken kannst. Abschnitte sind Teile der Belege, wie z. B. der Header oder die Fußzeile. Abschnitte können über mehrere Belege wiederverwendet werden.

Auf dieser Seite

Überlegungen für die Verwendung des Beleg-Code-Editors

Bevor du den Belegcode-Editor verwendest, solltest du die folgenden Überlegungen anstellen:

Du kannst den Code-Editor nur in deinem Shopify-Adminbereich auf dem Desktop verwenden.
Code-Änderungen, die du vornimmst, gelten für alle POS Pro-Standorte. Du kannst jedoch Bedingungen hinzufügen, um Anpassungen für bestimmte Standorte anzuzeigen. Erfahre mehr über die Verwendung von Kontrollfluss-Tags mit Liquid.
Wenn du zum Code-Editor wechselst, kannst du keine Anpassungen an deiner Belegvorlage über die Shopify POS-App vornehmen. Du kannst deine Druckoptionen über die Shopify POS-App weiterhin von Standorten aus mit dem POS Pro-Abonnementplan anpassen.
Anpassungen im Code-Editor gelten nur für POS Pro-Standorte. Wenn du den Code-Editor verwendest und POS Lite-Standorte hast, kannst du den visuellen Editor nutzen, um Header und Fußzeile für deine Lite-Locations anzupassen.
Die Dateien, aus denen sich deine Belege zusammensetzen, enthalten Liquid, die Vorlagensprache von Shopify. Erfahre mehr über die Verwendung von Liquid.
Um die Vorlagen im Beleg-Code-Editor zu bearbeiten, musst du mit HTML, CSS und Liquid vertraut sein. Der Shopify Theme Support kann dir bei kleineren Anpassungen im Rahmen der Shopify-Designrichtlinie behilflich sein.
Einige Arten von gedruckten Belegen können nicht angepasst werden.
Der Code-Editor ist für nicht für Standorte in Italien verfügbar.

Inkompatibilitätserwägungen bei Belegarten

Einige Arten von gedruckten Belegen können im Belegcode-Editor nicht angepasst werden. Belegarten, die im Code-Editor keine Vorlage haben, sind nicht mit der Anpassung kompatibel.

Du kannst die folgenden Arten von gedruckten Belegen anpassen:

Verkaufsbelege
Geschenkgutscheinbelege
Belege für Geschenkbelege

Du kannst die folgenden Belege nicht anpassen:

Rückgabebelege
Umtauschbelege

Darüber hinaus sind alle Belegarten für Standorte in Italien nicht zur Anpassung berechtigt.

Zugriff auf den Code-Editor

Du kannst deine Vorlagen mit dem Code-Editor bearbeiten.

Schritte:

Gehe in deinem Shopify-Adminbereich zu Einstellungen > Apps und Vertriebskanäle.
Klicke auf der Seite Apps und Vertriebskanäle auf Point of sale.
Klicke auf Vertriebskanal öffnen.
Klicke auf Einstellungen > Beleganpassung.
Klicke auf Belege anpassen.
Klicke auf ... > Code bearbeiten.
Klicke im Dialog Code bearbeiten auf Code bearbeiten.

Verwende benutzerdefinierte Dateien in deiner Belegvorlage

Du kannst Dateien, die du hochlädst, verwenden, um deine Belege anzupassen. Wenn du benutzerdefinierte Bilder hast, die du auf deine Belege drucken möchtest, kannst du diese in deinen Shopify-Adminbereich hochladen und dann auf deinen benutzerdefinierten Belegen verwenden. Erfahre mehr über Datei-Uploads.

Schritte:

Gehe in deinem Shopify-Adminbereich zu Einstellungen > Apps und Vertriebskanäle.
Klicke auf der Seite Apps und Vertriebskanäle auf Point of sale.
Klicke auf Vertriebskanal öffnen.
Klicke auf Einstellungen > Beleganpassung.
Klicke auf Belege anpassen.
Klicke auf Inhaltsseite.
Kopiere den Link neben der Datei, die du in deiner Belegvorlage verwenden möchtest.
Füge den Link in deiner Vorlage hinzu.

Setze deine Belegvorlage auf Standard zurück

Du kannst eine Belegvorlage mit dem Code-Editor auf die Standardversion zurücksetzen.

Schritte:

Gehe in deinem Shopify-Adminbereich zu Einstellungen > Apps und Vertriebskanäle.
Klicke auf der Seite Apps und Vertriebskanäle auf Point of sale.
Klicke auf Vertriebskanal öffnen.
Klicke auf Einstellungen > Beleganpassung.
Klicke auf die Vorlage, die du zurücksetzen möchtest.
Klicke auf das Symbol "Zurücksetzen".
Klicke im Dialogfeld Datei auf Standard zurücksetzen auf Zurücksetzen , um zu bestätigen.

Liquid-Variablen, die im Belegcode-Editor verfügbar sind

Mit Liquid kannst du deine gedruckte Belegvorlage und Belegarten anpassen.

Die folgenden Datenobjekte sind im Belegcode-Editor verfügbar:

Beschreibung der Belegdatenobjekte
Objekt	Beschreibung
shop	Enthält die Shop-Informationen, wie z. B. den Shop-Namen.
location	Enthält die Informationen zum Einzelhandelsstandort, wie Adresse und Telefonnummer.
order	Enthält die Bestelldaten, einschließlich der Positionen, der Rabatte, der Steuern und der Transaktionsinformationen.
gift_card	Nur in der Vorlage `gift_card.liquid` verfügbar. Enthält die Geschenkgutscheindaten, einschließlich des Guthabens, des alphanumerischen Codes und des Inhalts eines QR-Codes, der von der POS-App gescannt werden kann.

Liquid-Filter sind im Beleg-Code-Editor verfügbar

Du kannst Liquid-Filter verwenden, um Informationen in deinen Belegvorlagen anzupassen. Du kannst beispielsweise die Formatierung der Währung oder die Schreibweise eines bestimmten Textes, z. B. einen Steuercode, ändern.

Um einen Filter anzuwenden, füge ein Pipe-Zeichen | hinzu und dann den Filter im Liquid-Code-Block zwischen doppelten, eckigen Klammern {{ }}. Filter können nur auf Liquid-Code-Blöcke angewendet werden.

Im folgenden Beispiel passt der Filter den Steuercode von Kleinbuchstaben in Großbuchstaben an.

{{ tax_line.title | upcase }}

Im Beispielcode-Block ist product das Objekt, title seine Eigenschaft und upcase der angewendete Filter. Der upcase Filter ändert die Schreibweise des Werts vontax_line.title in Großbuchstaben. Wenn tax_line.title z. B. den Wert Hsthat, ändert der Filter upcase den Wert in HST.

Weitere Informationen zur Verwendung von Liquid-Filtern findest du in der Shopify-Themes-Liquid-Referenz im Abschnitt zu den Filtern.

Die folgenden Filter sind im Belegcode-Editor verfügbar:

Beschreibung der Belegfilter
Eigenschaft	Beschreibung
t	Übersetzt vordefinierte Etiketten in die Sprache, die deinem Standort zugewiesen ist.
money	Formatiert den Preis in die Währung deines Standorts.
escape	Maskiert Sonderzeichen in HTML, wie `<>`, `'` und `&` und wandelt die Zeichen in Escape-Sequenzen um.
barcode	Generiert eine 1D-Barcode-SVG.
qrcode	Generiert eine 2D-Barcode-SVG.

Beispiel für eine Anpassung des Vorlagencodes für gedruckte Belege

Du kannst Liquid verwenden, um bedingte Nachrichten hinzuzufügen. Diese Funktionalität ähnelt dem Speichern an einem einzelnen Standort mit dem visuellen Editor. Dein Unternehmen hat beispielsweise mit einem einzigen Standort begonnen und jetzt hast du mehrere neue Standorte. Du möchtest deinen ursprünglichen Shop auf deinen gedruckten Belegen hervorheben.

Du kannst im Ordner Abschnitte des Code-Editors eine benutzerdefinierte Nachricht zur header.liquid-Vorlage hinzufügen und Liquid verwenden, um die Nachricht nur für deinen Flagship-Standort anzuzeigen.

Der folgende Code überprüft den Namen des Standorts, in diesem Fall deinen ursprünglichen Standort namens "Home", und zeigt die Meldung "Willkommen in unserem ursprünglichen Shop, eröffnet 1972" an, wenn der Standort mit dem Namen übereinstimmt. Belege, die von deinen anderen Standorten aus gedruckt werden, zeigen stattdessen die Meldung "Willkommen bei unserem Shop" an.

{% if location.name == 'Home' %}
  Welcome to our original store, opened in 1972.
{% else %}
  Welcome to our store.
{% end %}