Seções do Debut

O conteúdo do tema é criado usando blocos personalizáveis de conteúdo que determinam o layout e a aparência de diferentes páginas da loja virtual e são denominados seções.

As seções estáticas aparecem em locais predeterminados da loja virtual e não podem ser removidas ou reorganizadas. São ocupadas por cabeçalhos, rodapés, seções de navegação ou seções de conteúdo em páginas como páginas de produto e páginas de coleção. Por exemplo, a seção Produto determina a aparência de cada página de produto da loja virtual.

As seções dinâmicas são opcionais e servem para personalizar a página inicial. O layout é criado com até 25 seções dinâmicas, que podem ser adicionadas, reorganizadas e removidas.

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

Seções estáticas

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

  • Cabeçalho
  • Rodapé
  • Páginas de produtos
  • Recomendações 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

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
  • Produto em destaque
  • Newsletter
  • Mapa
  • Rich text
  • Depoimentos
  • Texto em coluna com imagens
  • Vídeo
  • Conteúdo personalizado
  • Apresentação de slides

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.

Adicionar um logotipo personalizado

É possível adicionar uma imagem do logotipo personalizado ao cabeçalho da loja. O melhor formato é um arquivo .png de fundo transparente. É possível redimensionar a imagem do logotipo ajustando a largura.

  1. Clique em Cabeçalho. 5. Na área Imagem do logotipo, clique em Selecionar imagem e siga um destes procedimentos: * Para selecionar uma imagem já carregada no admin da Shopify, clique na aba Biblioteca. * Para selecionar uma imagem no computador local, clique em Biblioteca > Carregar. 6. Use o controle deslizante Largura do logotipo personalizado para personalizar esse valor. 7. Para definir o alinhamento do logotipo, na área Alinhamento do logotipo, selecione À esquerda ou Centralizado. Se você não adicionar uma imagem de logotipo, o nome da loja será exibido como texto. É possível alterá-lo na página Configurações gerais no admin da Shopify. 8. Clique em salvar.

Adicionar uma barra de comunicados

Para exibir uma mensagem aos clientes, adicione uma barra de comunicados ao cabeçalho. O texto é personalizável e pode incluir informações de contato, eventos, promoções ou o slogan da loja.

  1. Clique em Cabeçalho. 5. Na área Barra de comunicados, marque a opção Exibir comunicado. Selecione Somente na página inicial para exibir o comunicado só na página inicial. 6. Digite o texto do comunicado. 7. Opcional: insira uma URL para adicionar um link ao comunicado. 9. Para alterar a cor do plano de fundo da barra de comunicados, escolha uma opção na amostra de cores Barra. 10. Para alterar a cor do texto do comunicado, escolha uma opção na amostra de cores Texto. 11. Clique em salvar.

Adicionar um menu

Adicione um menu ao cabeçalho para exibir todos os links e use essa função para destacar as páginas que os clientes acessam com mais frequência. Por exemplo, adicione um menu que contenha links para as coleções.

  1. Clique em Cabeçalho.

  2. Para selecionar um menu, clique em Alterar. Selecione um menu na lista ou clique em Criar menu para gerar um novo.

  3. Para editar o menu, clique em Editar menu.

  4. 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

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. Clique em Rodapé.

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

  3. Clique em salvar.

Adicionar um menu, uma assinatura da newsletter ou um texto

  1. Clique em Rodapé.

  2. 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é quatro blocos de conteúdo.

    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

Quando você adiciona uma conta de redes sociais às configurações de tema, ela é exibida automaticamente no rodapé.

Adicionar um seletor de idioma

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

  1. Clique em Seções.

  2. Clique em Rodapé.

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

  4. 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. Clique em Rodapé.

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

  3. Clique em salvar.

Páginas de produtos

Páginas de produto é a principal seção personalizável para páginas de produto. Se a retirada no local estiver habilitada, a seção exibirá também a disponibilidade de retirada do produto.

Personalize essa seção usando as seguintes opções:

  • Exibir seletor de quantidade - permita que os usuários especifiquem uma quantidade a adicionar ao carrinho.
  • Exibir etiquetas de variantes: mostre etiquetas como "Tamanho" e "Cor" acima dos menus suspensos das variantes. As etiquetas de variantes exibidas são baseadas nos nomes das opções das variantes do produto.
  • Exibir fornecedor: mostre a marca ou o fornecedor do produto. Adicione um fornecedor ao produto para ver essas informações.
  • Exibir o botão de checkout dinâmico: deixe os clientes pularem o carrinho e irem direto para o checkout na seção de produto em destaque.
  • Exibir botões de compartilhamento em redes sociais: mostre os botões que os clientes podem usar para compartilhar produtos nas redes sociais. As opções de compartilhamento exibidas são controladas nas configurações de tema.

Mídia

  • Tamanho: defina o tamanho da mídia de produto.
  • Habilitar o zoom da imagem: permita que os clientes aumentem o zoom passando o mouse sobre a imagem do produto.
  • Habilitar loop de vídeo: selecione essa opção para colocar os vídeos de produtos em loop. Caso contrário, um botão de reprodução aparecerá no fim do vídeo.

Editar as configurações de páginas de produtos

  1. Selecione Páginas de produtos.
  2. Clique na seção Páginas de produtos.
  3. Utilize as configurações para personalizar a seção de páginas de produto.
  4. Clique em salvar.

Mostrar disponibilidade de retirada

O Debut permite mostrar aos clientes se um produto da loja virtual está disponível para retirada no local. Uma seção específica na página de cada produto informa se o item está disponível nessa modalidade de entrega e qual é o prazo previsto. Para usar o recurso, configure a retirada no local. Depois de habilitada, a seção estará sempre visível nas páginas de produto e não poderá ser desabilitada.

Depois da habilitação da retirada no local, a página do produto informa a disponibilidade para retirá-lo nos locais que oferecem esse serviço. Essa informação é exibida apenas para produtos que estão armazenados em pelo menos um local de retirada e que têm Este é um produto físico selecionado na seção Frete das informações de variante do produto.

  1. No admin da Shopify, acesse Produtos > Todos os produtos.

  2. Selecione um produto.

  3. Em Variantes, selecione uma variante.

  4. Em Frete, selecione Este é um produto físico.

  5. Clique em Salvar.

Se a retirada está habilitada em um único local, a disponibilidade informada se refere apenas a ele. Os clientes podem clicar em Ver as informações da loja para saber mais sobre o local de retirada.

Se a retirada está habilitada em mais de um local, a seção de disponibilidade exibe as informações do local mais próximo do cliente, determinado de acordo com o endereço IP. Quando o cliente clica em Verificar a disponibilidade em outras lojas, a lista de locais de retirada é ordenada conforme a distância do cliente.

Caso a localização do cliente não possa ser determinada por meio do endereço IP, a seção de disponibilidade de retirada exibirá o local e a disponibilidade em ordem alfabética, primeiro por cidade e depois por nome do local. Vamos supor, por exemplo, que você tenha três locais de retirada: "Queen Street" em Toronto, "Front Street" em Toronto e "Alberni Street" em Vancouver. A seção de disponibilidade de retirada exibirá as informações de "Front street" em Toronto.

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.

Habilitar recomendações de produtos

  1. Selecione Páginas de produtos.

  2. Clique na seção Recomendações de produto.

  3. Marque a opção Exibir recomendações dinâmicas para mostrar recomendações nas páginas de produtos.

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

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

Páginas de coleções

Páginas de coleções é a principal seção personalizável para páginas de coleções

e conta com as seguintes configurações:

  • Layout: escolha a maneira como os produtos são organizados na página de coleção.
  • Produtos por linha (somente grade): escolha o número de produtos a serem exibidos em cada linha da página de coleção. Essa configuração só será exibida se o Layout estiver definido como Grade.
  • Linhas por página (somente grade): escolha o número de linhas de produtos a serem exibidas na página de coleção. Essa configuração só será exibida se o Layout estiver definido como Grade.
  • Exibir imagem da coleção: mostre a imagem da coleção na parte superior da página de coleção.
  • Exibir fornecedores do produto: mostre o fornecedor de cada produto abaixo do título do produto.
  • Habilitar organização: permita que os clientes organizem os produtos nas páginas de coleções.
  • Habilitar filtragem de tag: permita que os clientes filtrem a coleção por tag de produto.

Editar as configurações de páginas de coleções

  1. Selecione Páginas de coleções.
  2. Clique na seção Páginas de coleções.
  3. Utilize as configurações para personalizar a seção de páginas de coleção.
  4. Clique em salvar.

Página da lista de coleções

Os clientes podem usar a página da lista de coleções para encontrar a coleção que querem pesquisar. A página pode exibir todas as coleções da loja ou exibir um grupo de coleções selecionado.

A seção da página da lista de coleções apresenta as seguintes configurações:

  • Coleção: escolha as coleções que você quer mostrar na página da lista de coleções. Essas informações só serão usadas se a opção Selecionar coleções para exibir estiver Selecionada.
  • Selecionar coleções para exibir: selecione as coleções a serem exibidas.
  • Organizar coleções por: defina como as coleções são organizadas. Use essa configuração somente se a opção Selecionar coleções para exibir estiver marcada como Todas.
  • Coleções por linha: defina o número de coleções a serem exibidas em cada linha na página da lista de coleções.

Personalizar a seção da página da lista de coleções

  1. Selecione a Lista de coleções.
  2. Clique na seção Página da lista de coleções.
  3. Opcional: na área Conteúdo, clique em Adicionar coleção para incluir coleções na página da lista de coleções.
  4. Utilize as configurações para personalizar a seção da página da lista de coleções.
  5. Clique em salvar.

Páginas do blog

Páginas do blog é a principal seção personalizável de uma página de blog, porque lista todos os posts publicados em seu blog. É possível listar os artigos ou exibi-los em uma grade. Tanto a exibição de lista quanto a de grade mostram o título e, se disponível, um trecho do post do blog. Se não houver um trecho disponível, serão exibidas as primeiras frases da publicação.

A seção de páginas do blog apresenta as seguintes configurações:

  • Layout: escolha Lista ou Grade.
  • Exibir autor: mostre o nome do autor abaixo do título do post do blog.
  • Exibir data exiba a data de publicação abaixo do título do post do blog.

Personalizar a seção de páginas do blog

  1. Selecione Blogs. 2. Clique na seção Páginas do blog. 3. Use as configurações para personalizar a seção de posts. 4. Clique em salvar.

posts

As páginas de posts do blog exibirão posts individuais. A seção de Posts apresentará as seguintes configurações:

  • Exibir autor: mostre o nome do autor abaixo do título do post do blog.
  • Exibir data: mostre a data de publicação abaixo do título do post do blog.
  • Exibir botões de compartilhamento em redes sociais: selecione essa opção para mostrar botões de compartilhamento em redes sociais nos posts do blog. Escolha as plataformas que podem ser usadas nas configurações de redes sociais.

Personalizar a seção de posts

  1. Selecione Posts do blog.
  2. Clique na seção Posts.
  3. Use as configurações para personalizar a seção de posts.
  4. Clique em salvar.

Página do carrinho

A seção de Página do carrinho apresenta as seguintes configurações:

  • Habilitar atualizações automáticas do carrinho: selecione essa opção para atualizar o carrinho assim que o cliente fizer alterações no pedido. Por exemplo, o preço subtotal pode ser atualizado quando o cliente altera a quantidade de itens no carrinho.
  • Habilitar observações do carrinho: essa opção é chamada de Observações do pedido em alguns temas.

Personalizar a seção da página do carrinho

  1. Selecione Carrinho. 2. Clique na seção Página do carrinho. 3. Personalize a seção da página do carrinho nas configurações. 4. 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.

A seção Coleção em destaque apresenta as seguintes configurações:

  • Título: insira o texto que aparece acima dos produtos na coleção. O texto padrão é Coleção em destaque.
  • Coleção: escolha a coleção a ser exibida na seção.
  • Produtos por linha: defina o número de produtos a serem exibidos em cada linha da seção.
  • Linhas: defina o número de linhas de produtos a serem exibidas na seção.
  • Exibir fornecedor do produto: mostre o fornecedor de cada produto abaixo do título do produto.
  • Exibir botão "Ver tudo": selecione esta opção para adicionar um botão Ver tudo abaixo da última linha da seção. Os clientes clicam nele para ver a coleção completa.

Adicionar uma coleção em destaque à sua página inicial

  1. Clique em Adicionar seção. 2. Clique em Coleções em destaque e, depois, em Selecionar. 3. Clique em Selecionar coleção e escolha uma disponível na lista Coleção. A coleção selecionada exibirá até 50 produtos. 4. Use as configurações para personalizar a seção de coleção em destaque. 5. Clique em salvar.

Imagem com texto

Com o Debut, é possível adicionar uma imagem com texto exibida à direita ou à esquerda. Você também pode adicionar um botão com link para outra página.

Você pode usar uma seção de imagem com texto para anunciar uma coleção ou produto específico.

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

  • Imagem: adicione ou selecione a imagem a ser incluída na seção. É possível fazer o upload de uma imagem, usar uma carregada anteriormente ou selecionar uma imagem gratuita no banco do Burst.
  • Alinhamento da imagem: escolha se a imagem na seção aparecerá à esquerda ou à direita.
  • Título: adicione o texto primário que estará junto da imagem.
  • Texto: adicione o texto secundário que estará junto da imagem. Ele é exibido abaixo do título.
  • Etiqueta de botão: adicione o texto que você quer exibir no botão.
  • Link de botão: defina a URL ou a página que você quer vincular ao botão. Cole a URL ou selecione uma página no menu. Se você não quiser incluir um botão na seção, deixe esse campo em branco.

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

  1. Clique em Adicionar seção. 3. Clique em Imagem com texto e, depois, em Selecionar. 4. Na área Imagem, clique em Selecionar imagem e siga um destes procedimentos: - Para selecionar uma imagem que você já enviou para o admin da Shopify, clique na aba Biblioteca.
    • Para selecionar uma imagem do banco da Burst, clique na aba Imagens gratuitas. Lá é possível inserir um termo para pesquisa ou navegar por categorias de imagem.
    • Para selecionar uma imagem no computador local, clique na aba Biblioteca e, depois, em Carregar.
  2. Use as configurações para personalizar a seção. 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 sobreposição de texto apresenta as seguintes configurações:

  • Imagem: escolha a imagem a ser incluída na seção. É possível fazer o upload de uma imagem, usar uma carregada anteriormente ou selecionar uma imagem gratuita no banco do Burst.
  • Alinhamento da imagem: escolha se a imagem na seção aparecerá à esquerda ou à direita.
  • 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 texto primário para ser exibido junto com a imagem. A seção Imagem com sobreposição de texto é renomeada automaticamente com o título definido.
  • Texto: adicione o texto secundário que estará junto da imagem. Ele é exibido abaixo do título.
  • Etiqueta de botão: adicione o texto que você quer exibir no botão.
  • Link de botão: defina a URL ou a página que você quer vincular ao botão. Cole a URL ou selecione uma página no menu. Se você não quiser incluir um botão na seção, deixe esse campo em branco.

Adicionar uma imagem com sobreposição de texto à página inicial

  1. Clique em Adicionar seção. 2. Clique em Imagem com sobreposição de texto e, depois, em Selecionar. 3. Na área Imagem, clique em Selecionar imagem e siga um destes procedimentos: - Para selecionar uma imagem que você já enviou para o admin da Shopify, clique na aba Biblioteca.
    • Para selecionar uma imagem do banco da Burst, clique na aba Imagens gratuitas. Lá é possível inserir um termo para pesquisa ou navegar por categorias de imagem.
    • Para selecionar uma imagem no computador local, clique na aba Biblioteca e, depois, em Carregar.
  2. Use as configurações para personalizar a seção da imagem com sobreposição de texto. 5. Clique em salvar.

Produto em destaque

É possível destacar um produto na página inicial. Essa é uma ótima maneira de promover um produto novo ou algum item em promoção. As setas para a direita e para a esquerda abaixo da imagem servem para o cliente ver outras fotos.

A seção de produto em destaque apresenta as seguintes configurações:

  • Produto: escolha o produto que você quer exibir na página inicial.
  • Exibir seletor de quantidade - permita que os usuários especifiquem uma quantidade a adicionar ao carrinho.
  • Exibir etiquetas de variantes: mostre etiquetas como "Tamanho" e "Cor" acima dos menus suspensos das variantes. As etiquetas de variantes exibidas são baseadas nos nomes das opções das variantes do produto.
  • Exibir fornecedor: mostre a marca ou o fornecedor do produto. Adicione um fornecedor ao produto para ver essas informações.
  • Exibir o botão de checkout dinâmico: deixe os clientes pularem o carrinho e irem direto para o checkout na seção de produto em destaque.
  • Exibir botões de compartilhamento em redes sociais: mostre botões que os clientes podem usar para compartilhar produtos nas redes sociais.

Mídia

  • Tamanho: defina o tamanho da mídia de produto.
  • Habilitar o zoom da imagem: permita que os clientes aumentem o zoom passando o mouse sobre a imagem do produto.
  • Habilitar loop de vídeo: coloque os vídeos de produtos em loop. Se essa opção não for selecionada, um botão de reprodução aparecerá no fim do vídeo.

Adicionar uma seção de produto em destaque

<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><li>Ao lado de <strong>Debut</strong>, clique em <strong>Personalizar</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><li>Ao lado de <strong>Debut</strong>, toque em <strong>Personalizar</strong>.
</li><li>Toque em <strong>Editar</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><li>Ao lado de <strong>Debut</strong>, toque em <strong>Personalizar</strong>.
</li><li>Toque em <strong>Editar</strong>.
</li></ol></div>
</div>
  1. Clique em Adicionar seção.
  2. Clique em Produto em destaque e em Selecionar.
  3. Utilize as configurações para personalizar a seção de produto em destaque.
  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.

Adicionar uma área para assinatura de newsletter à sua página inicial

  1. Clique em Adicionar seção.

  2. Clique em Newsletter e, depois, em Selecionar.

  3. Digite um título para a assinatura da newsletter.

  4. Insira um subtítulo para a assinatura da newsletter.

  5. Clique em salvar.

Mapa

Você pode adicionar um mapa do Google à sua página inicial para mostrar aos clientes onde sua empresa está localizada.

A seção de mapa apresenta as seguintes configurações:

  • Título: adicione um título à seção de mapa.
  • Endereço e horário: adicione o endereço e horário de funcionamento de sua loja à seção de mapa.
  • Endereço do mapa: defina a localização de sua loja para exibição no mapa.
  • Marcador de link do mapa: adicione um botão com link para a localização de sua loja no Google Maps.
  • Exibir marcador: adicione um marcador que exiba a localização específica de sua loja no mapa.
  • Chave da API do Google Maps: adicione a chave da API de seu mapa à seção de mapa.
  • Imagem: adicione uma imagem para exibição se o mapa não carregar.
  • Posição da imagem: defina o posicionamento da imagem.

Adicionar um mapa à sua página inicial

  1. Clique em Adicionar seção. 2. Clique em Mapa e em Selecionar. 3. Personalize a seção de mapa nas configurações. 4. Clique em salvar.

Rich text

Utilize a seção Rich text para adicionar conteúdo escrito à página inicial ou para inserir páginas criadas no admin da Shopify. Por exemplo, é possível dar destaque a eventos futuros ao incorporar a página de seu blog ou exibir uma página com qualquer um dos recursos a seguir:

A seção de rich text apresenta as seguintes configurações:

  • Exibição ampla: reduza as margens nos dois lados do texto. - Título: adicione um título à seção de rich text. - Texto: adicione e formate seu texto personalizado. Para dar destaque a uma página da loja, clique em Adicionar conteúdo e em Página. No menu suspenso, selecione uma página para destacar como sua página inicial. - Tamanho: defina o tamanho do texto.

Adicionar rich text à página inicial

  1. Clique em Adicionar seção.

  2. Clique em Rich text e em Selecionar.

  3. Utilize as configurações para personalizar a seção de rich text.

  4. 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:

  • 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.
  • Link do vídeo: adicione a URL do YouTube do seu vídeo.
  • 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.
  • Altura do vídeo: defina a altura do seu vídeo.
  • Título: adicione um título ao 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.

Adicionar um vídeo à sua página inicial

  1. Clique em Adicionar seção.
  2. Clique em Vídeo e em Selecionar.
  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 seção de apresentação de slides conta com as seguintes configurações:

  • Slide de imagem: escolha uma imagem a ser incluída na apresentação de slides. É possível fazer o upload de uma imagem, usar uma carregada anteriormente ou selecionar uma imagem gratuita no banco do Burst. Defina as seguintes configurações para cada slide: - Posição da imagem: escolha o alinhamento da imagem no quadro de apresentação de slides. Saiba mais sobre a posição da imagem nas diretrizes abaixo.

    • Título: adicione o texto primário que estará junto da imagem.
    • Subtítulo: adicione o texto secundário que estará junto da imagem. Ele é exibido abaixo do título.
    • Etiqueta de botão: adicione o texto que você quer exibir no botão.
    • Link de botão: defina a URL ou a página que você quer vincular ao botão. Cole a URL ou selecione uma página no menu. Se você não quiser incluir um botão na seção, deixe esse campo em branco.
  • Altura do slide: defina a altura da apresentação de slides. Saiba mais sobre como a altura do slide afeta a apresentação.

  • Tamanho do texto: defina o tamanho dos cabeçalhos na apresentação de slides.

  • Alinhamento do texto: escolha a posição do texto nos slides.

  • Exibir sobreposição: adicione uma camada de cor entre uma imagem e o texto colocado sobre ela. As sobreposições podem ajudar no contraste de cores e na legibilidade. É possível definir a cor e a opacidade da sobreposição nas configurações de cor.

  • Rotação automática de slides: defina como automática a apresentação de slides.

  • Alterar slides a cada: selecione a frequência de alteração dos slides.

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

Adicione uma apresentação de slides à sua página inicial

  1. Clique em Adicionar seção. 3. Clique em Apresentação de slides e, depois, em Selecionar. 4. Para adicionar um slide de imagem, siga as etapas abaixo:
1. In the **Content** area, click **Add image slide**.

2. Under **Image**, click **Select image**. To upload an image from your computer, click **Upload**. To use a free stock image from [Burst](https://burst.shopify.com/), click **Free images**.

3. To choose how you want to align the image in the slideshow, select a position from the **Image position** drop-down menu. You can learn more about [image position](#control-how-your-images-are-cropped) in the guidelines below.

4. To add text to the image slide, enter text in the **Heading** field, the **Subheading** field, or both.

5. Add a button to your image slide by entering text in the **Button label** field. Select a part of your online store for the button to link to in the **Button link** field.
  1. Personalize a seção de apresentação de slides nas configurações.
  2. 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