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.

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 :

Créer un modèle

Vous pouvez créer un nouveau modèle pour votre document de commande.

Étapes :

  1. Dans votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.
  2. Cliquez sur Order Printer.
  3. Cliquez sur Ouvrir l’application.

  4. Cliquez sur Modèles.

  5. Cliquez sur Créer un modèle.

  6. Dans le champ Nom, saisissez un nom pour votre modèle, par exemple étiquette ou coupon.

  7. Dans la section Modifier le code, ajoutez du code HTML, CSS ou Liquid pour créer votre modèle.

  8. Facultatif : pour afficher un aperçu de votre modèle, cliquez sur Aperçu.

  9. 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 :

  1. Dans votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.
  2. Cliquez sur Order Printer.
  3. Cliquez sur Ouvrir l’application.

  4. Cliquez sur Modèles.

  5. Cliquez sur le modèle que vous souhaitez modifier.

  6. Dans la section Modifier le code, ajoutez ou modifiez le code HTML, CSS ou Liquid.

  7. Facultatif : pour afficher un aperçu de votre modèle, cliquez sur Aperçu.

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

Vous ne trouvez pas les réponses que vous recherchez ? Nous sommes là pour vous aider.