Fazer login
Começar avaliação gratuita

Criar e personalizar modelos do app Shopify Order Printer

É possível personalizar os modelos de várias maneiras, além de criar seus próprios. O app Shopify Order Printer é compatível com modelos feitos com variáveis HTML, CSS e Liquid. Antes de personalizar os modelos, conheça as variáveis e a referência de filtros do Liquid para o Shopify Order Printer relacionadas a todas as personalizações de modelos aceitas.

Confira os exemplos abaixo para saber como personalizar modelos do Shopify Order Printer.

Nesta página

É possível adicionar um logo ao modelo.

Etapas:

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

  2. Clique em Fazer upload de arquivos e selecione o arquivo de imagem que você quer enviar.

  3. Para copiar o URL da imagem do logo, clique no ícone de link.

  4. Clique em Configurações > Apps e canais de vendas.

  5. Clique em Order Printer.

  6. Clique em Modelos.

  7. Clique no nome do modelo que você quer editar.

  8. No editor de código, cole este bloco de código:

liquid <div style="text-align: center;"> <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE"> </div>

  1. Substitua YOUR_IMAGE_URL_HERE no código pelo URL da imagem.
  2. Opcional: para alinhar o logo, altere o valor text-align para left, right ou center.
  3. Opcional: para ajustar a largura do logo, altere width para um valor maior ou menor, como 8em ou 2em.
  4. Opcional: para ver o modelo, clique em Pré-visualizar.
  5. Clique em Salvar.

Exemplo:

Confira no exemplo a seguir como o HTML precisa aparecer depois que você adiciona o logo ao modelo:

Exemplo que exibe um bloco de código de como adicionar um logo a um modelo

Adicionar imagens a um modelo

É possível adicionar imagens ao modelo.

Etapas:

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

  2. Clique em Fazer upload de arquivos e selecione o arquivo de imagem que você quer enviar.

  3. Para copiar o URL da imagem, clique no ícone de link.

  4. Clique em Configurações > Apps e canais de vendas.

  5. Clique em Order Printer.

  6. Clique em Modelos.

  7. Clique no nome do modelo que você quer editar.

  8. No editor de código, cole o bloco de código <img src=”Image Source” />.

  9. Substitua Image Source no código pelo URL da imagem.

  10. Clique em Salvar.

Espaçar totalmente as larguras das tabelas

É possível adicionar margens à tabela e ampliá-la até 100% de largura, basta adicionar a classe table-tabular.

Etapas:

  1. No admin da Shopify, acesse Configurações > Apps e canais de vendas.

  2. Clique em Order Printer.

  3. Clique em Abrir app.

  4. Clique em Modelos.

  5. Clique no modelo que você quer editar.

  6. No editor de código, encontre a tabela que você quer editar e adicione a classe table-tabular à tabela.

  7. Opcional: para ver o modelo, clique em Pré-visualizar.

  8. Clique em Salvar.

Exemplo:

<table class="table-tabular">
    ...
</table>

Exibir miniaturas de produtos

É possível adicionar miniaturas de produtos ao modelo de pedido. Mas, para isso, você precisa inserir um bloco de código personalizado.

Etapas:

  1. No admin da Shopify, acesse Configurações > Apps e canais de vendas.

  2. Clique em Order Printer.

  3. Clique em Abrir app.

  4. Clique em Modelos.

  5. Clique no modelo que você quer editar.

  6. Adicione o bloco de código liquid {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} ao modelo.

  7. Opcional: para ver o modelo, clique em Pré-visualizar.

  8. Clique em Salvar.

Adicionar informações do pedido

É possível adicionar informações do pedido aos modelos, como nome, quantidade e preço dos itens comprados.

Etapas:

  1. No admin da Shopify, acesse Configurações > Apps e canais de vendas.

  2. Clique em Order Printer.

  3. Clique em Abrir app.

  4. Clique em Modelos.

  5. Clique no modelo que você quer editar.

  6. No editor de código, use variáveis do Liquid para incluir as informações do pedido e HTML para adicionar a formatação. Por exemplo, {{ line_item.price | money }} exibe o preço do item.

  7. Opcional: para ver o modelo, clique em Pré-visualizar.

  8. Clique em Salvar.

Exemplo:

Nayara quer editar o modelo de guia de remessa para incluir uma lista dos itens a serem enviados. Ela adiciona o código abaixo ao final do modelo Guia de remessa no app Shopify Order Printer. Agora, as guias de remessa de Nayara incluem uma tabela que lista os itens comprados.

liquid <br> <br> <table class="table-tabular" style="margin: 0 0 1.5em 0;"> <thead> <tr> <th>Quantity</th> <th>Item</th> {% if tax_lines.size > 0 %} <th>Taxes</th> {% endif %} <th>Price</th> </tr> </thead> <tbody> {% for line_item in line_items %} <tr> <td>{{ line_item.quantity }} x</td> <td><b>{{ line_item.title }}</b></td> {% if line_item.tax_lines %} <td> {% for tax_line in line_item.tax_lines %} {{ tax_line.price | money }} {{ tax_line.title }}<br/> {% endfor %} </td> {% endif %} <td>{{ line_item.price | money }}</td> </tr> {% endfor %} </tbody> </table>

Adicionar um código de barras a um modelo

É possível adicionar um código de barras ao modelo.

Etapas:

  1. No admin da Shopify, acesse Configurações > Apps e canais de vendas.

  2. Clique em Order Printer.

  3. Clique em Abrir app.

  4. Clique em Modelos.

  5. Clique no modelo que você quer editar.

  6. Adicione o bloco de código <s-barcode value="a" /> ao modelo.

  7. Substitua o valor `` pelo valor de texto do código de barras.

  8. Opcional: para ver o modelo, clique em Pré-visualizar.

  9. Clique em Salvar.

Adicionar um código QR a um modelo

É possível adicionar um código QR a um modelo.

Etapas:

  1. No admin da Shopify, acesse Configurações > Apps e canais de vendas.

  2. Clique em Order Printer.

  3. Clique em Abrir app.

  4. Clique em Modelos.

  5. Clique no modelo que você quer editar.

  6. Adicione o bloco de código <s-barcode type="qrcode" value="" /> ao modelo.

  7. Substitua o valor `` pelo valor de texto do código QR.

  8. Opcional: para ver o modelo, clique em Pré-visualizar.

  9. Clique em Salvar.

Usar uma fonte do Google em um modelo

Para usar uma fonte do Google no modelo, colar o código abaixo no modelo e substitua a variável FontName pelo nome da fonte:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=FontName">
<style>
  body {
    font-family: FontName, serif;
  }
</style>

Aumentar o tamanho da fonte

Para aumentar o tamanho da fonte no modelo, cole o código abaixo no modelo e, em seguida, ajuste o número 14 com um valor maior ou menor:

<style>
  :root {
    --font-size: 14px;
  }
</style>

Para aumentar o tamanho da fonte dos títulos no modelo, cole o código abaixo no modelo e ajuste os valores ao lado do título:

<style>
  :root {
    --h1-font-size: 18px;
    --h2-font-size: 16px;
    --h3-font-size: 14px;
  }
</style>

Se você importou os modelos do app herdado Order Printer, use este bloco de código para aumentar o tamanho da fonte:

<style>
  :root {
    --legacy-font-size: 14px;
    --legacy-print-font-size: 18px;
  }
</style>
Não encontrou as respostas que está procurando? Estamos sempre à disposição para ajudar você.