Templates aanpassen met Shopify Order Printer

Deze pagina is afgedrukt op Jun 26, 2024. Ga voor de huidige versie naar https://help.shopify.com/nl/manual/orders/printing-orders/shopify-order-printer/customizing-templates.

Je kunt bestaande templates op verschillende manieren aanpassen en je eigen templates aanmaken. De Shopify Order Printer-app ondersteunt templates die zijn aangemaakt met HTML-, CSS- en Liquid-variabelen. Voordat je templates gaat aanpassen is het een goed idee om de documentatie over Liquid-variabelen en filters voor Shopify Order Printer voor alle ondersteunde template-aanpassingen door te nemen.

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

Op deze pagina

Je kunt een logo aan de template toevoegen.

Stappen:

  1. Ga vanuit het Shopify-beheercentrum naar Content > Bestanden.
  2. Klik op Bestanden uploaden en selecteer het bestand dat je wil uploaden.
  3. Als je de URL voor je logoafbeelding wil kopiëren, klik je op het link-pictogram.
  4. Klik op Instellingen > Apps en verkoopkanalen.
  5. Klik op Order Printer.
  6. Klik op Templates.
  7. Klik op de naam van de template die je wilt bewerken.
  8. Plak in de code-editor het volgende codeblok:

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

  1. Vervang YOUR_IMAGE_URL_HERE in de code door je afbeeldings-URL.
  2. Optioneel: Wijzig de waarde text-align naar left, right of center om het logo uit te lijnen.
  3. Optioneel: Wijzig de waarde width naar een grotere of kleinere waarde, zoals 8em of 2em, om de breedte van het logo aan te passen.
  4. Optioneel: Klik op Voorbeeld om een voorbeeld van de template te bekijken.
  5. Klik op Opslaan.

Voorbeeld:

In het volgende voorbeeld zie je hoe de HTML eruitziet nadat je het logo aan de template hebt toegevoegd:

Voorbeeld met een codeblok voor het toevoegen van een logo aan een template

Afbeeldingen aan een template toevoegen

Je kunt afbeeldingen aan je template toevoegen.

Stappen:

  1. Ga vanuit het Shopify-beheercentrum naar Content > Bestanden.
  2. Klik op Bestanden uploaden en selecteer het bestand dat je wil uploaden.
  3. Als je de URL voor je afbeelding wil kopiëren, klik je op het Link-pictogram.
  4. Klik op Instellingen > Apps en verkoopkanalen.
  5. Klik op Order Printer.
  6. Klik op Templates.
  7. Klik op de naam van de template die je wilt bewerken.
  8. Plak het codeblok <img src=”Image Source” /> in de code-editor.
  9. Vervang Image Source in de code door je afbeeldings-URL.
  10. Klik op Opslaan.

Tabelbreedte 100% maken

Je kunt randen aan een tabel toevoegen en een breedte van 100% instellen. Voeg de klasse table-tabular toe aan de tabel.

Stappen:

  1. Klik in het Shopify-beheercentrum op Instellingen > Apps en verkoopkanalen.

  2. Klik op de pagina Apps en verkoopkanalen op Order Printer.

  3. Klik op App openen.

  4. Klik op Templates.

  5. Klik op de template die je wil bewerken.

  6. Zoek in de code-editor de tabel die je wil bewerken en voeg vervolgens de klasse table-tabular toe aan de tabel.

  7. Optioneel: Klik op Voorbeeld om een voorbeeld van de template te bekijken.

  8. Klik op Opslaan.

Voorbeeld:

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

Productminiaturen weergeven

Je kunt productminiaturen toevoegen aan de bestellingstemplate. Plaats een aangepast codeblok in de template.

Stappen:

  1. Klik in het Shopify-beheercentrum op Instellingen > Apps en verkoopkanalen.

  2. Klik op de pagina Apps en verkoopkanalen op Order Printer.

  3. Klik op App openen.

  4. Klik op Templates.

  5. Klik op de template die je wil bewerken.

  6. Voeg het codeblok liquid {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} toe aan de template.

  7. Optioneel: Klik op Voorbeeld om een voorbeeld van de template te bekijken.

  8. Klik op Opslaan.

Bestelgegevens toevoegen

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

Stappen:

  1. Klik in het Shopify-beheercentrum op Instellingen > Apps en verkoopkanalen.

  2. Klik op de pagina Apps en verkoopkanalen op Order Printer.

  3. Klik op App openen.

  4. Klik op Templates.

  5. Klik op de template die je wil bewerken.

  6. Gebruik Liquid-variabelen in de code-editor om bestelgegevens en HTML voor opmaak toe te voegen. Als je bijvoorbeeld de code {{ line_item.price | money }} gebruikt, wordt de prijs van het artikel weergegeven.

  7. Optioneel: Klik op Voorbeeld om een voorbeeld van de template te bekijken.

  8. Klik op Opslaan.

Voorbeeld:

Nyla wil de pakbontemplate bewerken om een lijst op te nemen van de artikelen die worden verzonden. Ze voegt de volgende code onder aan de pakbontemplate toe in de Shopify Order Printer-app. Daardoor bevatten de pakbonnen van Nyla nu een tabel met de gekochte artikelen.

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>

Een barcode aan een template toevoegen

Je kunt een barcode aan je template toevoegen.

Stappen:

  1. Klik in het Shopify-beheercentrum op Instellingen > Apps en verkoopkanalen.

  2. Klik op de pagina Apps en verkoopkanalen op Order Printer.

  3. Klik op App openen.

  4. Klik op Templates.

  5. Klik op de template die je wil bewerken.

  6. Voeg het codeblok <s-barcode value="a" /> aan de template toe.

  7. Vervang de waarde voor `` door de tekstwaarde van de barcode.

  8. Optioneel: Klik op Voorbeeld om een voorbeeld van de template te bekijken.

  9. Klik op Opslaan.

Een QR-code aan een template toevoegen

Je kunt een QR-code aan je template toevoegen.

Stappen:

  1. Klik in het Shopify-beheercentrum op Instellingen > Apps en verkoopkanalen.

  2. Klik op de pagina Apps en verkoopkanalen op Order Printer.

  3. Klik op App openen.

  4. Klik op Templates.

  5. Klik op de template die je wil bewerken.

  6. Voeg het codeblok <s-barcode type="qrcode" value="" /> aan de template toe.

  7. Vervang de waarde voor `` door de tekstwaarde van je QR-code.

  8. Optioneel: Klik op Voorbeeld om een voorbeeld van de template te bekijken.

  9. Klik op Opslaan.

Een Google-lettertype gebruiken in een template

Als je een Google-lettertype in je template wil gebruiken, plak je de volgende code in de template en vervang je de FontName-variable door de naam van het Google-lettertype:

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

De tekengrootte verhogen

Als je de tekengrootte in je template wil verhogen, plak je de volgende code in de template en zet je het getal 14 op de gewenste grootte:

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

Als je de letters van de kopteksten in je template wil vergroten, plak je de volgende code in de template en stel je de waarden naast de koptekst bij:

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

Als je je templates uit de oude Order Printer-app hebt geïmporteerd, kun je de tekengrootte verhogen met behulp van het volgende codeblok:

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

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis