Seções do Debut

As seções são blocos personalizáveis que determinam o layout de diferentes páginas da sua loja virtual.

  • As seções de início apresentam recursos que você pode adicionar, reorganizar ou remover, como apresentação de slides ou área para assinatura de newsletter. Você pode ter até 25 seções em sua página inicial.

  • Cada tipo de página tem suas próprias seções. Por exemplo, a seção de página de produto estabelece o layout de cada página de produto de sua loja virtual.

  • As seções da página estão sempre em locais específicos da sua loja virtual. Você pode personalizá-las, mas não pode reorganizá-las nem removê-las.

  • Cada tema apresenta seções fixas que são exibidas em todas as páginas de sua loja virtual, como o cabeçalho e o rodapé.

Você pode saber mais sobre a seleção exclusiva de seções de Debut e aprender a personalizá-las para se adequarem à sua empresa.

O Debut inclui as seguintes seções estáticas:

  • Cabeçalho
  • Rodapé
  • Páginas de produtos
  • Páginas de coleções
  • Página da lista de coleções
  • Páginas do blog
  • posts
  • Página do carrinho

Seções dinâmicas

Você pode adicionar, reorganizare removerseções dinâmicas para personalizar o layout da sua página inicial. Cada tema tem um conjunto exclusivo de seções dinâmicas para escolher.

O Debut inclui as seguintes seções dinâmicas:

  • Posts do blog
  • Lista de coleções
  • Coleção em destaque
  • Galeria
  • Imagem com texto
  • Imagem com sobreposição de texto
  • Lista de logotipos
  • Apresentação de slides
  • Produto em destaque
  • Newsletter
  • Mapa
  • Rich text
  • Depoimentos
  • Texto em coluna com imagens
  • Vídeo
  • Conteúdo personalizado

Cabeçalho

Na seção de cabeçalho, você pode editar o conteúdo exibido na parte superior de todas as páginas da sua loja. Você pode adicionar uma imagem de logotipo, escolher qual menu exibir e criar uma mensagem de comunicado.

A barra de cabeçalho no site chamada John's Apparel mostra os itens do menu principal, um ícone de pesquisa e um ícone de carrinho

Para personalizar a seção Cabeçalho:

  1. Ao lado de Debut, clique em Personalizar.

  2. Clique em Seções.

  3. Clique em Cabeçalho.

  4. Para definir o alinhamento do seu logotipo, na área Alinhamento do logotipo, selecione Esquerda ou Centralizado. Se você não adicionar uma imagem de logotipo, o nome de sua loja será exibido como texto. Você pode alterar o nome da sua loja na página Configurações gerais no admin.

  5. Para adicionar um logotipo, na área Imagem do logotipo, clique em Selecionar imagem. Para carregar uma imagem do seu computador, clique em Carregar. Para usar uma imagem gratuita do Burst, clique em Imagens gratuitas.

  6. Para alterar o tamanho do seu logotipo, ajuste o controle deslizante Largura do logotipo personalizado para a largura desejada. O ajuste da largura do logotipo não distorcerá a imagem do logotipo.

  7. Para escolher qual menu exibir no cabeçalho, na área Menu, clique em Alterar. Escolha um menu existente ou crie um novo clicando no menu Criar. Se você não quiser mostrar um menu no cabeçalho, clique em Remover.

  8. Para mostrar uma mensagem de comunicado no topo da página, siga os seguintes passos:

  9. Na área da Barra de avisos, marque Exibir comunicado.

  10. Para mostrar o comunicado apenas na página inicial, marque Apenas na página inicial. Caso contrário, o comunicado será exibido em todas as páginas da sua loja.

  11. Digite o texto do comunicado no campo Texto.

  12. Para adicionar um link ao seu comunicado, insira a URL no campo Link.

  13. Para alterar a cor do plano de fundo da barra de avisos, clique na amostra de cor da barra e escolha uma cor.

  14. Para alterar a cor do texto do comunicado, clique na amostra de cor do texto e escolha uma cor.

  15. Clique em Salvar.

Rodapé

O rodapé do tema é a seção que aparece na parte inferior de todas as páginas de sua loja. Adicione os seguintes recursos ao rodapé:

  • ícones de pagamento
  • links rápidos
  • uma assinatura da newsletter
  • Uma seção de texto com informações sobre sua empresa
  • ícones de redes sociais
  • um seletor de idioma
  • um seletor de moeda

A seção de rodapé de um site que exibe um menu, uma assinatura de newsletter e o texto de direitos autorais.

Adicionar ícones de pagamento

No rodapé, é possível exibir ícones das formas de pagamento aceitas. Nessa área são exibidos os ícones associados ao provedor de pagamento habilitado na seção Configurações de pagamento do admin.

  1. Ao lado de Debut, clique em Personalizar.

  2. Clique em Seções.

  3. Clique em Rodapé.

  4. Marque a opção Exibir ícones de pagamento.

  5. Clique em Salvar.

Adicionar um menu, uma assinatura da newsletter ou um texto

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Desktop</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>No admin da Shopify, acesse <strong>Loja virtual</strong> &gt; <strong>Temas</strong>.
</li></ol></div><div class="iphone changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div><div class="android changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div>
</div>



1. Ao lado de **Debut**, clique em **Personalizar**.
  1. Clique em Seções.

  2. Clique em Rodapé.

  3. Adicione um bloco de conteúdo na área Conteúdo, clicando em Adicionar conteúdo. Selecione uma das seguintes opções de bloco de conteúdo:

- Menu - Newsletter - Texto

É possível adicionar até 4 blocos de conteúdo.

Para mover um bloco de conteúdo, clique no ícone ⋮⋮ e arraste o bloco para outro local.

Para remover um bloco de conteúdo, clique no bloco e, depois, clique em Remover conteúdo.

Para personalizar um bloco de conteúdo, clique no bloco e edite as configurações.

  1. Clique em Salvar.

Adicionar ícones de redes sociais

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Desktop</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>No admin da Shopify, acesse <strong>Loja virtual</strong> &gt; <strong>Temas</strong>.
</li></ol></div><div class="iphone changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div><div class="android changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div>
</div>



1. Ao lado de **Debut**, clique em **Personalizar**.
  1. Clique em Seções.

  2. Clique em Rodapé.

  3. Clique na seção Configurações do tema.

  4. No campo de redes sociais relevantes, insira a URL para seu perfil.

  5. Clique em Salvar.

Adicionar um seletor de idioma

Adicione um seletor de idiomas apenas se você tiver habilitado vários idiomas da loja.

  1. Ao lado de Debut, clique em Personalizar.

  2. Clique em Seções.

  3. Clique em Rodapé.

  4. Em Seletor de idiomas, escolha a opção Mostrar seletor de idiomas.

  5. Clique em Salvar.

Adicionar um seletor de moeda

Adicione um seletor de moeda apenas se você tiver habilitado a opção várias moedas.

  1. Ao lado de Debut, clique em Personalizar.

  2. Clique em Seções.

  3. Clique em Rodapé.

  4. Em Seletor de moeda, marque a opção Mostrar seletor de moeda.

Páginas de produtos

Na seção Páginas de produto, você pode adicionar ou remover os seguintes elementos:

  • Um seletor de quantidade
  • Etiquetas de variantes
  • A marca ou fornecedor do produto
  • Zoom de imagem
  • Um botão de checkout dinâmico
  • Botões de compartilhamento em redes sociais
  • Recomendações de produtos

Também é possível definir o tamanho de suas imagens.

Editar as configurações da página do produto

  1. No menu suspenso da barra superior, selecione Páginas de produto.

  2. Clique em Seções.

  3. Clique em Páginas do produto.

  4. Para definir o tamanho de suas imagens, selecione um tamanho de imagem no menu suspenso Tamanho de imagem.

  5. Para mostrar um seletor de quantidade, marque Exibir seletor de quantidade.

  6. Para mostrar as etiquetas de variantes, como "Tamanho" e "Cor", marque Exibir etiquetas de variantes. As etiquetas de variantes exibidas são baseadas nos nomes das opções das variantes do produto.

  7. Para mostrar a marca ou o fornecedor do produto, marque Exibir fornecedor. Para exibir uma marca ou fornecedor, é preciso adicionar um fornecedor ao produto.

  8. Para permitir que os clientes aumentem o zoom passando o mouse sobre a imagem do produto, marque Habilitar o zoom da imagem.

  9. Para mostrar um botão de checkout dinâmico, marque Exibir botão de checkout dinâmico.

  10. Para mostrar os botões de compartilhamento em redes sociais, marque Exibir botões de compartilhamento em redes sociais.

  11. Clique em Salvar.

Adicionar ou remover recomendações de produtos

Você pode Exibir produtos recomendados em páginas de produto para facilitar aos clientes a descoberta de outros produtos que possam interessá-los.

  1. No menu suspenso da barra superior, selecione Páginas de produto.

  2. Clique em Recomendações de produto.

  3. Use a caixa de seleção Exibir recomendações dinâmicas para mostrar ou ocultar recomendações de produtos em suas páginas de produtos.

  4. Opcional: para alterar o título que aparece acima dos produtos recomendados, insira outro no campo Título.

  5. Opcional: para mostrar ou ocultar os fornecedores nas descrições do produto, use a caixa de seleção Exibir fornecedor.

  6. Clique em Salvar.

Páginas de coleções

É possível configurar as páginas de coleção para permitir que os clientes filtrem e organizem os produtos em exibição. Você pode escolher um layout de coleção, uma grade ou uma lista e escolher quantos produtos exibir.

Para definir o layout das suas páginas de coleções:

  1. Navegue até uma página de coleção no editor de temas.

  2. Clique na aba Seções.

  3. Clique em Páginas de coleções.

  4. Na lista Layout, selecione Grade ou Lista.

  5. Selecione o número de produtos por linha e o número de linhas por página (se você selecionou o estilo de grade) nas listas.

  6. Se desejar exibir uma imagem da coleção na parte superior da página, marque Exibir imagem da coleção.

  7. Para mostrar a marca ou o fornecedor do produto, marque Exibir fornecedores de produtos.

  8. Marque Habilitar organização para exibir um menu de organização.

  9. Marque Habilitar filtragem de tags para permitir que seus clientes filtrem a coleção por tag de produto.

  10. Clique em Salvar.

Página da lista de coleções

A página da lista de coleções exibe uma grade com todas as coleções de produtos. Essa grade possibilita que os clientes encontrem rapidamente a coleção que eles querem visualizar. No Debut, a página da lista de coleções é um link de nível superior no menu de cabeçalho.

Você pode exibir miniaturas de todas as suas coleções em um padrão de grade ou optar por mostrar uma coleção selecionada. Você também pode escolher como organizar coleções na página.

Para definir o layout da sua página da lista de coleções:

  1. Navegue até a página da sua lista de coleções clicando no item de menu de nível superior da coleção.

  2. Clique na aba Seções.

  3. Clique na página da lista de coleções.

  4. Realize uma das seguintes ações:

    1. Para mostrar miniaturas de todas as suas coleções em um padrão de grade, selecione Todas.
    2. Para mostrar uma coleção na página da lista de coleções, selecione Selecionada.
  5. Se você selecionou Todas na etapa anterior, faça o seguinte:

    1. Escolha uma opção de organização na lista Organizar coleções por.
    2. Escolha o número de coleções por linha na lista Coleções por linha.
  6. Clique em Salvar.

Páginas do blog

Com o Debut, você pode listar seus artigos do blog ou exibi-los em uma grade. Se você tiver mais de um autor de artigos no blog, poderá exibir o nome do autor para cada artigo. Também é possível exibir a data em que cada artigo foi publicado.

  1. Navegue até a página do seu blog na área de visualização do editor de temas.

  2. Clique em Seções.

  3. Clique nas páginas do Blog.

  4. Na lista Layout, selecione se deseja exibir artigos do blog em uma lista ou grade.

  5. Marque Exibir autor para exibir o nome do autor.

  6. Marque Exibir data para exibir a data em que o artigo foi publicado.

  7. Clique em Salvar.

Página do carrinho

Na seção Página do carrinho , você pode habilitar as seguintes configurações:

  • Observações do carrinho
  • Atualizações automáticas de carrinho

Adicionar observações ao carrinho

Permita que os clientes adicionem observações ao pedido na página do carrinho.

  1. No menu suspenso da barra superior, selecione Carrinho.

  2. Clique na aba Seções.

  3. Clique em Página do carrinho.

  4. Marque Habilitar observações do carrinho.

  5. Clique em Salvar.

Permitir atualizações automáticas do carrinho

O carrinho pode exibir as informações atualizadas assim que o cliente fizer alterações no pedido. Por exemplo, o preço subtotal pode ser atualizado quando o cliente alterar a quantidade de itens no carrinho. Para habilitar as atualizações automáticas do carrinho:

  1. No menu suspenso da barra superior, selecione Carrinho.

  2. Clique na aba Seções.

  3. Clique em Página do carrinho.

  4. Marque Permitir atualizações automáticas do carrinho.

  5. Clique em Salvar.

Coleção em destaque

Você pode destacar uma coleção na sua página inicial. Destacar coleções pode ajudar você a promover vendas e novas coleções.

Com o Debut, você pode adicionar um botão "Visualizar tudo" para permitir que os clientes vejam a coleção inteira e pode exibir o nome do fornecedor abaixo de cada imagem do produto.

Para destacar uma coleção na sua página inicial:

  1. Clique na aba Seções.

  2. Clique na seção Coleção em destaque.

  3. Se você quiser alterar o texto exibido acima da coleção, insira o texto no campo Título.

  4. Na lista Coleção, selecione a coleção que deseja exibir. Para adicionar ou remover produtos da coleção selecionada, clique no link Editar coleção para abrir a página Coleções em uma nova aba.

  5. Na lista Produtos por linha, selecione o número de produtos a serem exibidos em cada linha.

  6. Na lista Linhas, selecione o número de linhas de produtos a serem exibidas.

  7. Se quiser exibir o nome do fornecedor ou da marca abaixo de cada imagem do produto, marque Exibir fornecedor do produto.

  8. Se quiser permitir que os clientes visualizem todos os produtos da coleção, marque o botão Exibir "Visualizar todos".

  9. Clique em Salvar.

Imagem com texto

Com o Debut, você pode adicionar uma imagem com texto exibido à direita ou à esquerda da imagem. Você também pode adicionar um botão com um link para uma página em sua loja:

Normalmente, você usaria uma seção Imagem com texto para promover um produto ou coleção, ou levar tráfego do site para a página do seu blog.

Para adicionar uma seção de imagem com texto à sua página inicial:

  1. Clique na aba Seções.

  2. Clique na seção Imagem com texto.

  3. Na área Imagem, clique em Selecionar imagem e siga um destes procedimentos:

- To select an image you have already uploaded to your Shopify admin, click the **Library** tab.
- To select a stock image from [Shopify's Burst stock image collection](https://burst.shopify.com/), click the **Free images** tab. From here you can enter a search term, or browse the image categories.
- To select an image from your local computer, click the **Library** tab, and then click the plus button.
  1. Na lista Layout, selecione se deseja que a imagem apareça à direita ou à esquerda do texto.

  2. Digite um novo título para esta seção no campo Título.

  3. Digite o texto que você deseja exibir abaixo do título no campo Texto.

  4. No campo Etiqueta de botão, insira o texto que você deseja que apareça no botão.

  5. No campo Link de botão, selecione uma página na loja para onde o botão fará link.

  6. Clique em Salvar.

Imagem com sobreposição de texto

Você pode destacar uma imagem grande com uma sobreposição de texto personalizado em sua página inicial.

A seção de imagem com texto apresenta as seguintes configurações:

  • Imagem: selecione uma imagem para adicionar à seção.
  • Alinhamento da imagem: defina o lado da página no qual você deseja exibir a imagem.
  • Layout: defina a largura da seção.
  • Altura da seção: defina a altura da seção. Para evitar o corte das imagens, selecione Adaptar à imagem, que define a altura da seção de acordo com a altura da sua imagem.
  • Tamanho do texto: defina o tamanho do texto.
  • Título: adicione um título à seção.
  • Texto: adicione um texto à seção. A seção Imagem com sobreposição de texto é renomeada automaticamente para o título que você inserir.
  • Etiqueta de botão: adicione um botão com uma etiqueta de texto à seção.
  • Link de botão: vincule o botão à outra página ou site.

Adicione uma seção de imagem com texto à sua página inicial

  1. Ao lado de Debut, clique em Personalizar.

  2. Clique em Adicionar seção > Imagem com texto > Adicionar.

  3. Utilize as configurações para personalizar a seção de imagem com sobreposição de texto.

  4. Clique em Salvar.

Newsletter

Você pode adicionar uma assinatura de newsletter à sua página inicial. Isso permite coletar endereços de e-mail de clientes para campanhas de e-mail marketing. Saiba mais sobre e-mail marketing no blog da Shopify.

A seção de newsletter em um site. Há um campo para os clientes inserirem um e-mail e um botão que diz

Para adicionar uma assinatura de newsletter à sua página inicial:

  1. Ao lado de Debut, clique em Personalizar.

  2. Clique em Seções.

  3. Clique em Adicionar seção > Newsletter.

  4. Insira um título para a assinatura de newsletter no campo Título. O título padrão é "Assine nossa newsletter".

  5. Insira um subtítulo para a assinatura de newsletter no campo Subtítulo.

  6. Clique em Salvar.

Vídeo

Você pode adicionar um vídeo do YouTube à sua página inicial. Os vídeos podem envolver seus clientes e gerar interesse em relação à sua empresa.

A seção de vídeo apresenta as seguintes configurações:

  • Altura do vídeo: defina a altura do seu vídeo.
  • Tamanho do texto: adicione texto ao seu vídeo. Se você definir o estilo de vídeo como Imagem com botão de reprodução, o texto será removido enquanto o vídeo é reproduzido.
  • Exibir sobreposição: adicione uma camada de cor ao seu vídeo para facilitar a leitura do texto. Se você definir o estilo de vídeo como Imagem com botão de reprodução, a sobreposição será removida enquanto o vídeo é reproduzido.
  • Estilo: defina o estilo do vídeo. O estilo vídeo em segundo plano está disponível somente em desktop. Se os clientes visitarem sua loja usando um tablet ou dispositivo móvel, eles sempre verão o estilo Imagem com botão de reprodução.
  • Título: adicione um título ao seu vídeo.
  • Link do vídeo: adicione a URL do YouTube do seu vídeo.
  • Imagem de capa: adicione uma imagem de capa ao seu vídeo. A imagem de capa fica oculta enquanto o vídeo é reproduzido.
  • Alinhamento de imagem: alinhe a imagem de capa para que a parte mais importante esteja sempre visível.

Adicionar um vídeo à sua página inicial

  1. Ao lado de Debut, clique em Personalizar.

  2. Clique em Adicionar seção > Vídeo.

  3. Utilize as configurações para personalizar a seção de vídeo.

  4. Clique em Salvar.

Apresentação de slides

Você pode adicionar uma apresentação de slides de imagens à sua página inicial. Na seção de apresentação de slides, é possível definir a altura dos slides, adicionar texto e botões e escolher se a apresentação de slides será reproduzida automaticamente.

A página inicial de uma loja virtual chamada Pure Tea, com uma apresentação de slides. Um slide de uma xícara de chá sobre um balcão é mostrado com o título

Para saber mais sobre o corte de imagem na apresentação de slides e sobre os tamanhos de imagem recomendados, consulte as diretrizes abaixo.

Para criar uma apresentação de slides:

  1. Ao lado de Debut, clique em Personalizar.

  2. Clique em Seções.

  3. Clique em Apresentação de slides.

  4. Defina a altura de seus slides no menu suspenso Altura do slide.

    Saiba como a altura do slide afeta sua apresentação de slides.

  5. Defina o tamanho de seus títulos e subtítulos no menu suspenso Tamanho do texto.

  6. Defina a posição do texto nos slides no menu suspenso Alinhamento do texto.

  7. Opcional: marque Exibir sobreposição. Uma sobreposição de imagens é uma camada de cor entre uma imagem e qualquer texto colocado sobre ela. As sobreposições podem ajudar no contraste de cores e na legibilidade. Você pode definir a cor e a opacidade da sobreposição nas configurações de cor.

  8. Opcional: marque Girar os slides automaticamente para reproduzir a apresentação de slides automaticamente. Selecione quanto tempo cada slide deve ser exibido usando o controle deslizante Mudar os slides a cada.

  9. Para adicionar um slide de imagem, siga as etapas abaixo:

    1. Na área Conteúdo, clique em Adicionar slide de imagem.
    2. Em Imagem, clique em Selecionar imagem. Para carregar uma imagem do seu computador, clique em Carregar. Para usar uma imagem gratuita do Burst, clique em Imagens gratuitas.
    3. Para escolher como você deseja alinhar a imagem na apresentação de slides, selecione uma posição no menu suspenso Posição da imagem. Saiba mais sobre a posição da imagem nas diretrizes abaixo.
    4. Para adicionar texto ao slide de imagem, insira o texto no campo Título, no campo Subtítulo ou em ambos.
    5. Adicione um botão ao slide de imagem digitando o texto no campo de Etiqueta de botão de texto. Selecione uma parte da loja virtual para vincular o botão no campo Link de botão.
  10. Clique em Salvar.

Diretrizes de apresentação de slides

Utilize as configurações e as recomendações de imagem abaixo para controlar a aparência da apresentação de slides na sua loja virtual. A maneira como os slides aparecem é determinada pelos seguintes fatores:

  • as dimensões de suas imagens
  • suas configurações de posição da imagem
  • suas configurações de altura do slide
  • a proporção entre largura e altura de suas imagens

Devido às diferenças de tamanho e forma da tela, seus slides podem ter uma aparência diferente em dispositivos móveis e computadores.

Recomendações de tamanho de imagem

As dimensões recomendadas para as imagens da apresentação de slides dependem de suas configurações de altura do slide. Siga estas diretrizes:

Recomendações de tamanho da imagem por configuração
Configuração de altura do slide Largura recomendada Altura recomendada
Adaptar à primeira imagem 1200 px 600 px
Pequeno 1200 px 475 px
Médio 1200 px 489 px
Grande 1200 px 775 px

Para ver ou alterar as configurações de altura do slide, consulte a etapa 5 das instruções para criar uma apresentação de slides.

Corte de imagens

Você pode tomar medidas para controlar a maneira como suas imagens são cortadas ou para evitar completamente o corte de imagens.

Controlar como suas imagens são cortadas

O corte de imagens é esperado em alguns tamanhos de tela nas seguintes situações:

  • Suas imagens não têm a mesma proporção entre largura e altura.
  • A altura de seus slides está definida como Pequena, Média ou Grande.
  • A altura do seu slides está definida como Adaptar à primeira imagem e suas imagens são mais altas que a tela do dispositivo ou a janela do navegador.

A configuração Posição da imagem define como as imagens são cortadas.

Escolha em cada imagem a parte que você quer exibir quando ocorre o corte. Veja no exemplo a seguir como a mesma imagem pode ser cortada em alguns tamanhos de tela. O slide à esquerda mostra a posição da imagem definida como Meio centro. No slide à direita, a posição da imagem está definida como Superior esquerdo.

Exemplo de um slide recortado de forma diferente, dependendo da configuração da posição da imagem.

Para ver ou alterar as configurações de posição da imagem, consulte a etapa 10 das instruções para criar uma apresentação de slides.

Evite o corte de imagens

Para evitar o corte de imagens em sua apresentação de slides, tente as seguintes etapas:

  • Defina a altura do slide como Adaptar à primeira imagem.
  • Use imagens com uma largura que seja o dobro da altura. Essas imagens têm uma proporção entre largura e altura de 2:1. As dimensões recomendadas são 1200 px por 600 px.
  • Assegure-se de que todos os seus slides têm a mesma proporção entre largura e altura. A proporção de seus slides é mais importante do que as dimensões em pixels.

No exemplo a seguir, uma imagem de apresentação de slides com proporção de 2:1 é exibida num computador e num dispositivo móvel:

Um slide é exibido num computador e num dispositivo móvel sem cortes.

Altura do slide

A largura da seção da apresentação de slides é sempre 100% da janela do navegador. A altura dos seus slides é relativa à largura. Por causa das diferenças no tamanho das telas, a largura e a altura dos slides variam nos diferentes dispositivos. A altura dos slides também é influenciada pelas configurações de altura do slide.

Utilize a configuração de altura do slide Adaptar à primeira imagem para basear a altura da apresentação de slides na altura de sua primeira imagem. Essa configuração funciona melhor quando todas as imagens são do mesmo tamanho ou têm a mesma proporção entre largura e altura. Se as imagens tiverem tamanhos diferentes ou proporções diferentes, você poderá alterar a ordem dos slides para verificar a aparência deles em alturas diferentes.

No exemplo a seguir, o menor slide é posicionado primeiro:

Um slide menor determina a altura dos outros dois slides. Como os outros slides são mais altos, eles são cortados na parte superior e inferior.

No próximo exemplo, um slide mais alto é posicionado primeiro:

Um slide de altura média determina a altura dos outros dois slides. O slide mais alto é cortado na parte superior e inferior. O slide mais curto é cortado nas laterais.

Se, em vez disso, você usar as configurações de altura Pequena, Média ou Grande, consulte as recomendações de tamanho de imagem para seus slides.

Proporções da imagem

Se quiser evitar o corte de imagens em sua apresentação de slides, a proporção entre largura e altura recomendada para as imagens é de 2:1.

Se você não estiver preocupado com cortes nas telas de computadores e quiser causar impacto nos dispositivos móveis, use imagens quadradas ou imagens mais altas do que largas. O exemplo de slide a seguir mostra uma imagem quadrada, com uma proporção entre largura e altura de 1:1.

Um slide quadrado é exibido num computador e num dispositivo móvel. A imagem é cortada no dispositivo de mesa, mas não no dispositivo móvel.

O exemplo de slide a seguir mostra uma imagem na orientação retrato com uma proporção entre largura e altura de 2:3.

Um slide alto é exibido num computador e num dispositivo móvel. A imagem é cortada no dispositivo de mesa, mas não no dispositivo móvel.

Pronto para começar a vender com a Shopify?

Experimente de graça