Shopify Order Printer-templates aanmaken en aanpassen

Je kunt je templates op veel manieren aanpassen en je eigen templates aanmaken. De Shopify Order Printer-app ondersteunt templates die zijn gemaakt met HTML, CSS en Liquid-variabelen. Zorg dat je, voordat je je templates aanpast, de referentie voor Liquid-variabelen en -filters voor Shopify Order Printer raadpleegt voor alle ondersteunde template-aanpassingen.

Bekijk de volgende voorbeelden om te zien hoe je Shopify Order Printer-templates kunt aanpassen.

Op deze pagina

Je logo aan een template toevoegen

Je kunt je logo aan je template toevoegen.

Stappen:

Ga in het Shopify-beheercentrum naar Content > Bestanden.
Klik op Bestanden uploaden en selecteer vervolgens het afbeeldingsbestand dat je wilt uploaden.
Klik op het pictogram Link om de URL voor je logoafbeelding te kopiëren.
Klik op Instellingen > Apps.
Klik op Order Printer.
Klik op Templates.
Klik op de naam van de template die je wilt bewerken.
Plak het volgende codeblok in de code-editor:

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

Vervang YOUR_IMAGE_URL_HERE in de code door de URL van je afbeelding.
Optioneel: wijzig de waarde van text-align in left, right of center om je logo uit te lijnen.
Optioneel: pas de breedte van je logo aan door de waarde van width te wijzigen in een grotere of kleinere waarde, zoals 8em of 2em.
Optioneel: klik op Voorbeeld voor een voorbeeldweergave van je template.
Klik op Opslaan.

Voorbeeld:

Bekijk het volgende voorbeeld van hoe je HTML eruit moet zien nadat je je logo aan je template hebt toegevoegd:

Afbeeldingen toevoegen aan een template

Je kunt afbeeldingen aan je template toevoegen.

Stappen:

Ga in het Shopify-beheercentrum naar Content > Bestanden.
Klik op Bestanden uploaden en selecteer vervolgens het afbeeldingsbestand dat je wilt uploaden.
Klik op het pictogram Link om de URL voor je afbeelding te kopiëren.
Klik op Instellingen > Apps.
Klik op Order Printer.
Klik op Templates.
Klik op de naam van de template die je wilt bewerken.
Plak het codeblok <img src=”Image Source” /> in de code-editor.
Vervang Image Source in de code door de URL van je afbeelding.
Klik op Opslaan.

Tabelbreedte instellen op 100%

Je kunt randen aan je tabel toevoegen en deze uitrekken tot 100% breedte. Hiervoor moet je de class table-tabular aan je tabel toevoegen.

Stappen:

Ga in je Shopify-beheercentrum naar Apps > Order Printer.
Klik op Templates.
Klik op de template die je wilt bewerken.
Zoek in de code-editor de tabel die je wilt bewerken en voeg vervolgens de class table-tabular toe aan je tabel.
Optioneel: klik op Voorbeeld voor een voorbeeldweergave van je template.
Klik op Opslaan.

Voorbeeld:

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

Productminiaturen weergeven

Je kunt productminiaturen toevoegen aan je besteltemplate. Hiervoor moet je een aangepast codeblok in je template invoegen.

Stappen:

Ga in je Shopify-beheercentrum naar Apps > Order Printer.
Klik op Templates.
Klik op de template die je wilt bewerken.
Voeg het codeblok {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} toe aan je template.
Optioneel: klik op Voorbeeld voor een voorbeeldweergave van je template.
Klik op Opslaan.

Bestelgegevens toevoegen

Je kunt bestelgegevens aan je template toevoegen, zoals de naam, het aantal en de prijs van gekochte artikelen.

Stappen:

Ga in je Shopify-beheercentrum naar Apps > Order Printer.
Klik op Templates.
Klik op de template die je wilt bewerken.
Gebruik in de code-editor Liquid-variabelen om bestelgegevens toe te voegen en HTML om opmaak toe te voegen. Als je bijvoorbeeld {{ line_item.price | money }} gebruikt, wordt de prijs van het artikel weergegeven.
Optioneel: klik op Voorbeeld voor een voorbeeldweergave van je template.
Klik op Opslaan.

Voorbeeld:

Nyla wil haar template voor pakbonnen bewerken om een lijst met de te verzenden artikelen op te nemen. Ze voegt de volgende code toe onderaan haar template Pakbon in de Shopify Order Printer-app. Hierdoor bevatten Nyla's pakbonnen nu een tabel met de gekochte artikelen.

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

Een barcode toevoegen aan een template

Je kunt een barcode aan je template toevoegen.

Stappen:

Ga in je Shopify-beheercentrum naar Apps > Order Printer.
Klik op Templates.
Klik op de template die je wilt bewerken.
Voeg het codeblok <s-barcode value="a" /> toe aan je template.
Vervang de `value`-waarde door de tekstwaarde van je barcode.
Optioneel: klik op Voorbeeld voor een voorbeeldweergave van je template.
Klik op Opslaan.

Een QR-code toevoegen aan een template

Je kunt een QR-code aan je template toevoegen.

Stappen:

Ga in je Shopify-beheercentrum naar Apps > Order Printer.
Klik op Templates.
Klik op de template die je wilt bewerken.
Voeg het codeblok <s-barcode type="qrcode" value="" /> toe aan je template.
Vervang de `value`-waarde door de tekstwaarde van je QR-code.
Optioneel: klik op Voorbeeld voor een voorbeeldweergave van je template.
Klik op Opslaan.

Een Google-lettertype gebruiken in een template

Plak de volgende code in je template om een Google-lettertype te gebruiken en vervang de variabele FontName door de naam van je Google-lettertype:

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

De lettergrootte vergroten

Plak de volgende code in je template om de lettergrootte te vergroten en pas het getal 14 aan met een grotere of kleinere waarde:

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

Plak de volgende code in je template om de lettergrootte van je koppen te vergroten en pas de waarden naast de kop aan:

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

Als je je templates hebt geïmporteerd uit de verouderde Order Printer-app, kun je de lettergrootte vergroten met het volgende codeblok:

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