Anpassen von Order Printer-Vorlagen

Du kannst in deinem Shopify-Adminbereich bis zu 15 Vorlagen für die App Order Printer erstellen und anpassen. Standardmäßig enthält die App Order Printer zwei Vorlagen:

  • Rechnung – eine Basis-Rechnung, die du an einen Kunden senden kannst
  • Lieferschein – ein Ausdruck der Adresse deines Shops und der Lieferadresse des Kunden.

Erstellen einer neuen Order Printer-Vorlage

Um eine neue Order Printer-Vorlage zu erstellen, musst du dich mit HTML, CSS und Liquid auskennen. Der Shopify-Theme-Support kann dir bei kleineren Anpassungen im Rahmen der Shopify-Designrichtlinie behilflich sein.

Schritte:

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

  2. Klicke auf Order Printer, um die App zu öffnen.

  3. Klicke auf Vorlagen verwalten.

  4. Klicke auf Vorlage hinzufügen.

  5. Gib einen Namen für deine neue Vorlage in das Feld Name ein.

  6. Füge HTML-, CSS- oder Liquid-Code in das Feld Code ein, um deine Vorlage zu erstellen.

  7. Wenn du fertig bist, klicke auf Speichern.

Order Printer-Vorlagen bearbeiten

Für die Bearbeitung von Order Printer-Vorlagen sind Kenntnisse in HTML, CSS und Liquid erforderlich. Der Shopify-Theme-Support kann dir bei kleineren Anpassungen im Rahmen der Shopify-Designrichtlinie behilflich sein.

Schritte:

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

  2. Klicke auf Order Printer, um die App zu öffnen.

  3. Klicke auf Vorlagen verwalten.

  4. Klicke auf den Namen der Vorlage, die du bearbeiten möchtest.

  5. Nimm Änderungen an der Vorlage vor, indem du im Feld Code HTML-, CSS- oder Liquid-Code hinzufügst oder bearbeitest. Beispiele für Vorlagenanpassungen findest du unter Beispiele für Vorlagenanpassungen.

  6. Wenn du fertig bist, klicke auf Speichern.

Beispiele für Vorlagenanpassungen

Die folgenden Beispiele zeigen einige gängige Möglichkeiten zum Anpassen von Order Printer-Vorlagen:

  1. Gehe in deinem Shopify-Adminbereich zu Inhalt > Dateien.
  2. Klicke auf Dateien hochladen und wähle auf deinem Computer die Bilddatei aus.
  3. Suche auf der Seite Dateien nach der hochgeladenen Datei und klicke auf URL kopieren.
  4. Klicke in deinem Shopify-Adminbereich auf Einstellungen > Apps und Vertriebskanäle.
  5. Klicke auf Order Printer, um die App zu öffnen.
  6. Klicke auf Vorlagen verwalten.
  7. Klicke auf den Namen der Vorlage, die du bearbeiten möchtest.
  8. Gib das folgende Code-Snippet in deine Vorlage ein, in der dein Logo erscheinen soll: <img src="your-image-URL">.
  9. Ersetze your-image-URL durch die kopierte Bild-URL. Je nachdem, wo dein Logo angezeigt werden soll, musst du eventuell ein <br/>-Tag hinzufügen, um einen Zeilenumbruch vor oder hinter deinem Bild einzufügen.

Dies sollte in HTML folgendermaßen aussehen:

Example HTML code

Beispiel: Tabellenbreiten auf 100 % einstellen

Um deine Tabellen mit Rändern zu versehen und auf 100 % Breite zu strecken, füge deiner Tabelle eine table-tabular-Klasse hinzu:

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

Beispiel: Vorschaubilder der Produkte anzeigen

Füge zum Einfügen von Miniaturansichten von Produkten diesen Code in deine Vorlage ein:

{{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}

Bestelldetails hinzufügen

Du kannst zu deinen Vorlagen Bestelldetails hinzufügen, z. B. den Namen, die Menge und die Kosten gekaufter Artikel. Um Bestelldetails zu deiner Vorlage hinzuzufügen:

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

  2. Klicke auf Order Printer, um die App zu öffnen.

  3. Klicke auf Vorlagen verwalten.

  4. Klicke auf den Namen der Vorlage, die du bearbeiten möchtest.

  5. Verwende Liquid-Variablen zum Hinzufügen von Bestelldetails und HTML zum Hinzufügen von Formatierungen. Beispielsweise wird mit {{ line_item.price | money }} der Preis des Artikels ausgedruckt.

  6. Wenn du fertig bist, klicke auf Speichern.

So möchte beispielsweise Nina ihre Lieferscheinvorlage bearbeiten, um eine Liste der versandten Artikel einzufügen. Sie fügt in der Order Printer-App den folgenden Code unten in ihre Packing slipvorlage ein:

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

Dadurch ist auf den Lieferscheinen von Nina jetzt eine Tabelle mit den gekauften Artikeln enthalten.

Du hast die gesuchten Antworten nicht gefunden? Wir helfen dir gerne weiter.