Création et modification de modèles avec Shopify Order Printer

Vous pouvez créer et modifier des modèles à l’aide de l’appli Shopify Order Printer dans votre interface administrateur Shopify. Par défaut, l’appli Shopify Order Printer inclut les modèles suivants :

Facture : une facture que vous pouvez envoyer à un client
Bordereau d’expédition : un document imprimé indiquant l’adresse de votre boutique et l’adresse de livraison de votre client.
Liste de préparation : un document qui comprend une liste des articles à prélever pour traiter la commande de votre client.

Vous pouvez utiliser Liquid pour créer vos propres modèles personnalisés pour d’autres documents à insérer dans les colis, tels que des coupons, des étiquettes ou des reçus. L’appli Shopify Order Printer prend en charge les modèles créés avec des variables HTML, CSS et Liquid.

Sur cette page

Points à prendre en compte pour la création de modèles dans l’appli Shopify Order Printer

Examinez les points suivants avant de créer des modèles dans l’appli Shopify Order Printer :

Pour créer ou modifier des modèles dans l’application Shopify Order Printer, vous devez bien connaître le HTML, le CSS et Liquid. L’assistance technique pour les thèmes Shopify peut vous aider à apporter des modifications mineures aux thèmes Shopify gratuits dans le cadre de la Politique de conception de Shopify. Si vous avez besoin de modifications plus complexes ou si vous utilisez un thème qui n’a pas été conçu par Shopify, envisagez d’engager un Partenaire Shopify.
Vous pouvez créer jusqu’à 15 modèles différents.
Consultez la documentation de référence sur les variables et les filtres Liquid pour Shopify Order Printer pour 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.

Pour configurer un modèle de liste de préparation, consultez la page Configurer et imprimer des listes de préparation à l’aide de l’appli Shopify Order Printer.

Étapes :

Depuis votre interface administrateur Shopify, accédez à Applications > Order Printer.
Cliquez sur Modèles.
Cliquez sur Créer un modèle.
Dans le champ Nom, saisissez un nom pour votre modèle, tel que « étiquette » ou « coupon ».
Dans la section Modifier le code, ajoutez du code HTML, CSS ou Liquid pour créer votre modèle.
Facultatif : pour prévisualiser votre modèle, cliquez sur Aperçu.
Cliquez sur Enregistrer.

Modifier un modèle

Vous pouvez modifier un modèle existant. En savoir plus sur la personnalisation des modèles Order Printer.

Étapes :

Depuis votre interface administrateur Shopify, accédez à Applications > Order Printer.
Cliquez sur Modèles.
Cliquez sur le modèle que vous souhaitez modifier.
Dans la section Modifier le code, ajoutez ou modifiez du code HTML, CSS ou Liquid.
Facultatif : pour prévisualiser votre modèle, cliquez sur Aperçu.
Cliquez sur Enregistrer.

Restauration du modèle par défaut

Vous pouvez restaurer les valeurs par défaut des modèles intégrés de bordereau d’expédition et de facture. Utilisez les blocs de code suivants pour restaurer vos modèles par défaut.

Modèle de facture par défaut

Version du 6 juin 2024.

<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 de bordereau d’expédition par défaut

Version du 6 juin 2024.

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