Personalização de guias de remessa

É possível personalizar o modelo das guias de remessa. A alteração do modelo permite adicionar seu branding e mudar a aparência da guia de remessa.

Alterar o endereço da loja

Para editar ou alterar o endereço da loja, acesse Configurações > Geral e edite as informações da loja.

Para alterar apenas o endereço nas guias de remessa, siga as etapas abaixo.

Etapas:

1. No admin da Shopify, acesse Configurações > Frete e entrega.

2. Na seção Documentos, clique em Modelo de guia de remessa.

3. Encontre a variável do Liquid {{ shop_address.summary }} que faz referência ao endereço da loja. Se não encontrar essa variável, tente a seguinte:

{{ shop_address.address1 }}, {{ shop_address.city }}, {{ shop_address.province_code }}, {{ shop_address.zip }}, {{ shop_address.country }}

4. Destaque este código e exclua-o.
5. Digite o endereço que você quer que apareça nas guias de remessa nesse espaço vazio. Por exemplo, o endereço pode ser assim: 123 Example Street, New York, NY, 10000, United States
6. Clique em Visualizar modelo para ver as alterações.
7. Clique em Salvar.

Remover imagens de produto

É possível remover as imagens dos produtos que aparecem ao lado dos títulos dos produtos nas guias de remessa.

Etapas:

1. No admin da Shopify, acesse Configurações > Frete e entrega.

2. Na seção Documentos, clique em Modelo de guia de remessa.

3. Encontre as seguintes variáveis do Liquid que fazem referência às imagens dos produtos:

{% if line_item.image != blank %}
       <div class="flex-line-item-img">
         <div class="aspect-ratio aspect-ratio-square" style="width: {{ desired_image_size }}px; height: {{ desired_image_size }}px;">
           {{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}
         </div>
       </div>
       {% endif %}

4. Destaque este código e exclua-o.
5. Clique em Visualizar modelo para conferir as alterações.
6. Clique em Salvar.

Editar o logo

Antes de adicionar o logo da loja às guias de remessa, é necessário fazer upload do logo para o admin da Shopify. Depois de fazer upload, anote o nome do arquivo carregado para usá-lo mais tarde no modelo de guia de remessa.

Depois de fazer o upload do logo para a loja, você pode adicionar o logo e remover o nome da loja, adicionar o logo acima do nome da loja ou adicionar o logo ao lado do nome da loja.

Etapas:

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

2. Clique em Fazer upload de arquivos.

3. Selecione o logo da loja em seu dispositivo e faça o upload.

4. Anote o nome do arquivo quando o upload for concluído, incluindo a extensão de arquivo (por exemplo, .png ou .jpg).

Adicionar o logo e remover o nome da loja

É possível remover o nome da loja e substituí-lo pelo logo da loja no topo das guias de remessa.

Etapas:

1. No admin da Shopify, acesse Configurações > Frete e entrega.

2. Na seção Documentos, clique em Modelo de guia de remessa.

3. Encontre o seguinte código que faz referência ao nome da loja:

<p class="to-uppercase">
  {{ shop.name }}
</p>

4. Destaque este código e exclua-o.
5. No espaço criado, escreva o seguinte código usando o nome do arquivo carregado anteriormente:

{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}

O filtro file_img_url gera o URL para o arquivo carregado com o tamanho especificado e o filtro img_tag cria uma tag de imagem HTML com o texto alternativo fornecido.

Por exemplo, se o arquivo carregado for shop_logo.png, o código Liquid correspondente será:

{{ 'shop_logo.png' | file_img_url: 'small' | img_tag: 'Logo' }}

6. Selecione Visualizar modelo para conferir as alterações.
7. Clique em Salvar.

Adicionar o logo acima do nome da loja

Para adicionar o logo acima do nome da loja, na parte superior das guias de remessa, siga as etapas abaixo.

Etapas:

1. No admin da Shopify, acesse Configurações > Frete e entrega.

2. Na seção Documentos, clique em Modelo de guia de remessa.

3. Encontre a seguinte variável do Liquid que faz referência ao nome da loja e adicione uma quebra de linha entre as duas linhas:

<div class="shop-title">
      |
      <p class="to-uppercase">

4. No espaço criado, escreva o seguinte código usando o nome do arquivo carregado anteriormente (por exemplo, shop_logo.png):

{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}
<br>

5. Selecione Visualizar modelo para conferir as alterações.
6. Clique em Salvar.

Adicionar o logo ao lado do nome da loja

Para adicionar o logo ao lado do nome da loja, na parte superior das guias de remessa, siga as etapas abaixo.

Etapas:

1. No admin da Shopify, acesse Configurações > Frete e entrega.

2. Na seção Documentos, clique em Modelo de guia de remessa.

3. Encontre a seguinte variável do Liquid que faz referência ao nome da loja:

<p class="to-uppercase">
{{ shop.name }}
</p>

4. Destaque este código e exclua-o.
5. No espaço criado, escreva o seguinte código usando o nome do arquivo carregado anteriormente (por exemplo, shop_logo.png):

{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}
<span class="to-uppercase">
  {{ shop.name }}
</span>

6. Encontre as seguintes variáveis do Liquid:

.shop-title {
  -webkit-box-flex: 6;
  -webkit-flex: 6;
  flex: 6;
  font-size: 1.9em;
}

7. Adicione uma nova linha no final das variáveis listadas acima e cole o seguinte código:

.shop-title img {
 vertical-align: middle;
}

.shop-title span {
 vertical-align: middle;
}

8. Selecione Visualizar modelo para conferir as alterações.
9. Clique em Salvar.

Estilizar guias de remessa com CSS

É possível personalizar a guia de remessa com arquivos CSS enviados para a Shopify. Arquivos CSS hospedados fora da Shopify não serão renderizados corretamente.

Etapas:

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

2. Clique em Fazer upload de arquivos.

3. Selecione o arquivo CSS e faça o upload dele.

4. Copie a URL do arquivo quando o upload for concluído.

5. Inclua o seguinte código:

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.shopify.com/path_to_file/styles.css"
>