Création et personnalisation 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.

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

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

  2. À la page Applications et canaux de vente, 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.

Exemples de personnalisations de modèles

Examinez les exemples suivants d’utilisation pour apprendre à personnaliser les modèles Shopify Order Printer :

Vous pouvez ajouter votre logo à votre modèle.

Étapes :

  1. Depuis votre interface administrateur Shopify, allez à Contenu > Fichiers.
  2. Cliquez sur Importer des fichiers, puis sélectionnez le fichier image que vous souhaitez importer.
  3. Pour copier l’URL de l’image de votre logo, cliquez sur l’icône Lien.
  4. Cliquez sur Paramètres > Applications et canaux de vente.
  5. Cliquez sur Order Printer.
  6. Cliquez sur Modèles.
  7. Cliquez sur le nom du modèle que vous souhaitez modifier.
  8. Dans l’éditeur de code, collez le bloc de code suivant :

liquid <div style="text-align: center;"> <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE"> </div>

  1. Remplacez YOUR_IMAGE_URL_HERE dans le code par l’URL de votre image.
  2. Facultatif : pour aligner votre logo, modifiez la valeur text-align en left, right ou center.
  3. Facultatif : pour ajuster la largeur de votre logo, modifiez la valeur width par une valeur plus grande ou plus petite, telle que 8em ou 2em.
  4. Facultatif : pour afficher un aperçu de votre modèle, cliquez sur Aperçu.
  5. Cliquez sur Enregistrer.

Exemple :

Examinez l’exemple suivant qui montre la façon dont votre code HTML devrait s’afficher après avoir ajouté votre logo à votre modèle :

Un exemple de bloc de code permettant d’ajouter un logo à un modèle

Faire en sorte que la largeur des tableaux soit de 100 %

Vous pouvez ajouter des bordures à votre tableau et l’étendre à 100 % de sa largeur. Vous devez ajouter la classe table-tabular à votre tableau.

Étapes :

  1. Depuis votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.

  2. À la page Applications et canaux de vente, 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 l’éditeur de code, recherchez le tableau que vous souhaitez modifier, puis ajoutez la classe table-tabular à votre tableau.

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

  8. Cliquez sur Enregistrer.

Exemple :

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

Afficher des vignettes de produits

Vous pouvez ajouter des vignettes de produits à votre modèle de commande. Vous devez insérer un bloc de code personnalisé dans votre modèle.

Étapes :

  1. Depuis votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.

  2. À la page Applications et canaux de vente, 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. Ajoutez le bloc de code liquid {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} à votre modèle.

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

  8. Cliquez sur Enregistrer.

Ajouter les détails de la commande

Il est possible d’ajouter des détails de la commande à votre modèle, tels que le nom, la quantité et le prix des articles achetés.

Étapes :

  1. Depuis votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.

  2. À la page Applications et canaux de vente, 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 l’éditeur de code, utilisez des variables Liquid pour ajouter des détails de commande et du code HTML pour ajouter du formatage. Par exemple, l’utilisation de {{ line_item.price | money }} permet d’afficher le prix de l’article.

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

  8. Cliquez sur Enregistrer.

Exemple :

Nyla souhaite modifier son modèle de bordereau d’expédition pour inclure une liste des articles à expédier. Elle ajoute le code suivant en bas de son modèle Bordereau d’expédition dans l’application Shopify Order Printer. En conséquence, les bordereaux d’expédition de Nyla incluent désormais un tableau répertoriant les articles achetés.

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

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

Essayez gratuitement