Créer et modifier des modèles à l’aide de Shopify Order Printer
Vous pouvez créer et personnaliser des modèles en utilisant l’application Shopify Order Printer dans votre interface administrateur Shopify. Par défaut, l’application Shopify Order Printer comprend les modèles suivants :
- Facture : une facture que vous pouvez envoyer à un(e) client(e)
- Bordereau d’expédition : une version imprimée de l’adresse de votre boutique et de l’adresse d’expédition de votre client(e).
Vous pouvez utiliser Liquid pour créer vos propres modèles personnalisés pour d’autres encarts d’emballage, tels que des coupons, des étiquettes ou des reçus. L’application Shopify Order Printer prend en charge les modèles réalisés avec des variables HTML, CSS et Liquid.
Sur cette page
Considérations pour la création de modèles dans l’application Shopify Order Printer
Avant de créer des modèles dans l’application Shopify Order Printer, prenez connaissance des points suivants :
- Pour créer ou modifier des modèles dans l’application Shopify Order Printer, vous devez connaître les langages HTML, CSS et Liquid. L’assistance pour les thèmes Shopify peut vous aider à apporter des modifications mineures dans le cadre de la politique en matière de conception de Shopify.
- Vous pouvez créer jusqu’à 15 modèles différents.
- Examinez les références des variables et des filtres Liquid pour Shopify Order Printer pour connaître toutes les personnalisations de modèles prises en charge.
Créer un modèle
Vous pouvez créer un nouveau modèle pour votre document de commande.
Étapes :
- Dans votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.
- Cliquez sur Order Printer.
Cliquez sur Ouvrir l’application.
Cliquez sur Modèles.
Cliquez sur Créer un modèle.
Dans le champ Nom, saisissez un nom pour votre modèle, par exemple étiquette ou coupon.
Dans la section Modifier le code, ajoutez du code HTML, CSS ou Liquid pour créer votre modèle.
Facultatif : pour afficher un aperçu de votre modèle, cliquez sur Aperçu.
Cliquez sur Enregistrer.
Modifier un modèle
Vous pouvez modifier un modèle existant. Pour en savoir plus sur les personnalisations de modèles, consultez Exemples de personnalisations de modèles.
Étapes :
- Dans votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.
- Cliquez sur Order Printer.
Cliquez sur Ouvrir l’application.
Cliquez sur Modèles.
Cliquez sur le modèle que vous souhaitez modifier.
Dans la section Modifier le code, ajoutez ou modifiez le code HTML, CSS ou Liquid.
Facultatif : pour afficher un aperçu de votre modèle, cliquez sur Aperçu.
Cliquez sur Enregistrer.
Rétablissement du modèle par défaut
Vous pouvez rétablir les valeurs par défaut du bordereau d’expédition intégré et des modèles de facture. Utilisez les blocs de code suivants pour rétablir la valeur par défaut de vos modèles.
Modèle par défaut de facture
Version du 6 juin 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>
Modèle par défaut du bordereau d’expédition
Version du 6 juin 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>