Ajuda
Fazer login

Criar e personalizar modelos do Shopify Order Printer

É possível personalizar os modelos de várias maneiras e criar seus próprios modelos. O app Shopify Order Printer é compatível com modelos criados com HTML, CSS e variáveis do Liquid. Antes de personalizar os modelos, familiarize-se com a Referência de variáveis e filtros do Liquid para o Shopify Order Printer para ver todas as personalizações de modelo compatíveis.

Analise os exemplos a seguir para saber como personalizar os modelos do Shopify Order Printer.

Nesta página

É possível adicionar o 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 para o upload.

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

  4. Clique em Configurações > Apps.

  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 seguinte bloco de código:

<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 de text-align para left, right ou center.
  3. Opcional: para ajustar a largura do logo, altere o valor de width para um valor maior ou menor, como 8em ou 2em.
  4. Opcional: para visualizar o modelo, clique em Visualizar.
  5. Clique em Salvar.

Exemplo:

Confira o exemplo a seguir de como o HTML deve ser exibido depois de adicionar o logo ao modelo:

Um 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 para o upload.

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

  4. Clique em Configurações > Apps.

  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=”URL da imagem” />.

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

  10. Clique em Salvar.

Definir larguras de tabela como 100%

É possível adicionar bordas à tabela e ajustá-la para 100% de largura. Para isso, adicione a classe table-tabular à tabela.

Etapas:

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

  2. Clique em Modelos.

  3. Clique no modelo que você quer editar.

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

  5. Opcional: para visualizar o modelo, clique em Visualizar.

  6. Clique em Salvar.

Exemplo:

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

Exibir miniaturas de produtos

É possível adicionar miniaturas de produtos ao modelo de pedido. Para isso, insira um bloco de código personalizado no modelo.

Etapas:

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

  2. Clique em Modelos.

  3. Clique no modelo que você quer editar.

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

  5. Opcional: para visualizar o modelo, clique em Visualizar.

  6. Clique em Salvar.

Adicionar informações do pedido

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

Etapas:

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

  2. Clique em Modelos.

  3. Clique no modelo que você quer editar.

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

  5. Opcional: para visualizar o modelo, clique em Visualizar.

  6. Clique em Salvar.

Exemplo:

Nyla quer editar o modelo de guia de remessa para incluir uma lista dos itens enviados. Ela adiciona o código a seguir à parte inferior do modelo de Guia de remessa no app Order Printer da Shopify. Como resultado, as guias de remessa de Nyla agora incluem uma tabela com a lista dos itens comprados.

<br>
<br>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th scope="col">Quantity</th>
      <th scope="col">Item</th>
      {% if tax_lines.size > 0 %}
      <th scope="col">Taxes</th>
      {% endif %}
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
        <td scope="row">{{ 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 Apps > Order Printer.

  2. Clique em Modelos.

  3. Clique no modelo que você quer editar.

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

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

  6. Opcional: para visualizar o modelo, clique em Visualizar.

  7. Clique em Salvar.

Adicionar um código QR a um modelo

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

Etapas:

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

  2. Clique em Modelos.

  3. Clique no modelo que você quer editar.

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

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

  6. Opcional: para visualizar o modelo, clique em Visualizar.

  7. Clique em Salvar.

Usar uma fonte do Google em um modelo

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

<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 a seguir nele e ajuste o número 14 para um valor maior ou menor:

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

Para aumentar o tamanho da fonte dos cabeçalhos no modelo, cole o código a seguir nele e ajuste os valores ao lado do cabeçalho:

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

Se você importou os modelos do app Order Printer legado, é possível aumentar o tamanho da fonte com o seguinte bloco de código:

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