Editor de código de comprovante impresso do Shopify POS

É possível personalizar os comprovantes impressos com o editor de código no admin da Shopify. Os arquivos que compõem os comprovantes contêm Liquid, a linguagem de modelos da Shopify. Com o editor de código, é possível criar personalizações mais avançadas usando HTML, CSS e Liquid do que com o editor visual.

É possível alterar o modelo de comprovante e os modelos de seção usados nos comprovantes impressos. Os arquivos de modelo de Comprovantes são os tipos de comprovantes que podem ser impressos na loja. As Seções são partes dos comprovantes, como o cabeçalho ou o rodapé. As seções podem ser reutilizadas por vários comprovantes.

Considerações sobre o uso do editor de código do comprovante

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

Restrições de acesso

• O editor de código só pode ser usado no admin da Shopify no desktop.
• O editor de código não está disponível para locais de POS na Itália.

Onde as alterações são aplicadas

• As alterações de código que você faz se aplicam apenas ao local selecionado.
• As personalizações no editor de código são aplicadas somente a locais com POS Pro. Se você usa o editor de código e tem locais sem o POS Pro, é possível usar o editor visual para personalizar o cabeçalho e o rodapé desses locais.
• É possível personalizar comprovantes impressos que têm um modelo no editor de código, como comprovantes de venda, comprovantes de presente, comprovantes de cartão-presente e comprovantes de devolução e troca.

Linguagens de código

• Os arquivos que compõem os comprovantes contêm Liquid, a linguagem de modelos da Shopify. Saiba mais sobre o uso do Liquid.
• Para editar os modelos no editor de código do comprovante, você precisa ter familiaridade com HTML, CSS e Liquid. O Atendimento ao cliente para temas da Shopify pode ajudar com pequenos ajustes dentro do escopo da Política de design da Shopify.

Limitações de personalização

• Não é possível pré-visualizar comprovantes em tamanhos de impressora diferentes no editor de código. Para conferir uma pré-visualização por tamanho de impressora, use o editor visual.
• As descrições de produtos não estão disponíveis como variável nos modelos de comprovante e não podem ser adicionadas a comprovantes impressos.

Manutenção de modelos

• Se você personalizar um comprovante com o editor de código, poderá haver propriedades novas, como selling_plan_name, ausentes no seu modelo atual. Para adicionar as propriedades mais recentes disponíveis ao modelo, é preciso redefinir o modelo de comprovante para o padrão. A redefinição dos modelos de comprovante para o padrão remove qualquer personalização que você tenha feito neles. Anote seu código personalizado antes de redefinir. Após redefinir o modelo, será preciso reaplicar suas personalizações manualmente.

Acessar o editor de código

É possível editar os modelos com o editor de código. Primeiro, é preciso mudar para o editor de código em vez do editor visual padrão, e é possível voltar para o editor visual a qualquer momento.

As etapas para alternar entre os editores diferem um pouco dependendo se todos ou apenas alguns dos locais de POS estão qualificados para o editor de código, por exemplo, alguns dos locais de POS não usam o POS Pro ou estão localizados na Itália ou na França.

Etapas:

Usar arquivos personalizados no modelo de comprovante

É possível usar arquivos, como recursos de imagem, carregados no admin da Shopify para personalizar os comprovantes impressos.

É preciso fazer upload de um arquivo para o admin da Shopify para que ele possa ser usado em um comprovante impresso. Saiba mais sobre uploads de arquivos.

Etapas:

1. No admin da Shopify, acesse Conteúdo > Arquivos.

2. Ao lado do arquivo que você quer incluir no código do comprovante impresso, clique em para copiar o link.

3. Navegar até o editor de código.

4. Inclua o link do recurso no modelo.

Redefinir o modelo de comprovante para o padrão

É possível redefinir um modelo de comprovante para a versão-padrão com o editor de código.

Etapas:

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

É possível usar o Liquid para personalizar o modelo de comprovante impresso e os tipos de comprovante.

Os seguintes objetos de dados estão disponíveis para o editor de código do comprovante:

Objetos de comprovante

shop

location

order

return

gift_card

Objeto do pedido

id

created_at

source_identifier

change_due

balance_due

name

note

line_items

subtotal_price

total_price

total_tip_received

discounts

transactions

taxes_included

tax_lines

customer

shipping_address

shipping_groups

Objeto de devolução

name

created_at

is_unverified

is_exchange

exchange_type

return_discount

return_subtotal

return_total

exchange_subtotal

exchange_total

total_cash_rounding_adjustment

total_adjusted_amount

net_total

return_line_items

exchange_line_items

return_tax_lines

exchange_tax_lines

shipping_refund_amount

tip_refund_amount

transactions

Objeto de grupo de frete

destination

products

Objeto de item de linha

id

name

variant_title

price

is_gift_card

discount

total_price

selling_plan_name

tax_rates

custom_attributes

variant_title

variant_id

variant_metafields

staff_member_description

product_metafields

Objeto de item de linha de devolução

Inclui tudo do objeto de item de linha, além das seguintes propriedades:

return_reason

return_reason_note

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

Você pode usar filtros do Liquid para fazer ajustes nas informações dos modelos de comprovante. Por exemplo, é possível 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 um caractere de barra vertical | e o filtro dentro do bloco de código do Liquid, entre chaves duplas {{ }}. 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 as letras do valor de tax_line.title para maiúsculas. Por exemplo, se tax_line.title tem o valor Hst, o filtro upcase altera o valor para HST.

Consulte a seção Filtros na referência sobre Liquid para temas da Shopify para ver informações sobre como usar os filtros do Liquid.

Os filtros a seguir estão disponíveis no editor de código do comprovante:

t

money

escape

barcode

qrcode

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

É possível usar o Liquid para adicionar mensagens condicionais. Essa funcionalidade é semelhante a salvar em um único local com o editor visual. Por exemplo, se a sua empresa começou com um único local e agora tem vários locais novos, é possível destacar a loja original nos comprovantes impressos.

É possível adicionar uma mensagem personalizada ao modelo header.liquid na pasta Sections do editor de código e usar o Liquid para exibir a mensagem apenas no local principal.

O código a seguir verifica o nome do local (neste caso, o local original chamado “Início”) e exibe a mensagem “Bem-vindo à nossa loja original, inaugurada em 1972.” se o nome do local corresponder. Os comprovantes impressos de outros locais exibirão a mensagem “Bem-vindo à nossa loja.”.

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

Visualização das alterações de código no editor de código

Você pode pré-visualizar as alterações nos comprovantes impressos no editor de código do POS no admin da Shopify.

Dependendo do arquivo Liquid selecionado, a janela de visualização destaca o design ou a seção do comprovante afetada pelo arquivo. Por padrão, a janela de visualização exibe o conteúdo do pedido de POS mais recente. É possível selecionar um pedido específico para usar como conteúdo do comprovante na janela de visualização de todos os arquivos Liquid, exceto o gift-card.liquid, que exibe apenas os diferentes locais como opções de visualização selecionáveis.

Etapas: