Editor de código de comprovante impresso

Observação

Este recurso está disponível apenas para lojistas que usam o Shopify PDV Pro.

Personalize os comprovantes impressos usando o editor de código no admin da Shopify. Com o editor de código, você pode criar personalizações mais avançadas usando HTML, CSS e Liquid do que com o editor visual.

Você pode mudar o modelo de comprovante e os modelos de seção usados em seus comprovantes impressos. Os arquivos de modelo de comprovantes são os tipos de comprovantes que você pode imprimir na loja. As seções são partes dos comprovantes, como o cabeçalho ou o rodapé, e podem ser reutilizadas em vários comprovantes.

Considerações para usar o editor de código do comprovante

Antes de usar o editor de código de comprovante, revise as seguintes considerações:

• Use o editor de código somente no admin da Shopify no desktop.
• As alterações de código aplicadas a todos os locais do PDV Pro. No entanto, é possível adicionar condições para exibir personalizações de locais específicos. Saiba como usar tags de controle de fluxo com o Liquid.
• Ao mudar para o editor de código, não é possível fazer nenhuma personalização no modelo de comprovante no app Shopify PDV. Você ainda pode ajustar as Opções de impressão no app Shopify PDV de locais com o plano de assinatura PDV Pro.
• As personalizações no editor de código se aplicam apenas aos locais do PDV Pro. Se você usar o editor de código e tiver locais do PDV Lite, poderá usar o editor visual para personalizar o cabeçalho e o rodapé de seus locais do Lite.
• Os arquivos que compõem os comprovantes incluem o Liquid, a linguagem do modelo da Shopify. Saiba mais sobre como usar o Liquid.
• Para editar os modelos no editor de código de comprovante, você precisa conhecer HTML, CSS e Liquid. O Atendimento para Temas da Shopify pode ajudar em pequenos ajustes no escopo da Política de design da Shopify.
• Alguns tipos de comprovantes impressos não podem ser personalizados.
• O editor de código não está disponível para nenhum local na Itália.

Considerações sobre incompatibilidade com tipos de comprovantes

Alguns tipos de comprovantes impressos que não têm um modelo no editor de código não podem ser personalizados nesse editor.

É possível personalizar os seguintes tipos de comprovantes impressos:

• Comprovantes de vendas
• Comprovantes de cartão-presente
• comprovantes de presente

Não é possível personalizar os seguintes comprovantes:

• comprovantes de devolução
• comprovantes de troca

Além disso, nenhum tipo de comprovante em locais na Itália está qualificado para personalização.

Acessar o editor de código

Você pode editar seus modelos usando o editor de código.

Etapas:

1. No admin da Shopify, clique em Configurações > Apps e canais de vendas.
2. Na página Apps e canais de vendas, clique em Point of sale.

3. Clique em Abrir canal de vendas.

4. Clique em Configurações > Personalização de comprovantes.

5. Clique em Personalizar comprovantes.

6. Clique em ... > Editar código.

7. Na caixa de diálogo Editar código, clique em Editar código.

Usar arquivos personalizados no modelo de comprovante

Use os arquivos carregados para personalizar os comprovantes. Se você tem imagens personalizadas que deseja imprimir nos comprovantes, faça upload delas no admin da Shopify e use-as nos comprovantes personalizados. Saiba mais sobre uploads de arquivos.

Etapas:

1. No admin da Shopify, clique em Configurações > Apps e canais de vendas.
2. Na página Apps e canais de vendas, clique em Point of sale.

3. Clique em Abrir canal de vendas.

4. Clique em Configurações > Personalização de comprovantes.

5. Clique em Personalizar comprovantes.

6. Clique na página Conteúdo.

7. Copie o link ao lado do arquivo que você deseja usar no modelo de comprovante.

8. Inclua o link em seu modelo.

Restaurar o modelo de comprovante para o padrão

Você pode restaurar um modelo de comprovante para a versão-padrão usando o editor de código.

Etapas:

1. No admin da Shopify, clique em Configurações > Apps e canais de vendas.
2. Na página Apps e canais de vendas, clique em Point of sale.

3. Clique em Abrir canal de vendas.

4. Clique em Configurações > Personalização de comprovantes.

5. Clique no modelo que você quer restaurar.

6. Clique no ícone de restauração.

7. Na janela modal Restaurar o arquivo ao padrão, clique em Redefinir para confirmar.

Variáveis do Liquid disponíveis no editor de código de comprovantes

Utilize o Liquid para personalizar o modelo de comprovante impresso e os tipos de comprovantes.

Os seguintes objetos de dados estão disponíveis no editor de código de comprovantes:

Descrição dos objetos de dados do comprovante

Objeto	Descrição
shop	Contém as informações da loja, como o nome.
location	Contém as informações da loja física, como endereço e número de telefone.
order	Contém os dados do pedido, incluindo os itens de linha, os descontos, os tributos e as informações de transação.
gift_card	Disponível apenas no modelo gift_card.liquid. Contém os dados do cartão-presente, incluindo o saldo, o código alfanumérico e o conteúdo de um código QR que pode ser lido pelo app de PDV.

Filtros do Liquid disponíveis no editor de código do comprovante

Use os filtros do Liquid para fazer ajustes nas informações dos modelos de comprovante. Por exemplo, você pode alterar a formatação da moeda ou a capitalização de um texto específico, como um código de tributo.

Para aplicar um filtro, adicione uma barra vertical | e, em seguida, o filtro dentro do bloco de código do Liquid entre colchetes duplos {{ }}. Vale lembrar que os filtros só podem ser aplicados a blocos de código do Liquid.

No exemplo a seguir, o filtro ajusta o código de tributo de letras minúsculas para maiúsculas.

{{ tax_line.title | upcase }}

No bloco de código de exemplo, product é o objeto, title é sua propriedade e upcase é o filtro aplicado. O filtro upcase altera a capitalização do valor de tax_line.title para maiúscula. Por exemplo, se tax_line.title tiver o valor Hst, o filtro upcase mudará o valor para HST.

Consulte a seção Filtros na referência do Liquid para temas da Shopify se quiser saber mais sobre como usar os filtros do Liquid.

Os seguintes filtros estão disponíveis no editor de código de comprovantes:

Descrição dos filtros de comprovante

Propriedade	Descrição
t	Traduz etiquetas predefinidas para o idioma atribuído à sua localização.
money	Formata o preço na moeda do seu local.
escape	Faz o escape de caracteres especiais em HTML, como <>, ' e &, e converte caracteres em sequências de escape.
barcode	Gera um SVG do código de barras em 1D.
qrcode	Gera um SVG de código de barras em 2D.

Exemplo de uma personalização do código de modelo de comprovante impresso

Utilize o Liquid para adicionar mensagens condicionais. Essa funcionalidade é semelhante a salvar em um único local com o editor visual. Por exemplo, sua empresa começou com um único local, mas agora você tem vários novos locais e deseja destacar sua loja original nos comprovantes impressos.

Para isso, adicione uma mensagem personalizada ao modelo header.liquid na pasta Seções do editor de código e use o Liquid para exibir a mensagem somente no local da loja principal.

O código a seguir verifica o nome do local, neste caso, seu local original chamado "Início", e exibe a mensagem "Receba as boas-vindas à nossa loja original, aberta em 1972." caso o local corresponda ao nome. Já os comprovantes impressos de outros locais exibem a mensagem "Receba as boas-vindas à nossa loja". .

{% if location.name == 'Home' %}
  Welcome to our original store, opened in 1972.
{% else %}
  Welcome to our store.
{% end %}