Templates aanmaken en bewerken met Shopify Order Printer
Je kunt templates aanmaken en bewerken met de Shopify Order Printer-app in het Shopify-beheercentrum. De Shopify Order Printer-app bevat standaard de volgende templates:
- Factuur: een factuur die je naar een klant kunt versturen.
- Pakbon: een afdruk van je winkeladres en het bezorgadres van de klant.
Met Liquid kun je templates aanmaken voor je eigen bijsluiters, zoals coupons, labels of bonnen. De Shopify Order Printer-app ondersteunt templates die zijn aangemaakt met HTML-, CSS- en Liquid-variabelen.
Op deze pagina
Aandachtspunten bij het aanmaken van templates in de Shopify Order Printer-app
Controleer de volgende aandachtspunten voordat je templates aanmaakt in de Shopify Order Printer-app:
- Je kunt alleen templates aanmaken of bewerken in de Shopify Order Printer-app als je bekend bent met HTML, CSS en Liquid. Shopify Theme Support kan helpen met kleine aanpassingen binnen het kader van het ontwerpbeleid van Shopify.
- Je kunt tot vijftien verschillende templates aanmaken.
- Controleer de naslag over Liquid-variabelen en filters voor Shopify Order Printer voor alle ondersteunde templateaanpassingen.
Een template aanmaken
Je kunt een nieuwe template voor je bestellingsdocument aanmaken.
Stappen:
Ga in het Shopify-beheercentrum naar Instellingen > Apps en verkoopkanalen.
Klik op Order Printer.
Klik op App openen.
Klik op Templates.
Klik op Een template aanmaken.
Voer in het veld Naam een naam in voor je template, zoals label of coupon.
Voeg in de sectie Code bewerken HTML-, CSS- of Liquid-code toe om de template aan te maken.
Optioneel: Klik op Voorbeeld om een voorbeeld van de template te bekijken.
Klik op Opslaan.
Een template bewerken
Je kunt een bestaande template bewerken. Hier vind je meer informatie over Order Printer-templates aanpassen.
Stappen:
Ga in het Shopify-beheercentrum naar Instellingen > Apps en verkoopkanalen.
Klik op Order Printer.
Klik op App openen.
Klik op Templates.
Klik op de template die je wil bewerken.
Voeg in het gedeelte Code bewerken HTML-, CSS- of Liquid-code toe of bewerk deze.
Optioneel: Klik op Voorbeeld om een voorbeeld van de template te bekijken.
Klik op Opslaan.
De standaardsjabloon herstellen
Je kunt de ingebouwde pakbon- en factuursjablonen herstellen naar de standaardwaarden. Gebruik de volgende codeblokken om je templates te herstellen naar de standaardinstellingen.
Standaardsjabloon factuur
Versie van 6 juni 2024.
liquid
<div>
<div class="columns">
<h1>Invoice</h1>
<div>
<p style="text-align: right; margin: 0;">
Order {{ order.order_name }}<br />
{% if order.po_number %}PO # {{ order.po_number }}<br />{% endif %}
{{ order.created_at | date: "%B %e, %Y" }}
</p>
</div>
</div>
<div class="columns" style="margin-top: 1.5em;">
<div class="address">
<strong>From</strong><br/>
{{ shop.name }}<br/>
{{ shop.address | format_address }}
{% if shop.phone %}{{ shop.phone }}{% endif %}
</div>
{% if order.billing_address %}
<div class="address">
<strong>Bill to</strong>
{{ order.billing_address | format_address }}
</div>
{% endif %}
{% if order.shipping_address %}
<div class="address">
<strong>Ship to</strong>
{{ order.shipping_address | format_address }}
{% if order.shipping_address.phone %}{{ order.shipping_address.phone }}{% endif %}
</div>
{% endif %}
</div>
<hr />
<h2>Order Details</h2>
<table class="table-tabular" style="margin: 1em 0 0 0;">
<thead>
<tr>
<th scope="col">Qty</th>
<th scope="col">Item</th>
<th scope="col" style="text-align: right;">Price</th>
</tr>
</thead>
<tbody>
{% for line_item in order.line_items %}
<tr>
<td scope="row">{{ line_item.quantity }}</td>
<td>{{ line_item.title }}
{% if line_item.line_level_discount_allocations.size > 0 %}
<span class="subduedText">
{% for discount_allocation in line_item.line_level_discount_allocations %}
<br>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
{% endfor %}
</span>
{% endif %}
</td>
<td style="text-align: right;">
{% if line_item.original_price != line_item.final_price %}
<span class="subduedText"><s>{{ line_item.original_price | money }}</s></span>
{% endif %}
{{ line_item.final_price | money }}
</td>
</tr>
{% endfor %}
<tr>
<td scope="row" colspan="2" style="text-align: right;">Subtotal</td>
<td style="text-align: right;">{{ order.line_items_subtotal_price | money }}</td>
</tr>
{% for discount_application in order.cart_level_discount_applications %}
<tr>
<td scope="row" colspan="2" style="text-align: right;">{% if discount_application.title %}<span class="subduedText">{{ discount_application.title }}</span>{% endif %}</td>
<td style="text-align: right;">-{{ discount_application.total_allocated_amount | money }}</td>
</tr>
{% endfor %}
<tr>
<td scope="row" colspan="2" style="text-align: right;">Tax</td>
<td style="text-align: right;">{{ order.tax_price | money }}</td>
</tr>
{% if order.shipping_address %}
<tr>
<td scope="row" colspan="2" style="text-align: right;">Shipping</td>
<td style="text-align: right;">{{ order.shipping_price | money }}</td>
</tr>
{% endif %}
<tr>
<td scope="row" colspan="2" style="text-align: right;"><strong>Total</strong></td>
<td style="text-align: right;"><strong>{{ order.total_price | money }}</strong></td>
</tr>
{% if order.net_payment != order.total_net_amount %}
<tr>
<td scope="row" colspan="2" style="text-align: right;">Total Paid</td>
<td style="text-align: right;">{{ order.net_payment | money }}</td>
</tr>
{% endif %}
{% if order.total_refunded_amount > 0 %}
<tr>
<td scope="row" colspan="2" style="text-align: right;">Total Refunded</td>
<td style="text-align: right;">-{{ order.total_refunded_amount | money }}</td>
</tr>
{% endif %}
{% if order.net_payment != order.total_net_amount %}
<tr>
<td scope="row" colspan="2" style="text-align: right;"><strong>Outstanding Amount</strong></td>
<td style="text-align: right;"><strong>{{ order.total_price | minus: order.net_payment | money }}</strong></td>
</tr>
{% endif %}
</tbody>
</table>
{% if transactions.size > 1 %}
<h2>Transaction Details</h2>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
<thead>
<tr>
<th scope="col">Type</th>
<th scope="col">Amount</th>
<th scope="col">Kind</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
{% for transaction in transactions %}
<tr>
<td scope="row">{{ transaction.gateway | payment_method }}</td>
<td>{{ transaction.amount | money }}</td>
<td>{{ transaction.kind }}</td>
<td>{{ transaction.status }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
{% if order.note %}
<h2>Note</h2>
<p>{{ order.note }}</p>
{% endif %}
<p style="margin-bottom: 0;">If you have any questions, please send an email to <u>{{ shop.email }}</u></p>
</div>
Standaardsjabloon pakbon
Versie van 6 juni 2024.
liquid
<div>
<div class="columns">
<h1>Packing Slip</h1>
<div class="address">
<p style="text-align: right; margin: 0;">
Order {{ order.order_name }}<br />
{% if order.po_number %}PO # {{ order.po_number }}<br />{% endif %}
{{ order.created_at | date: "%B %e, %Y" }}
</p>
</div>
</div>
<div class="columns" style="margin-top: 1.5em;">
<div class="address">
<strong>From</strong><br/>
{{ shop.name }}<br/>
{{ shop.address | format_address }}
</div>
{% if order.shipping_address %}
<div class="address">
<strong>Ship to</strong>
{{ order.shipping_address | format_address }}
</div>
{% endif %}
</div>
<hr />
<h2>Order Details</h2>
<table class="table-tabular" style="margin: 1em 0 0 0;">
<thead>
<tr>
<th scope="col" style="width: 15%; text-align: left;">Qty</th>
<th scope="col" style="width: 85%; text-align: left;">Item</th>
</tr>
</thead>
<tbody>
{% for line_item in order.line_items %}
<tr>
<td scope="row" style="text-align: left;">{{ line_item.quantity }}</td>
<td style="text-align: left;">{{ line_item.title }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>