Personalizações de guias de remessa

Você pode personalizar o modelo de suas guias de remessa. A alteração do modelo possibilita que você adicione seu próprio branding e mude a aparência da guia de remessa.

Alterar endereço da loja

Para editar ou alterar o endereço da loja, acesse Configurações > Informações da loja.

Se você deseja alterar apenas o endereço que consta nas guias de remessa, siga as etapas abaixo.

Etapas:

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

2. Na seção Guias de remessa, clique em Editar.

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

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

1. Realce esse código e exclua-o.
2. Digite o endereço que deve constar nas guias de remessa nesse espaço vazio. Por exemplo, digite seu endereço para ficar assim:123 Example Street, New York, NY, 10000, United States
3. Clique em Ver modelo para ver suas alterações.
4. Clique em Salvar.

Remover imagens do produto

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

Etapas:

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

2. Na seção Guias de remessa, clique em Editar.

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

{% 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 %}

1. Realce esse código e exclua-o.

2. Clique em Ver modelo para ver suas alterações.

3. Clique em Salvar.

Editar logo

Antes de adicionar o logo de sua loja às guias de remessa, você precisa carregar o logo no seu admin da Shopify. É necessário ter o URL atribuído ao seu arquivo para usá-la nas guias de remessa.

Depois de carregar o logo em sua loja, você pode adicionar seu logo e remover o nome da loja, adicionar seu logo acima do nome da loja ou adicionar seu 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 no seu dispositivo o logo de sua loja e carregue-o.

4. Copie o URL do arquivo quando o carregamento terminar.

Adicionar o logo e remover o nome da loja

Você pode remover o nome de sua loja e substituí-lo pelo logo da loja na parte superior das guias de remessa.

Etapas:

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

2. Na seção Guias de remessa, clique em Editar.

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

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

1. Realce esse código e exclua-o.
2. No espaço criado, escreva o seguinte código e cole o URL copiado no local indicado:

<img src="PASTE FILE URL HERE" style="width: 60px; height: 60px;">

1. Selecione Ver modelo para ver as alterações.
2. Clique em Salvar.

Adicionar logo acima do nome da loja

Se você deseja adicionar seu 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 Guias de remessa, clique em Editar.

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

1. No espaço criado, escreva o seguinte código e cole o URL copiado no local indicado:

<img src="PASTE FILE URL HERE" style="width: 60px; height: 60px;">
<br>

1. Selecione Ver modelo para ver as alterações.
2. Clique em Salvar.

Adicionar logo ao lado do nome da loja

Se você deseja adicionar seu 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 Guias de remessa, clique em Editar.

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

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

1. Realce esse código e exclua-o.
2. No espaço criado, escreva o seguinte código e cole o URL copiado no local indicado:

<img src="PASTE FILE URL HERE" style="width: 60px; height: 60px;">
<span class="to-uppercase">
  {{ shop.name }}
</span>

1. Encontre as seguintes variáveis do Liquid:

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

1. Adicione outra linha ao final das variáveis listadas acima e cole o seguinte código:

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

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

1. Selecione Ver modelo para ver as alterações.
2. Clique em Salvar.

Estilizar guias de remessa usando CSS

Dica

Estilizar seus modelos com CSS requer conhecimento avançado de HTML e CSS.

Personalize a guia de remessa usando arquivos CSS carregados na Shopify. Os casos hospedados fora da plataforma não serão processados corretamente.

Etapas:

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

2. Clique em Fazer upload de arquivos.

3. Selecione e carregue o arquivo CSS.

4. Copie o URL do arquivo quando o carregamento terminar.

5. Inclua o seguinte código:

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