Personnalisation de modèles à l’aide de Shopify Order Printer

Vous pouvez personnaliser vos modèles de plusieurs façons et créer vos propres modèles. L’application Shopify Order Printer prend en charge les modèles réalisés avec des variables HTML, CSS et Liquid. Avant de personnaliser vos modèles, familiarisez-vous avec les variables Liquid et les filtres de référence pour Shopify Order Printer pour toutes les personnalisations de modèles prises en charge.

Conseil

vous pouvez restaurer un modèle par défaut.

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

Ajouter votre logo à un modèle

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 :

Ajouter des images à un modèle

Vous pouvez ajouter des images à 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 <img src=”Image Source” />.
9. Remplacez Image Source dans le code par l’URL de votre image.
10. Cliquez sur Enregistrer.

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

Ajouter un code-barres à un modèle

Vous pouvez ajouter un code-barres à votre modèle

É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. Ajoutez le bloc de code <s-barcode value="a" /> à votre modèle.

7. Remplacez la valeur `` par la valeur de texte de votre code-barres.

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

9. Cliquez sur Enregistrer.

Ajouter un code QR à un modèle

Vous pouvez ajouter un code QR à votre modèle.

É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. Ajoutez le bloc de code <s-barcode type="qrcode" value="" /> à votre modèle.

7. Remplacez la valeur `` par le texte de votre code QR.

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

9. Cliquez sur Enregistrer.

Utilisation d’une police Google dans un modèle

Pour utiliser une police Google dans votre modèle, collez le code suivant à votre modèle, puis remplacez la variable FontName par le nom de votre police Google :

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=FontName">
<style>
  body {
    font-family: FontName, serif;
  }
</style>

Augmentation de la taille de la police

Pour augmenter la taille de la police de votre modèle, collez le code suivant dans votre modèle, puis augmentez ou réduisez la valeur du chiffre 14 :

<style>
  :root {
    --font-size: 14px;
  }
</style>

Pour augmenter la taille de police des titres dans votre modèle, collez le code suivant dans votre modèle, puis ajustez les valeurs à côté de l’en-tête :

<style>
  :root {
    --h1-font-size: 18px;
    --h2-font-size: 16px;
    --h3-font-size: 14px;
  }
</style>

Si vous avez importé vos modèles à partir de l’ancienne application Order Printer, vous pouvez augmenter la taille de votre police en utilisant le bloc de code suivant :

<style>
  :root {
    --legacy-font-size: 14px;
    --legacy-print-font-size: 18px;
  }
</style>