Anpassen von Vorlagen mit Shopify Order Printer

Du kannst deine Vorlagen auf viele verschiedene Arten anpassen und eigene Vorlagen erstellen. Die Shopify Order Printer-App unterstützt Vorlagen mit HTML-, CSS- und Liquid-Variablen. Bevor du deine Vorlagen anpasst, solltest du dich mit der Referenz zu Liquid-Variablen und -Filtern für Shopify Order Printer für alle unterstützten Vorlagenanpassungen vertraut machen.

Tipp

Du kannst eine Standardvorlage wiederherstellen.

Die folgenden Beispiele demonstrieren, wie du Shopify Order Printer-Vorlagen anpassen kannst.

Logo zu einer Vorlage hinzufügen

Du kannst dein Logo zu deiner Vorlage hinzufügen.

Schritte:

1. Gehe in deinem Shopify-Adminbereich zu Inhalt > Dateien.
2. Klicke auf Dateien hochladen und wähle die Bilddatei aus, die du hochladen möchtest.
3. Um die URL für dein Logobild zu kopieren, klicke auf das Link-Symbol.
4. Klicke auf Einstellungen > Apps und Vertriebskanäle.
5. Klicke auf Order Printer.
6. Klicke auf Vorlagen.
7. Klicke auf den Namen der Vorlage, die du bearbeiten möchtest.
8. Füge im Code-Editor den folgenden Code-Block ein:

liquid <div style="text-align: center;"> <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE"> </div>

1. Ersetze den Code YOUR_IMAGE_URL_HERE durch deine Bild-URL.
2. Optional: Um dein Logo auszurichten, ändere den Wert text-align zu left, right oder center.
3. Optional: Um die Logobreite anzupassen, ändere den Wert width auf einen größeren oder kleineren Wert ab, z. B. 8em oder 2em.
4. Optional: Um eine Vorschau deiner Vorlage anzuzeigen, klicke auf Vorschau.
5. Klicke auf Speichern.

Beispiel:

Das folgende Beispiel demonstriert, wie dein HTML-Code aussehen sollte, nachdem du dein Logo zu deiner Vorlage hinzugefügt hast:

Bilder zu einer Vorlage hinzufügen

Du kannst Bilder zu deiner Vorlage hinzufügen.

Schritte:

1. Gehe in deinem Shopify-Adminbereich zu Inhalt > Dateien.
2. Klicke auf Dateien hochladen und wähle die Bilddatei aus, die du hochladen möchtest.
3. Um die URL für dein Bild zu kopieren, klicke auf das Link-Symbol.
4. Klicke auf Einstellungen > Apps und Vertriebskanäle.
5. Klicke auf Order Printer.
6. Klicke auf Vorlagen.
7. Klicke auf den Namen der Vorlage, die du bearbeiten möchtest.
8. Füge im Code-Editor den Codeblock <img src=”Image Source” /> ein.
9. Ersetze den Code Image Source durch deine Bild-URL.
10. Klicke auf Speichern.

Tabellenbreite auf 100 % einstellen

Du kannst deiner Tabelle Rahmen hinzufügen und die Breite auf 100 % einstellen. Du musst der Tabelle die Klasse table-tabular hinzufügen.

Schritte:

1. Klicke in deinem Shopify-Adminbereich auf Einstellungen > Apps und Vertriebskanäle.

2. Klicke auf der Seite Apps und Vertriebskanäle auf Order Printer.

3. Klicke auf App öffnen.

4. Klicke auf Vorlagen.

5. Klicke auf die Vorlage, die du bearbeiten möchtest.

6. Suche im Code-Editor die Tabelle, die du bearbeiten möchtest, und füge die Klasse table-tabular zu deiner Tabelle hinzu.

7. Optional: Um eine Vorschau deiner Vorlage anzuzeigen, klicke auf Vorschau.

8. Klicke auf Speichern.

Beispiel:

<table class="table-tabular">
    ...
</table>

Vorschaubilder der Produkte anzeigen

Du kannst deiner Bestellvorlage Miniaturansichten für Produkte hinzufügen. Du musst einen benutzerdefinierten Code-Block in deine Vorlage einfügen.

Schritte:

1. Klicke in deinem Shopify-Adminbereich auf Einstellungen > Apps und Vertriebskanäle.

2. Klicke auf der Seite Apps und Vertriebskanäle auf Order Printer.

3. Klicke auf App öffnen.

4. Klicke auf Vorlagen.

5. Klicke auf die Vorlage, die du bearbeiten möchtest.

6. Füge den Code-Block liquid {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} zu deiner Vorlage hinzu.

7. Optional: Um eine Vorschau deiner Vorlage anzuzeigen, klicke auf Vorschau.

8. Klicke auf Speichern.

Bestelldetails hinzufügen

Du kannst Bestelldetails zu deiner Vorlage hinzufügen, z. B. den Namen, die Menge und den Preis der gekauften Artikel.

Schritte:

1. Klicke in deinem Shopify-Adminbereich auf Einstellungen > Apps und Vertriebskanäle.

2. Klicke auf der Seite Apps und Vertriebskanäle auf Order Printer.

3. Klicke auf App öffnen.

4. Klicke auf Vorlagen.

5. Klicke auf die Vorlage, die du bearbeiten möchtest.

6. Verwende im Code-Editor Liquid-Variablen zum Hinzufügen von Bestelldetails und HTML zum Hinzufügen von Formatierungen. Wenn du beispielsweise {{ line_item.price | money }} verwendest, wird der Preis des Artikels angezeigt.

7. Optional: Um eine Vorschau deiner Vorlage anzuzeigen, klicke auf Vorschau.

8. Klicke auf Speichern.

Beispiel:

Nina möchte ihre Lieferscheinvorlage bearbeiten, um eine Liste der versendeten Artikel einzufügen. Sie fügt in der Shopify Order Printer-App den folgenden Code am Ende ihrer Lieferschein-Vorlage ein. Dadurch ist auf den Lieferscheinen von Nina jetzt eine Tabelle mit den gekauften Artikeln enthalten.

liquid <br> <br> <table class="table-tabular" style="margin: 0 0 1.5em 0;"> <thead> <tr> <th>Quantity</th> <th>Item</th> {% if tax_lines.size > 0 %} <th>Taxes</th> {% endif %} <th>Price</th> </tr> </thead> <tbody> {% for line_item in line_items %} <tr> <td>{{ line_item.quantity }} x</td> <td><b>{{ line_item.title }}</b></td> {% if line_item.tax_lines %} <td> {% for tax_line in line_item.tax_lines %} {{ tax_line.price | money }} {{ tax_line.title }}<br/> {% endfor %} </td> {% endif %} <td>{{ line_item.price | money }}</td> </tr> {% endfor %} </tbody> </table>

Einen Barcode zu einer Vorlage hinzufügen

Du kannst einen Barcode zu deiner Vorlage hinzufügen

Schritte:

1. Klicke in deinem Shopify-Adminbereich auf Einstellungen > Apps und Vertriebskanäle.

2. Klicke auf der Seite Apps und Vertriebskanäle auf Order Printer.

3. Klicke auf App öffnen.

4. Klicke auf Vorlagen.

5. Klicke auf die Vorlage, die du bearbeiten möchtest.

6. Füge den Code-Block <s-barcode value="a" /> zu deiner Vorlage hinzu.

7. Ersetze den Wert `` durch den Wert deines Barcodetexts.

8. Optional: Um eine Vorschau deiner Vorlage anzuzeigen, klicke auf Vorschau.

9. Klicke auf Speichern.

Einen QR-Code zu einer Vorlage hinzufügen

Du kannst einen QR-Code zu deiner Vorlage hinzufügen.

Schritte:

1. Klicke in deinem Shopify-Adminbereich auf Einstellungen > Apps und Vertriebskanäle.

2. Klicke auf der Seite Apps und Vertriebskanäle auf Order Printer.

3. Klicke auf App öffnen.

4. Klicke auf Vorlagen.

5. Klicke auf die Vorlage, die du bearbeiten möchtest.

6. Füge den Code-Block <s-barcode type="qrcode" value="" /> zu deiner Vorlage hinzu.

7. Ersetze den Wert `` durch den Wert deines QR-Codetexts.

8. Optional: Um eine Vorschau deiner Vorlage anzuzeigen, klicke auf Vorschau.

9. Klicke auf Speichern.

Eine Google-Schriftart in einer Vorlage verwenden

Um eine Google-Schriftart in deiner Vorlage zu verwenden, füge den folgenden Code in deine Vorlage ein und ersetze dann die FontName-Variable durch den Namen deiner Google-Schriftart:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=FontName">
<style>
  body {
    font-family: FontName, serif;
  }
</style>

Schriftgröße erhöhen

Um die Schriftgröße in deiner Vorlage zu erhöhen, füge den folgenden Code in deine Vorlage ein und passe dann die Zahl 14 mit einem größeren oder kleineren Wert an:

<style>
  :root {
    --font-size: 14px;
  }
</style>

Um die Schriftgröße der Überschriften in deiner Vorlage zu erhöhen, füge den folgenden Code in deine Vorlage ein und passe dann die Werte neben der Überschrift an:

<style>
  :root {
    --h1-font-size: 18px;
    --h2-font-size: 16px;
    --h3-font-size: 14px;
  }
</style>

Wenn du deine Vorlagen aus der veralteten Order Printer-App importiert hast, kannst du deine Schriftgröße mit dem folgenden Codeblock erhöhen:

<style>
  :root {
    --legacy-font-size: 14px;
    --legacy-print-font-size: 18px;
  }
</style>