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

# Editar o código de um modelo

> Edite o Liquid, o HTML e o CSS de um modelo no editor de código, insira campos do pedido, use a referência de variáveis e corrija erros de código.

O editor de código dá a você controle total sobre um modelo. Os modelos são HTML e CSS com Liquid, a mesma linguagem de modelos que o Shopify usa: `{{ order_name }}` imprime o nome do pedido, `{% for line_item in line_items %}` se repete para cada item. As variáveis de pedido do Foliant seguem as do Order Printer do Shopify, então os modelos escritos para ele funcionam, na maioria dos casos, sem alterações. O editor de código está disponível em todos os planos.

## Abrir o editor de código

Abra o modelo no editor e clique na aba **Código**. Os modelos de código abrem diretamente nela. Em um modelo visual, você vê primeiro o código compilado; clique em **Editar código** para alterá-lo. Consulte [Alternar entre Visual e Código](https://foliant-help.iforiti.com/pt-BR/template-editor/visual-and-code-modes.md).

O painel esquerdo tem três abas:

| Aba | O que mostra |
| - | - |
| **Código** | O código do modelo, com destaque de sintaxe. A linha e a coluna atuais aparecem na parte inferior. |
| **Variáveis Liquid** | As variáveis e os filtros que você pode usar, agrupados (Variáveis gerais, Detalhes do item de linha, Detalhes do cliente…), com **Pesquisar na referência**. |
| **Metacampos** | Como imprimir metacampos de pedidos, clientes, produtos e variantes. Consulte [Metacampos nos modelos](https://foliant-help.iforiti.com/pt-BR/template-editor/metafields.md). |

O painel direito é a pré-visualização ao vivo. Ela é atualizada logo depois que você para de digitar.

## Inserir um campo

1. Coloque o cursor onde o campo deve ficar.
2. Clique em **Inserir campo**.
3. Procure o campo (por exemplo, "tracking" ou "SKU") em **Pesquisar campos** e clique nele.

O Foliant insere o Liquid correspondente no cursor, por exemplo `{{ shipping_address.city }}`. Os campos de item de linha, como `{{ line_item.sku }}`, só funcionam dentro do loop de itens de linha: insira **Itens de linha** para adicionar o próprio loop.

## Pesquisar no código

Clique no botão de pesquisa ao lado de **Inserir campo** (ou pressione ⌘F / Ctrl+F no código) para encontrar um texto no modelo.

## Erros de código

O editor verifica o seu código enquanto você digita e marca os problemas na margem:

* **Erros** impedem que você salve e pausam a pré-visualização. Um `{{` ou `{%` não fechado é um erro. Eles aparecem em um banner **Erros de Código** acima do editor, cada um com **Ir para a linha**.
* **Avisos** indicam coisas que podem estar erradas, mas não impedem que você salve, por exemplo um filtro, tag ou objeto Liquid desconhecido, uma tag HTML ou propriedade CSS desconhecida, ou uma tag HTML não fechada.

Quando você salva, o Foliant também verifica o modelo: o Liquid precisa ser legível, as tags HTML precisam estar balanceadas, e o SVG inline só pode conter elementos de desenho. Se algo estiver errado, o salvamento falha e um banner **Falha ao atualizar** lista até cinco problemas, com os números das linhas quando conhecidos.

Se o modelo for salvo, mas a pré-visualização não puder ser gerada, um banner mostra a mensagem do Liquid e a linha, quando ela é conhecida.

## Escrever bons modelos

* Os valores monetários estão em centavos: sempre imprima-os com um filtro de dinheiro, como `{{ total_price | money }}`. Consulte [Dinheiro e moeda nos modelos](https://foliant-help.iforiti.com/pt-BR/template-editor/liquid-money-and-currency.md).
* Use `| escape` em textos digitados pelos clientes, como observações e endereços: `{{ note | escape }}`.
* Use `{{ 'subtotal' | t }}` para textos que acompanham o idioma do documento. Consulte [Datas, idiomas e traduções](https://foliant-help.iforiti.com/pt-BR/template-editor/liquid-dates-and-languages.md).
* Use os snippets integrados do Foliant para o IVA: `{% include 'vat_breakdown' %}` imprime a tabela de detalhamento do IVA, e `{% include 'legal_notes' %}` as notas legais (autoliquidação, exportação, IOSS…).

## Bom saber

* Se um modelo numerado (fatura, nota de crédito ou orçamento) não imprimir `document_number` em nenhum lugar, o Foliant adiciona uma pequena linha com o número no final do documento. Consulte [Números de documento nos modelos](https://foliant-help.iforiti.com/pt-BR/template-editor/liquid-document-numbers.md).
* Os números de página e os cabeçalhos de tabela repetidos dos modelos de código ficam na página de configurações do modelo, em **Layout da página**.
* Para trazer um modelo do Order Printer ou do Order Printer Pro do Shopify, use **Importar um modelo** na página Modelos. Consulte [Importar um modelo do Order Printer](https://foliant-help.iforiti.com/pt-BR/templates/import-from-order-printer.md).

## Artigos relacionados

* [O objeto do pedido e as variáveis comuns](https://foliant-help.iforiti.com/pt-BR/template-editor/liquid-order-variables.md)
* [Filtros Liquid](https://foliant-help.iforiti.com/pt-BR/template-editor/liquid-filters.md)
* [Alternar entre Visual e Código](https://foliant-help.iforiti.com/pt-BR/template-editor/visual-and-code-modes.md)
* [Pré-visualização, tamanho do papel e zoom](https://foliant-help.iforiti.com/pt-BR/template-editor/preview-paper-and-zoom.md)


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