Hilfe
Einloggen

Shopify Order Printer-Vorlagen erstellen und anpassen

Du kannst deine Vorlagen auf vielfältige Weise anpassen und deine eigenen Vorlagen erstellen. Die App Shopify Order Printer unterstützt Vorlagen, die mit HTML, CSS und Liquid-Variablen erstellt wurden. Bevor du deine Vorlagen anpasst, solltest du dich mit der Referenz für Liquid-Variablen und -Filter für Shopify Order Printer für alle unterstützten Vorlagenanpassungen vertraut machen.

Sieh dir die folgenden Beispiele an, um zu erfahren, wie du Shopify Order Printer-Vorlagen anpassen kannst.

Auf dieser Seite

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 dann 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.

  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:

<div style="text-align: center;">
  <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE">
</div>
  1. Ersetze YOUR_IMAGE_URL_HERE im Code durch deine Bild-URL.
  2. Optional: Um dein Logo auszurichten, ändere den text-align-Wert in left, right oder center.
  3. Optional: Um die Breite deines Logos anzupassen, ändere den width-Wert in einen größeren oder kleineren Wert, z. B. 8em oder 2em.
  4. Optional: Um eine Vorschau deiner Vorlage anzuzeigen, klicke auf Vorschau.
  5. Klicke auf Speichern.

Beispiel:

Sieh dir das folgende Beispiel an, wie dein HTML nach dem Hinzufügen deines Logos zu deiner Vorlage angezeigt werden sollte:

Ein Beispiel, das einen Code-Block zum Hinzufügen eines Logos zu einer Vorlage anzeigt

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 dann 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.

  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 Code-Block <img src=”Image Source” /> ein.

  9. Ersetze Image Source im Code durch deine Bild-URL.

  10. Klicke auf Speichern.

Tabellenbreiten auf 100 % festlegen

Du kannst deiner Tabelle Ränder hinzufügen und sie auf 100 % Breite ausdehnen. Dafür musst du die Klasse table-tabular zu deiner Tabelle hinzufügen.

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu Apps > Order Printer.

  2. Klicke auf Vorlagen.

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

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

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

  6. Klicke auf Speichern.

Beispiel:

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

Produkt-Thumbnails anzeigen

Du kannst Produkt-Thumbnails zu deiner Bestellvorlage hinzufügen. Dafür musst du einen benutzerdefinierten Code-Block in deine Vorlage einfügen.

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu Apps > Order Printer.

  2. Klicke auf Vorlagen.

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

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

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

  6. Klicke auf Speichern.

Bestelldetails hinzufügen

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

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu Apps > Order Printer.

  2. Klicke auf Vorlagen.

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

  4. Verwende im Code-Editor Liquid-Variablen, um Bestelldetails hinzuzufügen, und HTML für die Formatierung. Wenn du beispielsweise {{ line_item.price | money }} verwendest, wird der Preis des Artikels angezeigt.

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

  6. Klicke auf Speichern.

Beispiel:

Nyla möchte ihre Lieferscheinvorlage bearbeiten, um eine Liste der versendeten Artikel aufzunehmen. Sie fügt den folgenden Code unten in ihre Lieferschein-Vorlage in der Shopify Order Printer-App ein. Daraufhin enthalten Nylas Lieferscheine eine Tabelle, in der die gekauften Artikel aufgelistet sind.

<br>
<br>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th scope="col">Quantity</th>
      <th scope="col">Item</th>
      {% if tax_lines.size > 0 %}
      <th scope="col">Taxes</th>
      {% endif %}
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
        <td scope="row">{{ 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. Gehe in deinem Shopify-Adminbereich zu Apps > Order Printer.

  2. Klicke auf Vorlagen.

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

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

  5. Ersetze den ``-Wert durch den Textwert deines Barcodes.

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

  7. Klicke auf Speichern.

Einen QR-Code zu einer Vorlage hinzufügen

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

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu Apps > Order Printer.

  2. Klicke auf Vorlagen.

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

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

  5. Ersetze den ``-Wert durch den Textwert deines QR-Codes.

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

  7. 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 Variable FontName 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 an einen größeren oder kleineren Wert an:

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

Um die Schriftgröße deiner Ü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 älteren Order Printer-App importiert hast, kannst du deine Schriftgröße mit dem folgenden Code-Block erhöhen:

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