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

Développer votre entreprise

les factures et les bordereaux d'emballage ne sont que les éléments de base. L'ajout à vos commandes d'autres éléments d'emballage, tels que des échantillons ou des coupons, est un bon moyen d'intéresser vos clients.

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. Dans votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.

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

3. Cliquez sur Gérer les modèles.

4. Cliquez sur 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. Dans votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.

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

3. Cliquez sur Gérer les modèles.

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

5. Apportez vos changements au modèle en ajoutant ou en modifiant le code HTML, CSS ou Liquid dans le champ Code. Pour prévisualiser 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

Les exemples suivants illustrent 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

Remarque

Les personnalisations suivantes nécessitent une connaissance élémentaire du langage HTML.

Bureau

1. Depuis votre interface administrateur Shopify, allez à Contenu > Fichiers.
2. Cliquez sur Mettre en ligne les fichiers et sélectionnez le fichier de l’image sur votre ordinateur.
3. Sur la page Fichiers, recherchez le fichier téléchargé et cliquez sur Copier l’URL.
4. Depuis votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.
5. Cliquez sur Order Printer pour ouvrir l'application.
6. Cliquez sur Gérer les modèles.
7. Cliquez sur le nom du modèle que vous souhaitez modifier.
8. Saisissez l'extrait de code suivant dans votre modèle à l'endroit où vous souhaitez que votre logo apparaisse : <img src="your-image-URL">
9. 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.

iPhone

1. Depuis l’application Shopify, appuyez sur le bouton …, puis sur Paramètres.
2. Dans la section Paramètres de la boutique, appuyez sur Fichiers.
3. Cliquez sur Mettre en ligne les fichiers et sélectionnez le fichier de l’image sur votre ordinateur.
4. Sur la page Fichiers, recherchez le fichier téléchargé et cliquez sur Copier l’URL.
5. Depuis votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.
6. Cliquez sur Order Printer pour ouvrir l'application.
7. Cliquez sur Gérer les modèles.
8. Cliquez sur le nom du modèle que vous souhaitez modifier.
9. Saisissez l'extrait de code suivant dans votre modèle à l'endroit où vous souhaitez que votre logo apparaisse : <img src="your-image-URL">
10. 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.

Android

1. Depuis l’application Shopify, appuyez sur le bouton …, puis sur Paramètres.
2. Dans la section Paramètres de la boutique, appuyez sur Fichiers.
3. Cliquez sur Mettre en ligne les fichiers et sélectionnez le fichier de l’image sur votre ordinateur.
4. Sur la page Fichiers, recherchez le fichier téléchargé et cliquez sur Copier l’URL.
5. Depuis votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.
6. Cliquez sur Order Printer pour ouvrir l'application.
7. Cliquez sur Gérer les modèles.
8. Cliquez sur le nom du modèle que vous souhaitez modifier.
9. Saisissez l'extrait de code suivant dans votre modèle à l'endroit où vous souhaitez que votre logo apparaisse : <img src="your-image-URL">
10. 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 : 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 : affichez 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

Remarque

Les personnalisations suivantes nécessitent une connaissance de base du HTML et de Liquid.

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. Dans votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.

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

3. Cliquez sur Gérer les modèles.

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

5. Utilisez des variables Liquid pour ajouter des détails de commande, et du code HTML pour le format. Par exemple, {{ line_item.price | money }} 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 tax_lines.size > 0 %}
      <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.