Debut

Debut é um tema flexível, adequado para qualquer loja, não importa o tamanho do estoque. Com o Debut você pode configurar uma loja rapidamente e começar a vender; o tema tem boa apresentação, mesmo sem nenhuma personalização.

Exemplo de loja virtual usando o Debut

O Debut é ideal se você deseja:

  • começar a vender imediatamente, sem a necessidade de fazer várias personalizações no seu tema
  • garantir que a sua loja vai exibida corretamente em tablets e smartphones
  • reorganizar com facilidade o layout da sua loja e ver as suas alterações em tempo real.

Editor de temas

Use o editor de temas para personalizar seu tema. A barra de ferramentas do editor de temas se divide em Seções e Configurações do tema.

A barra de ferramentas do editor de temas mostrando Seções e Configurações do tema

Você pode usar seções para modificar o conteúdo e o layout das diferentes páginas da sua loja. Você pode usar as configurações de tema para personalizar as fontes e cores da sua loja e fazer alterações nos seus links de mídia social e configurações de checkout.

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 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
  • Colunas de texto 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 anúncio.

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. Encontre Debut e 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 enviar de uma imagem do seu computador, clique em Enviar. Para usar uma imagem de arquivo 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 anúncio no topo da página, siga os seguintes passos:

  9. Na área da Barra de anúncios, marque Mostrar anúncio.

  10. Para mostrar o anúncio apenas na página inicial, marque somente Página inicial. Caso contrário, o anúncio será exibido em todas as páginas da sua loja.

  11. Digite o texto do seu anúncio no campo Texto.

  12. Para adicionar um link ao seu anúncio, insira a URL no campo Link.

  13. Para alterar a cor do plano de fundo da barra do anúncio, clique na amostra de cores da barra e escolha uma cor.

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

  15. Clique em Salvar.

Rodapé

Na seção de rodapé, você pode editar o conteúdo exibido na parte inferior de todas as páginas da sua loja. Você pode adicionar os seguintes recursos ao seu rodapé:

  • até dois menus
  • uma assinatura de newsletter
  • ícones de pagamento

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

Para personalizar a seção de rodapé:

  1. Encontre Debut e clique em Personalizar.

  2. Clique em Seções.

  3. Clique em Rodapé.

  4. Personalize o menu de rodapé principal na área Menu principal. Para editar o menu padrão, clique em Editar menu. Para mudar para um menu diferente, clique em Alterar e, em seguida, selecione um menu existente ou clique em Criar menu.

  5. Inclua um menu adicional ao seu rodapé na área Menu adicional.

  6. Para adicionar uma assinatura de newsletter ao seu rodapé, siga estas etapas:

    1. Marque Exibir assinatura de newsletter.
    2. Insira um subtítulo para a assinatura de newsletter no campo Subtítulo.
  7. Adicione ícones de pagamento, como Mastercard ou PayPal, ao seu rodapé, marcando Exibir ícones de pagamento.

  8. Clique em Salvar.

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 de produtos.

  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 das variantes, como "Tamanho" e "Cor", marque Exibir etiquetas das variantes. As etiquetas das 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 Ativar o zoom da imagem.

  9. Para mostrar um botão de checkout dinâmico, marque Mostrar 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 Mostrar 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 Mostrar 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 ordenem 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 Ativar ordenação para exibir um menu de ordenação.

  9. Marque Ativar 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 suas coleções de produtos. Seus clientes podem usar a página da lista de coleções para navegar rapidamente pelas coleções para encontrar a que desejam visualizar. No Debut, a página da lista de coleções é um link de nível superior no menu de cabeçalho:

Página inicial do Debut com o link Catálogo destacado no menu superior

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 ordenar 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 do 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 ordenação na lista Ordenar 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 Mostrar autor para exibir o nome do autor.

  6. Marque Mostrar 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 ativar as seguintes configurações:

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

Adicionar observações ao carrinho

Você pode permitir que seus clientes adicionem observações aos pedidos 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 Ativar 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 ativar 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 guia.

  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 Mostrar "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 Rótulo do botão, insira o texto que você deseja que apareça no botão.

  5. No campo Link do 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 do botão - adicione um botão com uma etiqueta de texto à seção.
  • Link do botão - vincule o botão à outra página ou site.

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

  1. Encontre Debut e 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 marketing por e-mail. Saiba mais sobre marketing por e-mail no blog da Shopify.

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

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

  1. Encontre Debut e 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.
  • Mostrar 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. Encontre Debut e 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 de apresentação de slides e sobre os tamanhos de imagem recomendados, consulte as diretrizes abaixo.

Para criar uma apresentação de slides:

  1. Encontre Debut e 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 enviar uma imagem do seu computador, clique em Enviar. Para usar uma imagem de arquivo 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 seu slide de imagem digitando o texto no campo de Etiqueta do botão de texto. Selecione uma parte de sua loja virtual para vincular o botão no campo Link do botão:

    O campo de Link do botão no editor de temas. Clicar no link mostra um menu que inclui Coleções, Produtos, Páginas, Blogs e Posts do blog. Você pode usar esse menu para vincular a uma coleção, um produto e assim por diante.

  10. Clique em Salvar.

Diretrizes de apresentação de slides

Você pode usar 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:

As configurações de altura do slide no editor de temas. Um menu suspenso de altura do slide mostra as seguintes opções: Adaptar à primeira imagem, Pequena, Média e Grande.

Siga estas diretrizes:

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.

Você pode controlar a maneira como as imagens são cortadas usando a configuração Posição da imagem:

A configuração Posição da imagem no editor de temas. Um menu suspenso mostra nove opções diferentes, como

Para cada imagem, você pode escolher qual parte deseja manter em exibição quando ocorrer o corte. No exemplo a seguir, você pode ver 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. O slide à direita mostra a posição da imagem 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.

Você pode usar 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.

O Debut inclui as seguintes configurações de tema:

  • Cores
  • Tipografia
  • Redes sociais
  • Favicon
  • Checkout

Cores

Você pode escolher as cores para as diferentes partes de sua loja virtual.

Personalizar suas configurações de cor

  1. Ao lado de **, clique em **Personalizar.

  2. Clique em Configurações do tema.

  3. Clique em Cores.

  4. Para cada tipo de conteúdo, clique na amostra de cor para usar o seletor de cores:

    O seletor de cores no editor de temas

- A área Selecionadas recentemente mostra as cores que você selecionou recentemente para o seu tema. - A área Em uso mostra as cores que você está usando no momento em outras partes do seu tema.

Para definir a cor como transparente, clique em Nenhum.

  1. Clique em Salvar.

Tipografia

Você pode definir o estilo e o tamanho da fonte para os textos de sua loja virtual.

Personalizar suas configurações de tipografia

  1. Ao lado de **, clique em **Personalizar.

  2. Clique em Configurações do tema.

  3. Clique em Tipografia.

  4. Para cada tipo de texto, clique em Alterar para usar o seletor de fontes:

    O botão 'Alterar' no seletor de fontes

  5. Explore as fontes usando o campo de pesquisa ou clicando em Carregar mais.

    Para ver todas as fontes disponíveis, consulte a biblioteca de fontes da Shopify.

  6. Clique no nome da fonte que você deseja usar.

  7. Para alterar a fonte para um estilo diferente, como negrito ou itálico, clique em Regular. Em seguida, clique no estilo que você deseja usar e, em seguida, clique em Selecionar:

    Uma seleção de pesos de fonte disponíveis no seletor de fontes

  8. Clique em Salvar.

Redes sociais

Você pode adicionar botões de compartilhamento social para seus produtos e postagens de blog e links para suas contas de mídia social.

Para personalizar as configurações de mídia social:

  1. Encontre Debut e clique em Personalizar.

  2. Clique em Configurações do tema.

  3. Clique em Redes sociais.

  4. Para enviar uma imagem de compartilhamento social, na área de imagem de compartilhamento social, clique em Selecionar imagem ou Explorar imagens gratuitas.

  5. Para adicionar botões de compartilhamento social aos seus produtos e postagens de blog, na área Opções de compartilhamento, marque uma ou todas as caixas de seleção.

    Você pode adicionar os seguintes botões de compartilhamento:

- **Share on Facebook**
- **Tweet on Twitter**
- **Pin on Pinterest** (not available for blog post sharing)
  1. Para adicionar links às suas contas de mídia social, na área Contas, insira os links para suas contas nos campos fornecidos. Insira os links completos, como https://instagram.com/shopify ou https://twitter.com/shopify.

    Os links para suas contas de mídias sociais são exibidos no rodapé de sua loja virtual.

  2. Clique em Salvar.

Favicon

É possível carregar um ícone de favoritos ou "favicon", ampliando a visibilidade da sua marca ao exibir o logotipo da loja virtual nos seguintes locais:

  • na aba do navegador da Web
  • no histórico do navegador da Web
  • nos ícones da área de trabalho
  • ao lado do nome da loja virtual após inclusão nos favoritos.

O melhor tamanho de imagem favicon para o Debut é 32 x 32 pixels.

Para enviar um favicon:

  1. Na seção do Debut, clique em Personalizar.

  2. Clique em Configurações do tema.

  3. Clique em Favicon.

  4. Na área Imagem do favicon, clique em Selecionar imagem e, em seguida, execute uma das seguintes ações:

- To select an image you have already uploaded to your Shopify admin, click the **Library** tab.
- To select an image from your local computer, click the **Library** tab, and then click the plus button.
  1. Clique em Salvar.

Notificação de Adicionar ao carrinho

Você pode exibir uma notificação com um link para a página do carrinho quando os clientes adicionarem itens ao carrinho.

Uma página de produto com uma notificação pop-up no canto superior direito mostrando qual item foi adicionado ao carrinho

Se essa notificação estiver desativada, os clientes serão levados diretamente para a página do carrinho depois de adicionar um item ao carrinho.

Para personalizar essa notificação:

  1. Na seção do Debut, clique em Personalizar.

  2. Clique em Configurações do tema.

  3. Clique em Notificação de Adicionar ao carrinho.

  4. Escolha se deseja permitir a configuração Mostrar notificação ao adicionar item ao carrinho.

  5. Clique em Salvar.

Checkout

É possível personalizar a sua página de finalização de pedido para incluir o seguinte:

  • um banner de imagem personalizada na parte superior da página
  • o logotipo da sua loja
  • uma imagem de fundo ou cor na área principal de conteúdo
  • fontes de texto e cores personalizadas.

Para ver suas alterações à medida que as aplica, vá para a sua página de finalização de compra no editor de temas.

Para acessar as configurações da página de finalização de compra:

  1. Na seção do Debut, clique em Personalizar.

  2. Clique em Configurações do tema.

  3. Clique em Finalização de compra.

Para adicionar uma imagem de banner:

  1. Na área Banner, marque a caixa de seleção Usar plano de fundo personalizado.

  2. Clique em Escolher arquivo para enviar um arquivo de imagem.

Para adicionar um logotipo:

  1. Na área Logotipo, selecione Personalizado no menu suspenso Imagem.

  2. Clique no link Escolher arquivo para enviar um arquivo de imagem.

  3. No menu suspenso Posição, selecione onde deseja exibir a imagem: à direita, à esquerda ou ao centro.

  4. Na lista Tamanho do logotipo, selecione um tamanho de logotipo.

Para personalizar a área de conteúdo principal:

  1. Na área Conteúdo principal, marque a caixa de seleção Usar plano de fundo personalizado.

  2. Realize uma das seguintes ações:

  • Clique em Escolher arquivo para enviar um arquivo de imagem.
  • Clique na amostra de Cor de fundo para selecionar uma nova cor em uma paleta.
  1. No menu suspenso Campos do formulário, selecione se os campos serão brancos ou transparentes.

Para personalizar a página Resumo do pedido:

  1. Na área Resumo do pedido, marque a caixa de seleção Usar plano de fundo personalizado.

  2. Realize uma das seguintes ações:

  • Clique em Escolher arquivo para enviar um arquivo de imagem.

  • Clique na amostra de Cor de fundo para selecionar uma nova cor em uma paleta.

Para definir opções de fonte:

  • Na área Tipografia, selecione a fonte a ser usada para o título e o corpo do texto nos menus suspensos.

Para definir opções de cores:

  • Na área Cores, clique nas amostras de cores Destaques, Botões ou Erros para escolher uma nova cor em uma paleta.

Alterar estilo de tema

Você pode redefinir as configurações gerais do seu tema para os valores padrão. Quando você redefine o estilo do seu tema, todas as alterações feitas na guia Configurações gerais serão perdidas, mas você não perderá conteúdo, como texto e imagens.

  1. Clique na guia Configurações gerais.

  2. Clique em Alterar estilo do tema.

  3. Clique no botão abaixo de Alterar o estilo do tema. O nome desse botão geralmente é o nome do tema.

  4. Clique em Alterar estilo.

Pronto(a) para começar a vender com a Shopify?

Experimente de graça