Fazer upload de imagens

Use diferentes tipos de imagens, como o logo da empresa, imagens de produtos, apresentações de slides, banners e imagens de posts do blog. As imagens também podem ser transformadas com ações de recortar e redimensionar. Além disso, é possível personalizar as configurações de mídia no tema para alterar a borda ou a sombra de todas as mídias exibidas na loja.

Para exibir imagens na loja virtual exatamente da maneira que você quer, use a proporção correta da imagem. Vale lembrar que as imagens são otimizadas automaticamente para sua vitrine com a Rede de entrega de conteúdo (CDN, na sigla em inglês) da Shopify.

Observação

Sempre faça upload das imagens de melhor qualidade que você puder fornecer. Sendo assim, elas não devem ser compactadas manualmente.

Enviar uma imagem pelo editor de temas

No editor de temas, você pode adicionar imagens ao seu tema. Também é possível fazer upload de imagens pela seção Conteúdo > Arquivos do admin da Shopify. Para saber mais, consulte Fazer upload e gerenciar arquivos.

Etapas:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.
2. Clique em Personalizar para o tema em que você deseja fazer upload de uma imagem.
3. Opcional: caso queira adicionar uma imagem a uma página da loja que não seja a página inicial, clique no menu suspenso Página inicial e selecione o modelo que você quer editar.
4. Na barra lateral do editor de temas, clique na seção ou no bloco em que você quer incluir uma imagem.
5. No campo Imagem, siga um destes procedimentos:
   • Para fazer upload de uma imagem do seu computador, siga estas etapas:
     1. Clique em Selecionar imagem > Adicionar imagens.
     2. Encontre e abra a imagem no seu computador.
     3. Clique em Pronto.

- Para usar uma imagem gratuita do Burst, faça o seguinte: 1. Clique em Acessar imagens gratuitas. 2. Encontre uma imagem que você queira usar. 3. Clique em Selecionar.

1. Clique em Salvar.

iPhone

1. No app da Shopify, toque no botão ….

2. Na seção canais de vendas, toque em loja virtual.

3. Toque em Gerenciar todos os temas.

4. Toque em Personalizar para o tema em que você deseja fazer upload de uma imagem.

5. Opcional: caso queira adicionar uma imagem a uma página da loja que não seja a página inicial, toque no menu suspenso Página inicial e selecione o modelo que você quer editar.

6. Toque em Seções e, depois, na seção ou no bloco a que você quer adicionar uma imagem.

7. No campo Imagem, siga um destes procedimentos:

   • Para fazer upload de uma imagem do seu dispositivo, siga estas etapas:
     1. Toque em Selecionar imagem > Adicionar imagens.
     2. Encontre e abra a imagem no seu dispositivo.
     3. Toque em Pronto.

- Para usar uma imagem gratuita do Burst, faça o seguinte: 1. Toque em Acessar imagens gratuitas. 2. Encontre uma imagem que você queira usar. 3. Toque em Pronto.

1. Toque em Salvar.

Android

1. No app da Shopify, toque no botão ☰.

2. Na seção canais de vendas, toque em loja virtual.

3. Toque em Gerenciar todos os temas.

4. Toque em Personalizar para o tema em que você deseja fazer upload de uma imagem.

5. Opcional: caso queira adicionar uma imagem a uma página da loja que não seja a página inicial, toque no menu suspenso Página inicial e selecione o modelo que você quer editar.

6. Toque em Seções e, depois, na seção ou no bloco a que você quer adicionar uma imagem.

7. No campo Imagem, siga um destes procedimentos:

   • Para fazer upload de uma imagem do seu dispositivo, siga estas etapas:
     1. Toque em Selecionar imagem > Adicionar imagens.
     2. Encontre e abra a imagem no seu dispositivo.
     3. Toque em Pronto.

- Para usar uma imagem gratuita do Burst, faça o seguinte: 1. Toque em Acessar imagens gratuitas. 2. Encontre uma imagem que você queira usar. 3. Toque em Pronto.

1. Toque em ✓.

Usar metacampos para adicionar imagens

Se houver metacampos definidos para as imagens, use o seletor de origem dinâmica para adicionar uma imagem à loja virtual. Para saber mais sobre metacampos e formatos de imagem compatíveis, consulte Adicionar valores a metacampos.

Definir um ponto focal em uma imagem

Use pontos focais para definir uma área de foco, ou seja, a parte mais importante, em uma imagem na loja virtual. Vale destacar que esses pontos sempre aparecem no quadro, mesmo se você tiver um tema que recorte a imagem para caber no layout. Além disso, os pontos focais dão a você mais controle sobre a maneira como a imagem é exibida em variados tamanhos de tela e nos casos em que os temas usam diferentes taxas de proporção.

Cada imagem só pode ter um ponto focal, mas você tem a opção de alterá-lo ou removê-lo a qualquer momento.

Compatibilidade de pontos focais com temas gratuitos da Shopify

É possível definir um ponto focal nas seguintes versões dos temas gratuitos da Shopify:

• Colorblock versão 3.0.0 e mais recente
• Craft versão 5.0.0 e mais recente
• Crave versão 5.0.0 e mais recente
• Dawn versão 7.0.0 e mais recente
• Origin versão 1.0.0 e mais recente
• Publisher versão 1.0.0 e mais recente
• Refresh versão 2.0.0 e mais recente
• Ride versão 3.0.0 e mais recente
• Rise versão 1.0.0 e mais recente
• Sense versão 5.0.0 e mais recente
• Spotlight versão 0.0.1 e mais recente
• Studio versão 4.0.0 e mais recente
• Taste versão 4.0.0 e mais recente
• Trade versão 1.0.0 e mais recente

Se você usa um tema de terceiros, verifique a documentação do tema para descobrir se ele é compatível com o uso de pontos focais.

Adicionar um ponto focal a uma imagem

Se você adicionar um ponto focal a uma imagem e usá-la em vários locais da loja virtual, o mesmo ponto será aplicado onde quer que você use a imagem.

Conforme a maneira como o tema corta e redimensiona as imagens, pode ser que nem sempre o ponto focal pode esteja visualmente centralizado.

Etapas:

1. Clique em uma imagem de um dos seguintes locais no admin da Shopify:

   • Na seção Conteúdo > Arquivos.
   • No editor de temas.
   • Na seção Mídia das listagens de produtos na seção Produtos.
   • No editor do Shopify Email.
   • Na seção Metacampos de qualquer recurso que tenha um metacampo do tipo Referência de arquivo para adicionar uma imagem.

2. Para selecionar a parte da imagem em que você quer definir um ponto focal, clique na imagem ou arraste o ponto azul.

3. Clique em Salvar.

Observação

Para mover um ponto focal, abra a imagem de novo e clique em uma área diferente dela para definir o novo ponto.

Remover um ponto focal de uma imagem

Etapas:

1. Clique em uma imagem de um dos seguintes locais no admin da Shopify:

   • Na seção Conteúdo > Arquivos.
   • No editor de temas.
   • Na seção Mídia das listagens de produtos na seção Produtos.
   • No editor do Shopify Email.
   • Na seção Metacampos de qualquer recurso que tenha um metacampo do tipo Referência de arquivo para adicionar uma imagem.

2. Clique em Remover.

3. Clique em Salvar como novo.

Formatos de imagem

Os seguintes formatos de imagem são aceitos:

• JPEG
• JPEG progressivo
• PNG
• GIF
• HEIC
• WebP
• AVIF

Observação

A Shopify detecta quais formatos de imagem são compatíveis com o navegador do cliente e, assim, exibe o melhor formato disponível de forma automática. Saiba mais sobre os recursos de transformação de imagem da Shopify.

Usar imagens JPEG

As imagens JPEG são ideais para fotografias e outras imagens fixas com cores complexas. O formato JPEG tem uma paleta com milhões de cores. O JPEG também possui compactação com perdas, o que pode ajudar a manter os tempos de carregamento da página rápidos sem uma perda perceptível na qualidade da imagem. Use o formato JPEG para os seguintes tipos de imagens:

• aliexpress.com
• banners ou apresentações de slides
• páginas e posts do blog

Usar imagens PNG

As imagens PNG são ideais para gráficos e ícones com cores chapadas e sem gradientes. O formato PNG também oferece suporte a transparência em imagens. Use o formato PNG para os seguintes tipos de imagens:

• logos
• ícones
• bordas e molduras

Compactar imagens e selecionar formatos de modo automático

Para manter o tempo de carregamento rápido das páginas, a Shopify compacta imagens quando elas são exibidas na loja virtual, ou seja, reduz o tamanho do arquivo para acelerar o processo.

Além disso, a Shopify escolhe automaticamente o melhor formato de arquivo possível para exibir imagens. Por exemplo, quando é detectado que o navegador da web do cliente é compatível com opções modernas, como WebP e o formato de arquivo de imagem AV1 (AVIF, na sigla em inglês), suas imagens são mostradas nesses formatos.

Para reduzir o tamanho do arquivo e, assim, melhorar o desempenho, os GIFs são convertidos automaticamente para o formato WebP animado.

Limites de upload de imagem

O envio de imagens para a Shopify tem restrições em termos de megapixels e tamanho de arquivo (medido em megabytes). Os megapixels são usados para indicar quantos milhões de pixels formam uma imagem. Megabytes são usados para indicar quantos milhões de bytes de memória ou espaço em disco uma imagem ocupa.

As imagens enviadas para a Shopify não podem exceder nenhum dos seguintes limites:

• 20 megapixels
• 20 megabytes

Para encontrar o valor de megapixels da imagem, use a seguinte equação:

(pixel width x pixel height)/1,000,000

Por exemplo, uma imagem com resolução de 4.900 px por 6930 px tem 33,9 megapixels com base na equação: (4900x6930)/1,000,000 = 33.9 MP.

Observação

Existem limites específicos de tamanho para o upload de arquivos e imagens de produtos.

Perfis de cores da imagem

Quando você visualiza uma imagem na sua loja virtual, as cores da imagem podem ser exibidas de forma diferente daquelas da imagem original que você enviou para a Shopify. Isso pode ocorrer quando uma imagem tem um perfil de cores, que é um conjunto de dados armazenados em um arquivo com extensão .ICC ou .ICM.

Os perfis de cores geralmente são incorporados em imagens para ajudar a padronizar a maneira como as cores aparecem em diferentes dispositivos. Quando as imagens são exibidas na sua loja virtual, seus perfis de cores são removidos.

Os perfis de cores são removidos pelos seguintes motivos:

• Nem todos os dispositivos conseguem ler perfis de cores .ICC ou .ICM, portanto, mantê-los intactos pode resultar em falta de padronização de cores das imagens nos dispositivos.
• Quando uma imagem enviada não inclui um perfil de cor, o sRGB, que é o perfil de cor mais comum usado para exibir imagens na web, é implementado pelo navegador. Isso garante que suas imagens tenham a mesma aparência em todos os principais navegadores e dispositivos da web.
• Os perfis de cores podem ocupar muito espaço em disco, o que pode resultar em tempos de carregamento da página mais longos.

Remover o perfil de cores de uma imagem

Você pode remover o perfil de cores da sua imagem salvando-a sem o perfil de cores antes de enviá-la para a Shopify. Este processo varia de acordo com o seu programa de edição de imagens.

Veja a documentação da Adobe sobre como Atribuir ou remover um perfil de cores (Illustrator, Photoshop) e Atribuir ou remover um perfil de cores (InDesign).

Práticas recomendadas para apresentações de slides, banners de imagem e imagens de largura total

Muitos temas da Shopify apresentam imagens grandes ou apresentações de slides que se adaptam à altura do navegador ou ao tamanho da tela.

Se você usa um desses temas ou tem uma apresentação de slides grande ou uma imagem de fundo, é necessário saber quais tipos de imagens ficarão melhores.

Como imagens grandes podem não caber em todos os dispositivos, a Shopify às vezes exibe apenas parte da imagem, dependendo do dispositivo que você está usando. Se a apresentação de slides contiver muitas imagens grandes, partes das imagens podem não ficar visíveis.

Considerações sobre o uso de imagens em apresentações de slides ou banners de imagens

Lembre-se dos seguintes pontos para garantir que as imagens funcionem bem com o tema:

• Imagens que você usa para apresentações de slides ou planos de fundo não podem conter texto. Se o texto fizer parte da própria imagem, ele poderá acabar sendo movido, recortado ou ajustado com base no tema. Use o editor de temas para adicionar texto e links a suas apresentações de slides e planos de fundo.

• Para usar imagens em apresentações de slides ou como fundo, escolha imagens simples para que qualquer texto sobreposto seja fácil de ler.

Imagens largas em telas altas

Imagens amplas podem ser cortadas à esquerda e à direita quando o dispositivo usado para exibi-las tiver uma tela alta, como um celular ou um tablet visualizado em modo retrato. No exemplo abaixo, se as pessoas são a parte mais importante da imagem, é possível colocar um ponto focal no lado direito da imagem.

Imagens altas em telas largas

Imagens altas podem ser cortadas em cima e embaixo quando o dispositivo usado para exibi-las tiver uma tela larga, como um laptop ou monitor de desktop. No exemplo abaixo, se os sapatos são a parte mais importante da imagem, é possível colocar um ponto focal embaixo da imagem.