Création et personnalisation des modèles de Shopify Order Printer

Vous pouvez personnaliser vos modèles de nombreuses façons et créer vos propres modèles. L’appli Shopify Order Printer prend en charge les modèles créés avec des variables HTML, CSS et Liquid. Avant de personnaliser vos modèles, veillez à vous familiariser avec 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.

Examinez les exemples suivants pour apprendre à personnaliser les modèles de Shopify Order Printer.

Sur cette page

Ajouter votre logo à un modèle

Vous pouvez ajouter votre logo à votre modèle.

Étapes :

Depuis votre interface administrateur Shopify, accédez à Contenu > Fichiers.
Cliquez sur Charger des fichiers, puis sélectionnez le fichier image que vous souhaitez charger.
Pour copier l’URL de l’image de votre logo, cliquez sur l’icône Lien.
Cliquez sur Paramètres > Applications.
Cliquez sur Order Printer.
Cliquez sur Modèles.
Cliquez sur le nom du modèle que vous souhaitez modifier.
Dans l’éditeur de code, collez le bloc de code suivant :

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

Remplacez YOUR_IMAGE_URL_HERE dans le code par l’URL de votre image.
Facultatif : pour aligner votre logo, remplacez la valeur text-align par left, right ou center.
Facultatif : pour ajuster la largeur de votre logo, remplacez la valeur width par une valeur supérieure ou inférieure, telle que 8em ou 2em.
Facultatif : pour obtenir un aperçu de votre modèle, cliquez sur Aperçu.
Cliquez sur Enregistrer.

Exemple :

Examinez l’exemple suivant pour voir comment votre code HTML doit s’afficher après avoir ajouté votre logo à votre modèle :

Ajout d’images à un modèle

Vous pouvez ajouter des images à votre modèle.

Étapes :

Depuis votre interface administrateur Shopify, accédez à Contenu > Fichiers.
Cliquez sur Charger des fichiers, puis sélectionnez le fichier image que vous souhaitez charger.
Pour copier l’URL de votre image, cliquez sur l’icône Lien.
Cliquez sur Paramètres > Applications.
Cliquez sur Order Printer.
Cliquez sur Modèles.
Cliquez sur le nom du modèle que vous souhaitez modifier.
Dans l’éditeur de code, collez le bloc de code <img src=”Image Source” />.
Remplacez Image Source dans le code par l’URL de votre image.
Cliquez sur Enregistrer.

Définition de la largeur des tableaux à 100 %

Vous pouvez ajouter des bordures à votre tableau et l’étirer pour qu’il occupe 100 % de la largeur. Vous devez ajouter la classe table-tabular à votre tableau.

É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 l’éditeur de code, recherchez le tableau que vous souhaitez modifier, puis ajoutez la classe table-tabular à votre tableau.
Facultatif : pour obtenir un aperçu de votre modèle, cliquez sur Aperçu.
Cliquez sur Enregistrer.

Exemple :

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

Affichage des vignettes de produit

Vous pouvez ajouter des vignettes de produit à votre modèle de commande. Pour ce faire, vous devez insérer un bloc de code personnalisé dans votre modèle.

Étapes :

Depuis votre interface administrateur Shopify, accédez à Applications > Order Printer.
Cliquez sur Modèles.
Cliquez sur le modèle que vous souhaitez modifier.
Ajoutez le bloc de code {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} à votre modèle.
Facultatif : pour obtenir un aperçu de votre modèle, cliquez sur Aperçu.
Cliquez sur Enregistrer.

Ajout des détails de la commande

Vous pouvez ajouter des détails sur la commande à votre modèle, tels que le nom, la quantité et le prix des articles achetés.

É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 l’éditeur de code, utilisez les variables Liquid pour ajouter les détails de la commande et le HTML pour ajouter une mise en forme. Par exemple, l’utilisation de {{ line_item.price | money }} affiche le prix de l’article.
Facultatif : pour obtenir un aperçu de votre modèle, cliquez sur Aperçu.
Cliquez sur Enregistrer.

Exemple :

Nyla souhaite modifier son modèle de bordereau d’expédition pour y inclure une liste des articles expédiés. Elle ajoute le code suivant au bas de son modèle de bordereau d’expédition dans l’application Shopify Order Printer. Ses bordereaux d’expédition incluent désormais un tableau qui répertorie les articles achetés.

<br>
<br>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th scope="col">Quantity</th>
      <th scope="col">Item</th>
      {% if tax_lines.size > 0 %}
      <th scope="col">Taxes</th>
      {% endif %}
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
        <td scope="row">{{ 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>

Ajout d’un code-barres à un modèle

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

Étapes :

Depuis votre interface administrateur Shopify, accédez à Applications > Order Printer.
Cliquez sur Modèles.
Cliquez sur le modèle que vous souhaitez modifier.
Ajoutez le bloc de code <s-barcode value="a" /> à votre modèle.
Remplacez la valeur `` par la valeur textuelle de votre code-barres.
Facultatif : pour obtenir un aperçu de votre modèle, cliquez sur Aperçu.
Cliquez sur Enregistrer.

Ajout d’un code QR à un modèle

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

Étapes :

Depuis votre interface administrateur Shopify, accédez à Applications > Order Printer.
Cliquez sur Modèles.
Cliquez sur le modèle que vous souhaitez modifier.
Ajoutez le bloc de code <s-barcode type="qrcode" value="" /> à votre modèle.
Remplacez la valeur `` par la valeur textuelle de votre code QR.
Facultatif : pour obtenir un aperçu de votre modèle, cliquez sur Aperçu.
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 dans 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 dans votre modèle, collez le code suivant dans votre modèle, puis remplacez le nombre 14 par une valeur supérieure ou inférieure :

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

Pour augmenter la taille de la police de vos titres dans votre modèle, collez le code suivant dans votre modèle, puis ajustez les valeurs à côté du titre :

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

Si vous avez importé vos modèles depuis 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>