Personnalisation des modèles d'Order Printer

Vous pouvez créer et personnaliser jusqu'à 15 modèles pour l'application Order Printer dans votre interface administrateur Shopify. Par défaut, l'application Order Printer comprend deux modèles :

  • Invoice (Facture) : une facture de base que vous pouvez envoyer à un client
  • Packing slip (Bordereau d'emballage) : une version imprimée de l'adresse de votre boutique et de l'adresse d'expédition de votre client

Créer un nouveau modèle Order Printer

Pour créer un nouveau modèle Order Printer, il est nécessaire de 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.

Étapes :

  1. Depuis votre interface administrateur Shopify, accédez àApplications.

  2. Cliquez sur Order Printer pour ouvrir l'application.

  3. Cliquez sur Manage templates (Gérer les modèles) :

    Bouton Gérer les modèles

  4. Cliquez sur Add template (Ajouter un modèle) :

    Cliquer sur « Add template » (Ajouter un modèle)

  5. Saisissez un nom pour votre modèle dans le champ Name (Nom).

  6. Insérez le code HTML, CSS ou Liquid dans le champ Code pour créer votre modèle.

  7. Quand vous avez terminé, cliquez sur Enregistrer.

Modifier un modèle Order Printer

Pour modifier un modèle Order Printer, vous devez connaître le HTML, le 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.

Étapes :

  1. Depuis votre interface administrateur Shopify, accédez àApplications.

  2. Cliquez sur Order Printer pour ouvrir l'application.

  3. Cliquez sur Manage templates (Gérer les modèles) :

    Bouton Gérer les modèles

  4. Cliquez sur le nom du modèle que vous souhaitez modifier :

    Sélectionner un modèle à modifier

  5. Apportez vos changements au modèle en ajoutant ou en modifiant le code HTML, CSS ou Liquid dans le champ Code. Pour voir des exemples de modèles personnalisés, consultez la section Exemples de personnalisations de modèles.

  6. Quand vous avez terminé, cliquez sur Enregistrer.

Exemples de personnalisations de modèles

Dans les exemples suivants, vous trouverez des façons courantes de personnaliser les modèles Order Printer :

  • Ajouter votre logo à des modèles Order Printer
  • Définir la largeur des tableaux sur 100 %
  • Afficher des vignettes de produits
  • Ajouter les détails de la commande

Exemple : ajouter votre logo aux modèles Order Printer

Voici comment ajouter votre logo aux factures de commandes, bordereaux d'emballage et modèles personnalisés :

  1. Cliquez sur Upload Files (Mettre en ligne des fichiers) et sélectionnez le fichier de l'image sur votre ordinateur.

  2. Sur la page Files (Fichiers), cliquez sur l'URL de l'image pour la sélectionner, puis copiez le texte :

    Copier l'URL de l'image

  3. Depuis votre interface administrateur Shopify, accédez àApplications.

  4. Cliquez sur Order Printer pour ouvrir l'application.

  5. Cliquez sur Manage templates (Gérer les modèles) :

    Bouton Gérer les modèles

  6. Cliquez sur le nom du modèle que vous souhaitez modifier :

    Sélectionner un modèle à modifier

  7. Saisissez l'extrait de code suivant dans votre modèle à l'endroit où vous souhaitez que votre logo apparaisse : <img src="your-image-URL">

  8. Remplacez your-image-URL par l'URL de l'image que vous avez copiée. Selon l'emplacement désiré pour votre logo, vous devrez peut-être ajouter une balise <br/> pour insérer un saut de ligne avant ou après votre image.

Voici à quoi doit ressembler le code HTML :

Exemple de code HTML

Et voici ce que vous devez obtenir sur votre facture :

Exemple de modèle d'e-mail personnalisé

Exemple : définir la largeur des tableaux sur 100 %

Pour que vos tableaux aient des bordures et s'étendent à une largeur de 100 %, ajoutez une classe table-tabular à votre tableau :

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

Exemple : afficher des vignettes de produits

Pour inclure des vignettes des produits, insérez le code suivant dans votre modèle :

{{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}

Ajouter les détails de la commande

Il est possible d'ajouter des détails de la commande à vos modèles, tels que le nom, la quantité et le prix des articles achetés. Ajouter des détails de commande à vos modèles :

  1. Depuis votre interface administrateur Shopify, accédez àApplications.

  2. Cliquez sur Order Printer pour ouvrir l'application.

  3. Cliquez sur Manage templates (Gérer les modèles) :

    Bouton Gérer les modèles

  4. Cliquez sur le nom du modèle que vous souhaitez modifier :

    Sélectionner un modèle à modifier

  5. Utilisez des variables Liquid pour ajouter des détails de commande, et du code HTML pour le format. Par exemple, `` permet d'imprimer le prix de l'article.

  6. Quand vous avez terminé, cliquez sur Enregistrer.

Par exemple, Nyla souhaite modifier son modèle de bordereau d'emballage pour inclure une liste des articles à expédier. Elle ajoute le code suivant en bas de son modèle Packing slip dans l'application Order Printer :

<br>
<br>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Item</th>
      {% if show_line_item_taxes %}
      <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>

En conséquence, les bordereaux d'emballage de Nyla incluent désormais un tableau répertoriant les articles achetés :

Exemple de bordereau d'emballage

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement