> ## Documentation Index
> Fetch the complete documentation index at: https://foliant-help.iforiti.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Modifier le code d'un modèle

> Modifiez le Liquid, le HTML et le CSS d'un modèle dans l'éditeur de code, insérez des champs de commande, utilisez la référence des variables et corrigez les erreurs de code.

L'éditeur de code vous donne un contrôle total sur un modèle. Les modèles sont écrits en HTML et CSS avec Liquid, le langage de modèles utilisé par Shopify : `{{ order_name }}` affiche le nom de la commande, `{% for line_item in line_items %}` se répète pour chaque article. Les variables de commande de Foliant suivent celles de Shopify Order Printer : les modèles écrits pour cette application fonctionnent donc en général tels quels. L'éditeur de code est disponible avec tous les forfaits.

## Ouvrir l'éditeur de code

Ouvrez le modèle dans l'éditeur et cliquez sur l'onglet **Code**. Les modèles en code s'y ouvrent directement. Pour un modèle visuel, vous voyez d'abord le code compilé ; cliquez sur **Modifier le code** pour le changer. Consultez [Passer du mode Visuel au mode Code](https://foliant-help.iforiti.com/fr/template-editor/visual-and-code-modes.md).

Le volet de gauche comporte trois onglets :

| Onglet | Contenu |
| - | - |
| **Code** | Le code du modèle, avec coloration syntaxique. La ligne et la colonne actuelles s'affichent en bas. |
| **Variables Liquid** | Les variables et les filtres que vous pouvez utiliser, regroupés (variables générales, détails des articles, détails du client…), avec **Rechercher dans la référence**. |
| **Métachamps** | Comment imprimer les métachamps de commande, de client, de produit et de variante. Consultez [Métachamps dans les modèles](https://foliant-help.iforiti.com/fr/template-editor/metafields.md). |

Le volet de droite affiche l'aperçu en direct. Il se met à jour peu après que vous arrêtez de saisir.

## Insérer un champ

1. Placez le curseur à l'endroit où le champ doit apparaître.
2. Cliquez sur **Insérer un champ**.
3. Recherchez le champ (par exemple « suivi » ou « SKU ») dans **Rechercher des champs**, puis cliquez dessus.

Foliant insère son code Liquid à l'emplacement du curseur, par exemple `{{ shipping_address.city }}`. Les champs d'article, comme `{{ line_item.sku }}`, ne fonctionnent qu'à l'intérieur de la boucle des articles : insérez **Articles de la ligne** pour ajouter la boucle elle-même.

## Rechercher dans le code

Cliquez sur le bouton de recherche à côté de **Insérer un champ** (ou appuyez sur ⌘F / Ctrl+F dans le code) pour trouver du texte dans le modèle.

## Erreurs de code

L'éditeur vérifie votre code pendant que vous saisissez et signale les problèmes dans la marge :

* Les **erreurs** vous empêchent d'enregistrer et mettent l'aperçu en pause. Un `{{` ou un `{%` non fermé est une erreur. Elles sont listées dans un bandeau **Erreurs de Code** au-dessus de l'éditeur, chacune avec **Aller à la ligne**.
* Les **avertissements** signalent ce qui pourrait être incorrect, mais ne vous empêchent pas d'enregistrer : par exemple un filtre, une balise ou un objet Liquid inconnu, une balise HTML ou une propriété CSS inconnue, ou une balise HTML non fermée.

Lorsque vous enregistrez, Foliant vérifie aussi le modèle : le Liquid doit être lisible, les balises HTML doivent être équilibrées et le SVG intégré ne peut contenir que des éléments de dessin. En cas de problème, l'enregistrement échoue et un bandeau **Échec de la mise à jour** liste jusqu'à cinq problèmes, avec leur numéro de ligne quand il est connu.

Si le modèle est enregistré mais que l'aperçu ne peut pas être généré, un bandeau affiche le message de Liquid et la ligne, quand elle est connue.

## Écrire de bons modèles

* Les montants sont exprimés en centimes : affichez-les toujours avec un filtre monétaire, comme `{{ total_price | money }}`. Consultez [Montants et devises dans les modèles](https://foliant-help.iforiti.com/fr/template-editor/liquid-money-and-currency.md).
* Utilisez `| escape` sur le texte saisi par les clients, comme les notes et les adresses : `{{ note | escape }}`.
* Utilisez `{{ 'subtotal' | t }}` pour les textes qui suivent la langue du document. Consultez [Dates, langues et traductions](https://foliant-help.iforiti.com/fr/template-editor/liquid-dates-and-languages.md).
* Utilisez les snippets intégrés de Foliant pour la TVA : `{% include 'vat_breakdown' %}` affiche le tableau de ventilation de la TVA, et `{% include 'legal_notes' %}` les mentions légales (autoliquidation, export, IOSS…).

## Bon à savoir

* Si un modèle numéroté (facture, avoir ou devis) n'affiche `document_number` nulle part, Foliant ajoute une petite ligne avec le numéro à la fin du document. Consultez [Numéros de document dans les modèles](https://foliant-help.iforiti.com/fr/template-editor/liquid-document-numbers.md).
* Les numéros de page et la répétition des en-têtes de tableau pour les modèles en code se trouvent sur la page des paramètres du modèle, sous **Mise en page**.
* Pour récupérer un modèle depuis Shopify Order Printer ou Order Printer Pro, utilisez **Importer un modèle** sur la page Modèles. Consultez [Importer un modèle depuis Order Printer](https://foliant-help.iforiti.com/fr/templates/import-from-order-printer.md).

## Articles associés

* [L'objet commande et les variables courantes](https://foliant-help.iforiti.com/fr/template-editor/liquid-order-variables.md)
* [Filtres Liquid](https://foliant-help.iforiti.com/fr/template-editor/liquid-filters.md)
* [Passer du mode Visuel au mode Code](https://foliant-help.iforiti.com/fr/template-editor/visual-and-code-modes.md)
* [Aperçu, format de papier et zoom](https://foliant-help.iforiti.com/fr/template-editor/preview-paper-and-zoom.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.