Personalização de modelos do Order Printer

Você pode criar e personalizar até 15 modelos do app Order Printer no seu admin da Shopify. Por padrão, o app Order Printer inclui dois modelos:

• Fatura : uma fatura básica que você pode enviar ao cliente
• Guia de remessa : uma impressão do endereço da sua loja e do endereço de entrega do cliente

Faça sua empresa crescer

faturas e guias de remessa são apenas o começo. Adicionar outros encartes de embalagens aos seus pedidos, como amostras de produtos e cupons, é uma ótima maneira de se conectar com os clientes.

Criar um novo modelo do Order Printer

Criar um novo modelo do Order Printer requer que você conheça HTML, CSS e Liquid. O Atendimento para Temas da Shopify pode ajudar em pequenos ajustes no escopo da Política de Design da Shopify.

Etapas:

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

2. Clique em Order Printer para abrir o app.

3. Clique em Gerenciar modelos.

4. Clique em Adicionar modelo.

5. Digite um nome para o seu novo modelo no campo Nome.

6. Adicione um código HTML, CSS ou Liquid no campo Código para criar seu modelo.

7. Ao terminar, clique em Salvar.

Editar modelo do Order Printer

Editar os modelos do Order Printer requer que você conheça HTML, CSS e Liquid. O Atendimento para Temas da Shopify pode ajudar em pequenos ajustes no escopo da Política de Design da Shopify.

Etapas:

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

2. Clique em Order Printer para abrir o app.

3. Clique em Gerenciar modelos.

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

5. Adicione ou edite códigos HTML, CSS ou Liquid no campo Código para fazer alterações no modelo. Para ver exemplos de personalizações de modelos, consulte Exemplo de personalizações de modelos.

6. Ao terminar, clique em Salvar.

Exemplo de personalizações de modelos

Os exemplos a seguir explicam algumas maneiras comuns de personalizar modelos do Order Printer:

• Adicionar seu logo aos modelos do Order Printer
• Espaçar totalmente as larguras das tabelas
• Exibir miniaturas de produtos
• Adicionar informações do pedido

Exemplo: adicionar seu logo aos modelos do Order Printer

Observação

A personalização a seguir requer conhecimento básico de HTML.

Desktop

1. No admin da Shopify, acesse Conteúdo > Arquivos.
2. Clique em Fazer upload de arquivos e selecione o arquivo de imagem no computador.
3. Na página Arquivos, encontre o arquivo carregado e clique em Copiar URL.
4. No admin da Shopify, clique em Configurações > Apps e canais de vendas.
5. Clique em Order Printer para abrir o app.
6. Clique em Gerenciar modelos.
7. Clique no nome do modelo que você quer editar.
8. Insira no seu modelo o seguinte snippet de código de programação no local em que gostaria de exibir o logo: <img src="your-image-URL">.
9. Substitua your-image-URL pelo URL da imagem que você copiou. Dependendo de onde você quer exibir o logo, talvez seja necessário incluir uma tag <br/> para adicionar uma quebra de linha antes ou depois da imagem.

iPhone

1. No app da Shopify, toque no botão … e em Configurações.
2. Na seção Configurações da loja, toque em Arquivos.
3. Clique em Fazer upload de arquivos e selecione o arquivo de imagem no computador.
4. Na página Arquivos, encontre o arquivo carregado e clique em Copiar URL.
5. No admin da Shopify, clique em Configurações > Apps e canais de vendas.
6. Clique em Order Printer para abrir o app.
7. Clique em Gerenciar modelos.
8. Clique no nome do modelo que você quer editar.
9. Insira no seu modelo o seguinte snippet de código de programação no local em que gostaria de exibir o logo: <img src="your-image-URL">.
10. Substitua your-image-URL pelo URL da imagem que você copiou. Dependendo de onde você deseja que seu logo seja exibido, talvez seja necessário adicionar uma tag <br/> para adicionar uma quebra de linha antes ou depois da sua imagem.

Android

1. No app da Shopify, toque no botão … e em Configurações.
2. Na seção Configurações da loja, toque em Arquivos.
3. Clique em Fazer upload de arquivos e selecione o arquivo de imagem no computador.
4. Na página Arquivos, encontre o arquivo carregado e clique em Copiar URL.
5. No admin da Shopify, clique em Configurações > Apps e canais de vendas.
6. Clique em Order Printer para abrir o app.
7. Clique em Gerenciar modelos.
8. Clique no nome do modelo que você quer editar.
9. Insira no seu modelo o seguinte snippet de código de programação no local em que gostaria de exibir o logo: <img src="your-image-URL">.
10. Substitua your-image-URL pelo URL da imagem que você copiou. Dependendo de onde você deseja que seu logo seja exibido, talvez seja necessário adicionar uma tag <br/> para adicionar uma quebra de linha antes ou depois da sua imagem.

Deve ficar assim no HTML:

Exemplo: espaçar totalmente as larguras das tabelas

Para inserir margens em suas tabelas e ampliá-las até 100% de largura, adicione uma classe table-tabular à tabela:

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

Exemplo: exibir miniaturas de produtos

Para incluir miniaturas de produtos, insira este código em seu modelo:

{{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}

Adicionar informações do pedido

Aviso

A personalização a seguir requer conhecimento básico de HTML.

Você pode adicionar informações do pedido aos seus modelos, como nome, quantidade e custo dos itens comprados. Para adicionar informações do pedido ao seu modelo:

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

2. Clique em Order Printer para abrir o app.

3. Clique em Gerenciar modelos.

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

5. Use variáveis do Liquid para adicionar informações do pedido e HTML a fim de incluir a formatação. Por exemplo, o {{ line_item.price | money }} imprime o preço do item.

6. Ao terminar, clique em Salvar.

Por exemplo, Nyla deseja editar o modelo da sua guia de remessa para incluir uma lista dos itens a serem enviados. Ela adiciona o seguinte código ao nível inferior do Packing slip modelo no app Order Printer:

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

Como resultado, as guias de remessa do Nyla agora incluem uma tabela que lista os itens comprados.