Personalizar modelos do Order Printer

É possível criar e personalizar até 15 modelos para o app Order Printer no admin da Shopify. Por padrão, o app Order Printer inclui dois modelos:

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

Criar um novo modelo do Order Printer

Para criar um novo modelo do Order Printer, é preciso ter conhecimentos em HTML, CSS e Liquid. O Atendimento ao cliente de temas da Shopify talvez possa ajudar com pequenos ajustes em temas gratuitos da Shopify no escopo da Política de design da Shopify. Caso você precise de alterações mais complexas ou use um tema não criado pela Shopify, considere contratar um parceiro da Shopify.

Etapas:

1. No admin da Shopify, acesse Apps > Order Printer (legado).

2. Clique em Gerenciar modelos.

3. Clique em Adicionar modelo.

4. Insira um nome para o novo modelo no campo Nome.

5. Adicione o código HTML, CSS ou Liquid no campo Código para criar o modelo.

6. Quando terminar, clique em Salvar.

Editar um modelo do Order Printer

Para editar os modelos do Order Printer, é preciso ter conhecimentos em HTML, CSS e Liquid. O Atendimento ao cliente de temas da Shopify não faz edições extensas nos modelos, mas talvez possa ajudar com pequenos ajustes em temas gratuitos da Shopify no escopo da Política de design da Shopify. Para alterações mais complexas, considere contratar um parceiro da Shopify.

Etapas:

1. No admin da Shopify, acesse Apps > Order Printer (legado).

2. Clique em Gerenciar modelos.

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

4. Faça as alterações no modelo adicionando ou editando o código HTML, CSS ou Liquid no campo Código. Para ver exemplos de personalização de modelo, consulte Exemplos de personalização de modelo.

5. Quando terminar, clique em Salvar.

Exemplos de personalização de modelo

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

• Adicionar o logo aos modelos do Order Printer
• Definir a largura da tabela como 100%
• Exibir miniaturas de produtos
• Adicionar informações do pedido

Exemplo: adicionar o logo aos modelos do Order Printer

O resultado no HTML deve ser assim:

Exemplo: definir a largura da tabela como 100%

Para que as tabelas tenham bordas e ocupem 100% da 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 no modelo:

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

Adicionar informações do pedido

É possível adicionar informações do pedido aos modelos, como o nome, a quantidade e o custo dos itens comprados. Para adicionar informações do pedido ao modelo:

1. No admin da Shopify, acesse Apps > Order Printer (legado).

2. Clique em Gerenciar modelos.

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

4. Use variáveis do Liquid para adicionar informações do pedido e HTML para formatar. Por exemplo, {{ line_item.price | money }} imprime o preço do item.

5. Quando terminar, clique em Salvar.

Por exemplo, Nyla quer editar o modelo de guia de remessa para incluir uma lista dos itens a serem enviados. Para isso, ela adiciona o seguinte código na parte inferior do modelo Guia de remessa 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 de Nyla agora incluem uma tabela com a lista dos itens comprados.