Personnalisation des bordereaux d’expédition

Vous pouvez personnaliser le modèle de vos bordereaux d’expédition. La modification du modèle vous permet d’ajouter votre propre identité de marque et de changer l’aspect et la convivialité du bordereau d’expédition.

Sur cette page

Modifier l’adresse de la boutique

Si vous souhaitez modifier ou changer l’adresse de votre boutique, vous pouvez aller dans Paramètres > Général et modifier les informations de votre boutique.

Si vous ne souhaitez modifier que l’adresse sur vos bordereaux d’expédition, suivez les étapes ci-dessous.

Étapes :

Depuis votre interface administrateur Shopify, allez à Paramètres > Expédition et livraison.
Dans la section Documents, cliquez sur Modèle de bon de livraison.
Recherchez la variable Liquid {{ shop_address.summary }} qui fait référence à l’adresse de votre boutique. Si vous ne trouvez pas cette variable, essayez la suivante :

{{ shop_address.address1 }}, {{ shop_address.city }}, {{ shop_address.province_code }}, {{ shop_address.zip }}, {{ shop_address.country }}

Surlignez ce code et supprimez-le.
Saisissez l’adresse que vous souhaitez voir figurer sur vos bordereaux d’expédition dans cet espace vide. Par exemple, vous pouvez saisir votre adresse comme ceci : 123 Example Street, New York, NY, 10000, États-Unis
Cliquez sur Aperçu du modèle pour voir vos modifications.
Cliquez sur Enregistrer.

Supprimer les images de produit

Vous pouvez supprimer les images de vos produits qui s’affichent à côté des titres de produits sur vos bordereaux d’expédition.

Étapes :

Depuis votre interface administrateur Shopify, allez à Paramètres > Expédition et livraison.
Dans la section Documents, cliquez sur Modèle de bon de livraison.
Recherchez les variables Liquid suivantes qui font référence à vos images de produit :

{% if line_item.image != blank %}
       <div class="flex-line-item-img">
         <div class="aspect-ratio aspect-ratio-square" style="width: {{ desired_image_size }}px; height: {{ desired_image_size }}px;">
           {{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}
         </div>
       </div>
       {% endif %}

Surlignez ce code et supprimez-le.
Cliquez sur Aperçu du modèle pour voir un aperçu de vos modifications.
Cliquez sur Enregistrer.

Modifier le logo

Avant d’ajouter le logo de votre boutique à vos bordereaux d’expédition, vous devez charger votre logo dans votre interface administrateur Shopify. Après le chargement, notez le nom du fichier chargé afin de l’utiliser plus tard dans le modèle de bordereau d’expédition.

Une fois que vous avez chargé votre logo dans votre boutique, vous pouvez ajouter votre logo et supprimer le nom de votre boutique, ajouter votre logo au-dessus du nom de votre boutique ou ajouter votre logo à côté du nom de votre boutique.

Étapes :

Depuis votre interface administrateur Shopify, allez à Contenu > Fichiers.
Cliquez sur Charger des fichiers.
Sélectionnez et chargez le logo de votre boutique depuis votre appareil.
Notez le nom du fichier une fois le chargement terminé, y compris l’extension de fichier (par exemple, .png ou .jpg).

Ajouter un logo et supprimer le nom de la boutique

Vous pouvez supprimer le nom de votre boutique et le remplacer par le logo de votre boutique en haut de vos bordereaux d’expédition.

Étapes :

Depuis votre interface administrateur Shopify, allez à Paramètres > Expédition et livraison.
Dans la section Documents, cliquez sur Modèle de bon de livraison.
Recherchez le code suivant qui fait référence au nom de votre boutique :

<p class="to-uppercase">
  {{ shop.name }}
</p>

Surlignez ce code et supprimez-le.
Dans l’espace que vous avez créé, écrivez le code suivant en utilisant le nom du fichier chargé précédemment :

{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}

Le filtre file_img_url génère l’URL du fichier chargé avec la taille spécifiée, et le filtre img_tag crée une balise d’image HTML avec le texte alternatif que vous fournissez.

Par exemple, si le fichier chargé est shop_logo.png, le code Liquid correspondant sera :

{{ 'shop_logo.png' | file_img_url: 'small' | img_tag: 'Logo' }}

Sélectionnez Aperçu du modèle pour voir un aperçu de vos modifications.
Cliquez sur Enregistrer.

Ajouter un logo au-dessus du nom de la boutique

Si vous souhaitez ajouter votre logo au-dessus du nom de votre boutique en haut de vos bordereaux d’expédition, suivez les étapes ci-dessous.

Étapes :

Depuis votre interface administrateur Shopify, allez à Paramètres > Expédition et livraison.
Dans la section Documents, cliquez sur Modèle de bon de livraison.
Recherchez la variable Liquid suivante qui fait référence au nom de votre boutique, et ajoutez un saut de ligne entre les deux lignes :

<div class="shop-title">
      |
      <p class="to-uppercase">

Dans l’espace que vous avez créé, écrivez le code suivant en utilisant le nom du fichier que vous avez chargé précédemment (par exemple, shop_logo.png) :

{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}
<br>

Sélectionnez Aperçu du modèle pour voir un aperçu de vos modifications.
Cliquez sur Enregistrer.

Ajouter un logo à côté du nom de la boutique

Si vous souhaitez ajouter votre logo à côté du nom de votre boutique en haut de vos bordereaux d’expédition, suivez les étapes ci-dessous.

Étapes :

Depuis votre interface administrateur Shopify, allez à Paramètres > Expédition et livraison.
Dans la section Documents, cliquez sur Modèle de bon de livraison.
Recherchez la variable Liquid suivante qui fait référence au nom de votre boutique :

<p class="to-uppercase">
{{ shop.name }}
</p>

Surlignez ce code et supprimez-le.
Dans l’espace que vous avez créé, écrivez le code suivant en utilisant le nom du fichier que vous avez chargé précédemment (par exemple, shop_logo.png) :

{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}
<span class="to-uppercase">
  {{ shop.name }}
</span>

Recherchez les variables Liquid suivantes :

.shop-title {
  -webkit-box-flex: 6;
  -webkit-flex: 6;
  flex: 6;
  font-size: 1.9em;
}

Ajoutez une nouvelle ligne à la fin des variables ci-dessus et collez le code suivant :

.shop-title img {
 vertical-align: middle;
}

.shop-title span {
 vertical-align: middle;
}

Sélectionnez Aperçu du modèle pour voir un aperçu de vos modifications.
Cliquez sur Enregistrer.

Mettre en forme les bordereaux d’expédition avec CSS

Vous pouvez personnaliser votre bordereau d’expédition en utilisant les fichiers CSS que vous chargez sur Shopify. Les fichiers CSS hébergés en dehors de Shopify ne seront pas correctement restitués.

Étapes :

Depuis votre interface administrateur Shopify, allez à Contenu > Fichiers.
Cliquez sur Charger des fichiers.
Sélectionnez et chargez votre fichier CSS.
Copiez l’URL du fichier lorsque le chargement est terminé.
Incluez le code suivant :

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.shopify.com/path_to_file/styles.css"
>