Recursos da loja virtual

Use seções para adicionar recursos às páginas da loja virtual. É possível escolher, adicionar e configurar seções com imagens, textos, cores da marca e muito mais.

Algumas páginas têm seções-padrão, como a barra de avisos, o cabeçalho e o rodapé. Vale ressaltar que essas seções aparecem em todas as páginas.

Barra de avisos

Com a barra de comunicados, é possível exibir informações importantes aos clientes em todas as páginas. Apesar de não ter configurações próprias, é possível personalizar a seção com até 12 blocos diferentes, bem como torná-las clicáveis com links para páginas específicas.

Bloco de comunicados

As configurações do bloco de comunicados na seção da barra de comunicados
Configuração Descrição
Texto O comunicado que você deseja exibir aos clientes.
Esquema de cores O esquema de cores a usar para a barra de comunicados.
Link O link para o qual você quer direcionar os clientes que clicarem na barra de comunicados.

Cabeçalho

O cabeçalho é exibido em todas as páginas do tema.

Configurações de seção

As configurações da seção de título
Configuração Descrição
Imagem do logo O logo da sua loja.
Largura personalizada do logo A largura do logo, que pode ser qualquer número múltiplo de 10, entre 50 e 250 pixels. Por padrão, ela é definida em 100 pixels.
Posição do logo em telas grandes

A localização do logo no cabeçalho quando um cliente visualiza o site em uma tela grande, como a de um desktop.

  • Centralizado à esquerda: exibe o logo alinhado ao menu principal, centralizado verticalmente e alinhado à esquerda.
  • Canto superior esquerdo: exibe o logo acima do menu principal e alinha o logo e os itens de menu à esquerda.
  • Centralizado à esquerda (padrão): exibe o logo acima do menu principal e alinha o logo e os itens de menu no centro.
Menu O menu a ser usado no menu principal.
Exibir linha separadora Exibe uma linha para separar visualmente o cabeçalho do conteúdo da página.
Habilitar cabeçalho fixo Exibe novamente o cabeçalho quando o cliente rola a tela para cima. O cabeçalho desaparece quando o cliente rola a tela para baixo.

Rodapé

O rodapé é exibido em todas as páginas do tema.

Configurações de seção

As configurações da seção de rodapé
Configuração Descrição
Esquema de cores Para o plano de fundo do rodapé, é possível escolher entre estes: Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.
Exibir assinante de e-mail Inclui um formulário de assinante de e-mail no qual os clientes podem assinar a newsletter e receber e-mails de marketing.
Título O título do formulário Mostrar assinatura de e-mail. Se Mostrar assinatura de e-mail não está habilitado, o formulário não é exibido.
Ícones de redes sociais Exibe os ícones das redes sociais cujo link de perfil você tenha inserido nas configurações do tema.
Habilitar seletor de país/região Adiciona um seletor para que os clientes escolham entre os países e regiões habilitados nas configurações de pagamento. Dessa forma, eles podem ver os preços dos produtos na moeda que preferem.
Habilitar seletor de idioma Adiciona um seletor para que os clientes escolham entre os países e regiões habilitados nas configurações de idioma. Assim, eles podem acessar a loja no idioma que preferem.
Exibir ícones de pagamento Exibe os ícones das formas de pagamento habilitadas. Quando o cliente visita a loja, esses ícones são filtrados para que apenas as formas de pagamento aceitas na região e na moeda do cliente atual sejam mostradas.

Bloco de menu

As configurações do bloco de menu na seção de rodapé
Configuração Descrição
Título O título do bloco.
Menu O menu a ser exibido no bloco.

Bloco de texto

É possível usar o bloco de texto para destacar o que for importante, como informações da loja, promoções ou dados de contato.

As configurações do bloco de texto na seção de rodapé
Configuração Descrição
Título O título do bloco.
Subtexto O texto a ser exibido no bloco.

Bloco de imagem

As configurações do bloco de imagem na seção de rodapé
Configuração Descrição
Imagem A imagem a ser exibida no bloco.
Largura da imagem Define a largura da imagem, que pode ser qualquer número múltiplo de 5, entre 50 e 200 pixels. Por padrão, é definida em 100 pixels.
Alinhamento da imagem na tela grande

Alinha a imagem no bloco:

  • Esquerda: alinha a imagem à esquerda do bloco.
  • Centro (padrão): alinha a imagem no centro do bloco.
  • Direita: alinha a imagem à direita do bloco.

Posts do blog

Se você tiver um blog na sua loja da Shopify, use a seção de Posts do blog para destacar suas publicações. Na seção, os posts são exibidos com um trecho de 55 palavras. No entanto, caso não haja um resumo, apenas as 30 primeiras palavras são exibidas.

Configurações de seção

As configurações da seção Posts do blog
Configuração Descrição
Título O título da seção.
Blog O blog do qual você deseja exibir os posts. O padrão é o primeiro blog em ordem alfabética na página Blogs.
Posts do blog O número de posts do blog que você deseja exibir na seção. Máximo: 3 posts.
Exibir imagem em destaque Exibe a imagem em destaque no post do blog. Proporção sugerida: 2:3.
Exibir data Exibe a data em que o post foi criado.
Exibir autor Exibe o nome do autor dos posts.
Exibir plano de fundo secundário Ajusta a cor do plano de fundo de acordo com a cor do texto.
Habilitar o botão "Ver tudo" se o blog tiver mais posts que os mostrados Se o blog tiver mais posts do que os definidos no campo Post do blog, um botão "Ver tudo" será exibido para direcionar os clientes à página do blog.

Selecionar um blog

  1. No editor de temas, clique no título da seção de posts do blog.
  2. Na seção Blog, clique em Alterar.
  3. Selecione o blog.
  4. Clique em Selecionar e, depois, em Salvar.

Colagem

É possível usar vídeos, imagens, produtos e coleções para criar colagens diversas. Por padrão, cada seção de colagem contém três blocos, sendo estes: vídeo, produto e coleção.

Para criar uma colagem com mais de três blocos, adicione outras seções abaixo da primeira e não inclua um valor de Cabeçalho para as seções inferiores. É importante lembrar que as seções de colagem aparecem no fluxo como se fossem uma única seção.

Configurações de seção

As configurações da seção de colagem
Configuração Descrição
Título O título da seção.
Layout para desktop

Como os blocos são exibidos em desktops.

  • Bloco grande esquerdo (padrão): o primeiro bloco da seção é exibido à esquerda e é maior que os outros blocos.
  • Bloco grande direito: o último bloco da seção é exibido à direita e é maior que os outros blocos.
  • Layout para dispositivo móvel

    Como os blocos são exibidos em dispositivos móveis.

    • Colagem: exibe as imagens em um layout de colagem:
      • Se o Bloco grande esquerdo está habilitado no layout para desktop, o primeiro bloco da seção é exibido na parte superior e é maior que os outros blocos.
      • Se o Bloco grande direito estiver habilitado na seção Layout para desktop, o último bloco nela será maior que os demais e exibido na parte inferior.
    • Coluna: exibe as imagens com o mesmo tamanho e em uma coluna.

    Bloco de vídeo

    As configurações do bloco de vídeo na seção de colagem
    Configuração Descrição
    Imagem de capa A imagem exibida antes que um cliente reproduza o vídeo.
    Link O link para o vídeo no YouTube ou no Vimeo. O vídeo precisa estar disponível publicamente.
    Texto alternativo do vídeo O texto alternativo do vídeo. Descreve o vídeo para clientes que usam leitores de tela.
    Adicionar preenchimento de imagem Adiciona espaço extra necessário para garantir que sua imagem não seja cortada. Além disso, também recomendamos seguir a proporção 16:9 para a capa.

    Bloco de produto

    As configurações do bloco de produto na seção de colagem
    Configuração Descrição
    Produto O produto que você deseja exibir.
    Exibir plano de fundo secundário Ajusta a cor do plano de fundo de acordo com a cor do texto.
    Exibir segunda imagem ao passar o cursor Quando o cliente passa o cursor sobre a imagem do produto, outra é exibida, se houver.
    Adicionar preenchimento de imagem Para que a imagem não seja cortada, recomendamos adicionar espaço extra e usar a proporção 16:9.

    Bloco de coleção

    As configurações do bloco de coleção na seção de colagem
    Configuração Descrição
    Coleção A coleção que você deseja exibir.
    Adicionar preenchimento de imagem Para que a imagem não seja cortada, recomendamos adicionar espaço extra e usar a proporção 16:9.
    Esquema de cores Para a cor do plano de fundo na seção Bloco de coleção, é possível escolher entre estas opções: Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.

    Bloco de imagem

    As configurações do bloco de imagem na seção Colagem
    Configuração Descrição
    Imagem A imagem que você quer exibir.
    Adicionar preenchimento de imagem Para que a imagem não seja cortada, recomendamos adicionar espaço extra e usar a proporção 16:9.
    Esquema de cores Para a cor do plano de fundo do bloco de imagem, é possível escolher entre estas opções: Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.

    Conteúdo recolhível

    A seção de conteúdo recolhível é compatível com linhas que podem ser recolhidas ou expandidas para mostrar o conteúdo interno. Além disso, é possível incluir uma imagem à esquerda ou à direita do conteúdo recolhível.

    Configurações de seção

    As configurações da seção de conteúdo recolhível
    Configuração Descrição
    Legenda Uma legenda opcional para a seção de conteúdo recolhível, exibida acima do título da seção.
    Título O título da seção de conteúdo recolhível.
    Alinhamento do título Escolha o alinhamento do título da seção. As opções são esquerda, centro (padrão) ou direita.
    Layout

    Selecione um layout para o conteúdo recolhível:

    • Nenhum contêiner (padrão)
    • Contêiner de linha: cada linha recolhível fica dentro de uma caixa sombreada
    • Contêiner de seção: contém toda a seção de conteúdo recolhível em uma caixa sombreada
    Esquema de cores A cor de fundo da seção de conteúdo recolhível. Escolha entre Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.
    Esquema de cores do contêiner A cor de fundo do contêiner de conteúdo recolhível. Escolha entre Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso. O esquema de cores selecionado só é visível quando a opção Layout é definida como Contêiner de linha ou de seção.
    Abrir primeira linha recolhível Quando marcada, a primeira linha do conteúdo recolhível ficará expandida por padrão.
    Imagem A imagem da seção. Clique no botão Alterar para alterar ou remover a imagem.
    Editar texto alternativo Adicione uma breve descrição da imagem para melhorar o SEO e descrever a imagem para clientes que usam leitores de tela.
    Proporção da imagem A proporção das imagens para a seção:
    • Adaptar à imagem (padrão): usa a proporção da imagem para evitar que ela seja cortada.
    • Pequena
    • Grande
    Layout para desktop Escolha o que aparecerá primeiro: a imagem ou as linhas recolhíveis. O padrão é o texto aparecer primeiro, mas a imagem sempre aparece antes no dispositivo móvel.
    Largura máxima Selecione a largura máxima da seção recolhível entre 1200 px e 1600 px (padrão).
    Ícones de destaque Altere a cor dos ícones de destaque que iniciam cada linha recolhível. Escolha entre Destaque 1, Destaque 2, Contorno ou Texto (padrão).

    Bloco de linha recolhível

    As configurações do bloco de linha recolhível
    Configuração Descrição
    Título O título da linha recolhível.
    Conteúdo da linha O conteúdo da linha recolhível, que pode ser formatado ou incluir links de URL. Esse recurso pode ser usado com o Conteúdo da linha de página.
    Conteúdo da linha de página É possível inserir o conteúdo de outra página em uma linha recolhível. Clique em Alterar para selecionar ou remover uma página. Esse recurso pode ser usado com o Conteúdo da linha.
    Ícone Escolha um ícone na lista suspensa para exibir antes do conteúdo recolhível. Por padrão, o ícone da marca de seleção está selecionado.

    Lista de coleções

    Você pode adicionar uma lista de coleções que deseja destacar. É possível adicionar até 16 blocos de coleção a uma lista de coleções.

    Configurações de seção

    As configurações da seção Lista de coleções
    Configuração Descrição
    Título O título da seção
    Proporção da imagem A proporção das imagens em destaque das coleções:
    • Adaptar à imagem: usa a proporção da imagem para evitar que ela seja cortada.
    • Retrato: corta as imagens para usar a proporção 2:3.
    • Quadrada (padrão): corta as imagens para usar uma proporção 1:1.
    Esquema de cores Para a cor do plano de fundo na seção Lista de coleções e para o preenchimento de imagem, é possível escolher entre estas opções: Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.
    Habilitar gesto de deslizar em dispositivos móveis Altera a exibição de coluna para linha em dispositivos móveis. Dessa forma, os clientes podem deslizar para os lados e ver mais blocos de coleção.
    Adicionar preenchimento de imagem Para que a imagem não seja cortada, recomendamos adicionar espaço extra e usar a proporção 16:9.
    Habilitar o botão "Ver tudo" se a lista incluir mais coleções que as mostradas Se a lista de coleções tiver mais coleções do que as definidas no campo Máximo de coleções a serem mostradas, um botão "Ver tudo" será exibido para direcionar os clientes à lista de coleções.

    Escolher coleções

    1. No editor de temas, clique no bloco Coleção em que você quer incluir uma coleção.
    2. Clique em Selecionar coleção.
    3. Clique em uma coleção e, depois, em Selecionar.

    Formulário de contato

    O formulário de contato encaminha todos os envios para o E-mail do remetente da loja. É importante lembrar que o endereço de e-mail do remetente pode ser alterado na página de configurações Informações da loja do admin da Shopify.

    O formulário tem os seguintes campos:

    • Nome
    • E-mail (obrigatório)
    • Telefone
    • Comentário

    O formulário de contato usa o seguinte esquema de cores:

    • A cor de fundo é a cor do Plano de fundo 1.
    • As cores do texto e do contorno do campo de texto são a cor do Texto.
    • A cor do botão "Enviar" é a cor do Destaque 1.

    Liquid personalizado

    É possível adicionar seu código Liquid para criar uma seção personalizada.

    • Adicione snippets de app fornecidos nas instruções de seus apps baixados para adicionar apps facilmente às páginas.
    • Adicione o código Liquid personalizado diretamente no editor.

    É possível adicionar uma seção à página com senha onde os clientes podem cadastrar um endereço de e-mail para serem informados quando a loja estiver aberta. Observe que cada assinatura de e-mail criada gera uma conta de cliente correspondente.

    A seção inclui três blocos padrão:

    • Título
    • Subtítulo
    • Formulário de e-mail

    Configurações de seção

    As configurações da seção para assinatura de e-mail
    Configuração Descrição
    Imagem de fundo A imagem de fundo do banner para assinatura de e-mail. Se quiser substituir ou remover a imagem, clique em Alterar. Quando a imagem é removida, a imagem que vem com o tema é exibida. Para ocultá-la, desmarque a caixa de seleção Exibir imagem de fundo.
    Editar texto alternativo Clique se quiser definir o texto alternativo da imagem para Otimização de mecanismos de pesquisa (SEO, na sigla em inglês). Além disso, é possível usar essa opção a fim de descrever a imagem para clientes que usam leitores de tela.
    Opacidade de sobreposição de imagem Este recurso esmaece o banner gráfico para assinatura de e-mail com uma sobreposição. Use o controle deslizante para definir a opacidade da sobreposição. O padrão é 0%.
    Exibir imagem de fundo Marque esta caixa para exibir a imagem de fundo no banner para assinatura de e-mail.
    Altura do banner

    Pelo menu suspenso, defina a altura do banner gráfico para assinatura de e-mail. As opções são: Adaptar à imagem, Pequena, Média (padrão) ou Grande.

    Posição do conteúdo no desktop Defina a posição no desktop do banner para assinatura de e-mail. É possível escolher entre acima, meio ou abaixo e entre direita, esquerda ou centro. Observe que meio/centro é a configuração-padrão.


    No desktop, a caixa de texto cobre parcialmente a imagem. No dispositivo móvel, ela aparece abaixo da imagem.

    Exibir contêiner no desktop No desktop, esta opção coloca o texto em uma caixa sobre o banner gráfico para assinatura de e-mail.
    Alinhamento do conteúdo no desktop Configure o alinhamento do texto colocado sobre o banner gráfico para desktop. As opções são direita, esquerda ou centro (padrão).
    Esquema de cores A cor de fundo da seção do banner para assinatura de e-mail e do preenchimento de imagens. É possível escolher entre Destaque 1, Destaque 2, Plano de fundo 1 (padrão), Plano de fundo 2 ou Inverso.


    No desktop, o esquema de cores selecionado só fica visível quando a opção Exibir contêiner no desktop é selecionada. No dispositivo móvel, o esquema de cores escolhido só fica visível quando Exibir conteúdo abaixo da imagem no dispositivo móvel é selecionado.

    Alinhamento do conteúdo no dispositivo móvel Defina o alinhamento do texto no banner gráfico para dispositivo móvel. Escolha entre direita, esquerda ou centro (padrão).
    Exibir conteúdo abaixo no dispositivo móvel No dispositivo móvel, o conteúdo aparecerá abaixo do banner gráfico para assinatura de e-mail.

    Bloco de título

    As configurações do bloco de título na seção para assinatura de e-mail
    Configuração Descrição
    Título O título da seção.

    Bloco de subtítulo

    As configurações do bloco de subtítulo na seção para assinatura de e-mail
    Configuração Descrição
    Descrição A descrição da seção.
    Estilo de texto Esta opção altera o estilo do texto na seção para assinatura de e-mail. Escolha entre corpo (padrão) e subtítulo.

    Assinante de e-mail

    É possível adicionar uma seção na qual os clientes podem inserir o endereço de e-mail e assinar a newsletter ou e-mails de marketing. Quando um cliente se inscreve, uma conta de cliente é criada no seu admin da Shopify.

    A seção inclui três blocos padrão:

    • Título
    • Subtítulo
    • Formulário de e-mail

    Configurações de seção

    As configurações da seção de assinatura de e-mail
    Configuração Descrição
    Esquema de cores Para a cor do plano de fundo na seção Assinante de e-mail, é possível escolher entre estas opções: Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.
    Definir seção com largura total Deixa a seção na largura total da janela do navegador.

    Bloco de título

    As configurações do bloco de título na seção da lista de coleções
    Configuração Descrição
    Título O título da seção.

    Bloco de subtítulo

    As configurações do bloco de subtítulo na seção Lista de coleções
    Configuração Descrição
    Descrição A descrição da seção.

    Formulário de e-mail

    O bloco do formulário de e-mail exibe um campo onde um cliente pode inserir um e-mail para se inscrever e receber e-mails de marketing. O bloco não tem configurações personalizáveis.

    Produto em destaque

    Você pode adicionar uma seção que apresenta um produto específico.

    Configurações de seção

    As configurações da seção de produtos em destaque
    Configuração Descrição
    Produto O produto que você quer destacar na seção.
    Exibir plano de fundo secundário Exibe o produto em destaque na cor do plano de fundo secundário.
    Habilitar loop de vídeo Permite que o vídeo seja reproduzido repetidamente após os clientes o iniciarem.

    Blocos da seção

    É possível adicionar os blocos a seguir à seção Produto em destaque.

    Os blocos disponíveis na seção de produtos em destaque
    Bloco Configurações
    Texto Digite o texto do produto em destaque:
    • Texto: aceita texto ou origem dinâmica.
    • Estilo de texto: escolha entre corpo, subtítulo ou caixa alta.
    Título Não há configurações personalizáveis no bloco.
    Preço Não há configurações personalizáveis no bloco.
    Seletor de variante Escolha entre botões ou um menu suspenso.
    Seletor de quantidade Não há configurações personalizáveis no bloco.
    Exibir botões de checkout dinâmico Mostra as opções de checkout dinâmico habilitadas nas configurações de Pagamento.
    Compartilhar O texto em que os clientes clicam para compartilhar o produto nas redes sociais deles.
    Avaliação do produto Mostra a classificação média do produto em estrelas junto com o número de avaliações entre parênteses, por exemplo: ★★★★★ (8). Para tanto, é necessário ter um app de avaliação de produtos, como o Product Reviews da Shopify, além de definições de metacampo para reviews.rating_count e reviews.rating.
    Liquid personalizado Adicione um código HTML ou Liquid personalizado.

    Coleção em destaque

    É possível adicionar uma seção que exibe produtos em uma coleção.

    Configurações de seção

    As configurações da seção de coleção em destaque
    Configuração Descrição
    Título O título da seção.
    Coleção A coleção da qual você deseja exibir os produtos.
    Máximo de produtos a serem mostrados O número de produtos da coleção a exibir. Precisa ser um número par. Mínimo: 2. Máximo: 12.
    Habilitar o botão "Ver tudo" se a coleção tiver mais produtos que os mostrados Se a coleção tiver mais produtos do que os definidos no campo Máximo de produtos a serem mostrados, um botão "Ver tudo" será exibido para direcionar os clientes à página de coleção.
    Habilitar gesto de deslizar em dispositivos móveis Altera a exibição de coluna para linha em dispositivos móveis. Dessa forma, os clientes podem deslizar para os lados e ver mais produtos.
    Proporção da imagem A proporção das imagens do produto:
    • Adaptar à imagem: usa a proporção da imagem para evitar que ela seja cortada.
    • Retrato: corta as imagens para usar a proporção 2:3.
    • Quadrado: corta as imagens para usar a proporção 1:1.
    Exibir segunda imagem ao passar o cursor Quando o cliente passa o cursor sobre a imagem do produto, outra é exibida, se houver.
    Adicionar preenchimento Adiciona preenchimento à imagem para evitar que ela seja cortada.
    Exibir borda da imagem Adiciona uma borda fina às imagens do produto.
    Exibir fabricante Exibe os fabricantes dos produtos.
    Exibir avaliação do produto Mostra a classificação média do produto em estrelas junto com o número de avaliações entre parênteses, por exemplo: ★★★★★ (8). Para tanto, é necessário ter um app de avaliação de produtos, como o Product Reviews da Shopify, além de definições de metacampo para reviews.rating_count e reviews.rating.

    A seção de banner da imagem é compatível com uma ou duas imagens e uma caixa de texto com botões. Quando duas imagens são usadas, elas são exibidas lado a lado em desktops. Em dispositivos móveis, é possível escolher se as imagens são exibidas lado a lado ou em uma coluna.

    No desktop, a caixa de texto cobre parcialmente a imagem. No dispositivo móvel, ela é exibida abaixo da imagem. Em ambos os formatos, é possível alterar o alinhamento do texto para a direita, a esquerda ou o centro.

    Configurações de seção

    As configurações da seção de banner da imagem
    Configuração Descrição
    Primeira imagem A imagem principal do banner. Se há duas imagens na seção, ela é exibida à esquerda ou na parte superior, dependendo se o cliente está em um desktop ou em um dispositivo móvel.
    Editar texto alternativo Clique se quiser definir o texto alternativo da imagem para Otimização de mecanismos de pesquisa (SEO, na sigla em inglês). Além disso, é possível usar essa opção a fim de descrever a imagem para clientes que usam leitores de tela.
    Segunda imagem A imagem secundária do banner. Ela é exibida à direita ou na parte inferior, dependendo se o cliente está em um desktop ou em um dispositivo móvel.
    Opacidade de sobreposição de imagem Este recurso adiciona uma sobreposição aos banners gráficos. Use o controle deslizante para definir a opacidade da sobreposição. Observe que o padrão é 0%.
    Altura da imagem do banner

    Defina a altura das imagens do banner usando o menu suspenso.

    • Pequena — desktop: 420 px, dispositivo móvel: 280 px
    • Média (padrão) — desktop: 560 px, dispositivo móvel: 340 px
    • Grande — desktop: 720 px, dispositivo móvel: 390 px
    Adaptar a altura da seção para o tamanho da primeira imagem Marque esta caixa para que a altura da primeira imagem defina a altura da seção e substitua a medida selecionada para o banner gráfico. Vale destacar que, no dispositivo móvel, as duas imagens se ajustam à altura da primeira.
    Posição do conteúdo no desktop Defina a posição do banner gráfico no desktop. Escolha entre acima, meio ou abaixo e entre direita, esquerda ou centro.
    Exibir contêiner no desktop No desktop, esta opção coloca o texto em uma caixa sobre o banner gráfico.
    Alinhamento do conteúdo no desktop Defina o alinhamento do texto no banner gráfico para desktop. Escolha entre direita, esquerda ou centro.
    Esquema de cores Para a cor de fundo do preenchimento e da seção do banner da imagem, é possível escolher entre estas opções: Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso. O esquema de cores selecionado fica visível apenas quando a opção Mostrar caixa de texto no desktop está selecionada.
    Alinhamento do conteúdo no dispositivo móvel Configure o alinhamento do texto no banner gráfico para dispositivo móvel. Escolha entre direita, esquerda ou centro.
    Empilhar imagens em dispositivos móveis Se há duas imagens na seção, elas são exibidas em uma coluna, em vez de lado a lado.
    Exibir contêiner no dispositivo móvel No dispositivo móvel, esta opção coloca o texto em uma caixa sobre o banner gráfico.

    Bloco de título

    As configurações do bloco de título na seção de banner da imagem
    Configuração Descrição
    Título Texto grande para o título da caixa de texto.
    Tamanho do título Altera o tamanho do texto do título. Escolha entre médio (desktop: 40 px, dispositivo móvel: 30 px) e grande (desktop: 52 px, dispositivo móvel: 40 px).

    Bloco de texto

    As configurações do bloco de texto na seção Banner da imagem
    Configuração Descrição
    Descrição Exibe o texto em parágrafo.
    Estilo de texto Esta opção altera o estilo de texto no banner gráfico. Escolha entre corpo, subtítulo e maiúscula.

    Bloco de botão

    As configurações do bloco de botão na seção Banner da imagem
    Configuração Descrição
    Primeira etiqueta de botão O texto exibido no primeiro botão.
    Primeiro link de botão O URL ao qual você quer vincular o primeiro botão.
    Usar estilo de botão com contorno Ajusta o estilo do botão para ser um contorno de um botão em vez de ter um plano de fundo sólido.
    Segunda etiqueta de botão O texto exibido no segundo botão.
    Segundo link de botão O URL ao qual você quer vincular o segundo botão.
    Usar estilo de botão com contorno Ajusta o estilo do botão para ser um contorno de um botão em vez de ter um plano de fundo sólido.

    Imagem com texto

    É possível adicionar uma seção que contenha uma imagem e um bloco de texto com um botão opcional para enviar os clientes a uma nova página. Lembre-se de combinar o texto com uma imagem para manter o foco no produto, na coleção ou no post do blog em questão. Adicione também informações sobre disponibilidade, estilo ou até mesmo uma avaliação.

    Configurações de seção

    As configurações da seção de imagem com texto
    Configuração Descrição
    Imagem A imagem da seção. Clique no botão Alterar para alterar ou remover a imagem.
    Editar texto alternativo Clique se quiser definir o texto alternativo da imagem para Otimização de mecanismos de pesquisa (SEO, na sigla em inglês). Além disso, é possível usar essa opção a fim de descrever a imagem para clientes que usam leitores de tela.
    Altura da imagem Escolha a altura da imagem:
    • Adaptar à imagem (padrão)
    • Pequena
    • Grande
    Largura da imagem no desktop A largura da imagem:
    • Pequena
    • Média (padrão)
    • Grande
    Posicionamento da imagem no desktop Escolha se a imagem ou o texto são exibidos primeiro. Por padrão, a imagem é exibida antes em layouts para dispositivo móvel.
    • Imagem primeiro (padrão para dispositivo móvel)
    • Imagem depois
    Posição do conteúdo no desktop A posição da imagem para desktop:
    • Acima (padrão)
    • Meio
    • Abaixo
    Alinhamento do conteúdo no desktop O alinhamento do texto para desktop:
    • Esquerda (padrão)
    • Centro
    • Direita
    Layout do conteúdo Permite que as caixas de texto e de imagem se sobreponham uma à outra. Se a opção Sem sobreposição for selecionada, o conteúdo será ajustado para acomodar o texto e a imagem.
    • Com sobreposição
    • Sem sobreposição (padrão)
    Esquema de cores Para a cor de fundo da imagem com texto e do preenchimento dela, é possível escolher entre estas opções: Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.
    Layout para dispositivo móvel Escolha o alinhamento do conteúdo para dispositivo móvel:
    • Esquerda (padrão)
    • Direita
    • Centro

    Bloco de título

    As configurações do bloco de título na seção Imagem com texto
    Configuração Descrição
    Título Texto do título da seção.
    Tamanho do título Tamanho do título do texto:
    • Pequena
    • Média (padrão)
    • Grande

    Bloco de texto

    As configurações do bloco de texto na seção Imagem com texto
    Configuração Descrição
    Conteúdo Exibe o texto em parágrafo na seção de texto.
    Estilo de texto Estilo de texto do conteúdo:
    • Corpo (padrão)
    • Legenda

    Bloco de botão

    As configurações do bloco de botão na seção Imagem com texto
    Configuração Descrição
    Etiqueta de botão O texto exibido no botão.
    Link de botão O URL ao qual você quer vincular o botão.

    Bloco de legenda

    As configurações do bloco de legenda na seção de imagem com texto
    Configuração Descrição
    Texto Adicione um slogan ou uma legenda à imagem. O texto aparecerá na parte inferior da seção de imagem com texto.
    Estilo de texto Estilo do texto do conteúdo:
    • Maiúscula (padrão)
    • Legenda
    Tamanho do texto Tamanho do texto do conteúdo:
    • Pequena
    • Média (padrão)
    • Grande

    Multicoluna

    Mostre o conteúdo em uma seção com várias colunas e adicione um botão abaixo delas para direcionar o cliente a uma nova página. Lembre-se de combinar o texto com uma imagem para manter o foco no produto, na coleção ou no post do blog em questão. Adicione também informações sobre disponibilidade e estilo ou mostre uma avaliação.

    Configurações de seção

    As configurações da seção multicoluna
    Configuração Descrição
    Título O título da seção.
    Largura da imagem

    A largura das imagens adicionadas às colunas.

    • Largura total da coluna: a largura da imagem é o tamanho total da coluna.
    • Largura de metade da coluna: a largura da imagem é metade do tamanho da coluna.
    • Largura de um terço da coluna: a largura da imagem é um terço do tamanho da coluna.
    Proporção da imagem

    A proporção da imagem:

    • Adaptar à imagem: usa a proporção da imagem para evitar que ela seja cortada.
    • Retrato: corta a imagem para usar a proporção 2:3.
    • Quadrado: corta a imagem para usar a proporção 1:1.
    • Círculo: corta a imagem para exibir em um círculo.
    Alinhamento da coluna

    O alinhamento das imagens e do texto nas colunas:

    • Esquerda (padrão): alinha as imagens e o texto à esquerda.
    • Centro: alinha as imagens e o texto no centro.
    Fundo secundário

    Ajusta o estilo da seção com base no plano de fundo:

    • Nenhum: o plano de fundo da coluna e da seção permanece na cor do Plano de fundo 1, e não há preenchimento nas colunas.
    • Exibir como plano de fundo da coluna: o plano de fundo das colunas fica na cor opaca do texto e adiciona preenchimento às colunas.
    • Mostrar como plano de fundo da seção: o plano de fundo da seção é a cor opaca do texto, o fundo das colunas é o Plano de fundo 1, e o preenchimento é adicionado às colunas.
    Etiqueta de botão O texto exibido no botão.
    Link de botão O URL ao qual você quer vincular o botão.
    Habilitar gesto de deslizar em dispositivos móveis Altera a exibição de coluna para linha em dispositivos móveis. Dessa forma, os clientes podem deslizar para os lados e ver mais blocos de colunas.

    Bloco da coluna

    Uma seção pode ter no máximo 12 colunas. Quando há um, dois ou três blocos de coluna, eles são exibidos em uma linha no desktop. Caso haja quatro ou mais blocos, eles serão mostrados em um layout de duas colunas. Já nos dispositivos móveis, esses blocos aparecem em uma única coluna, a menos que a opção Habilitar gesto de deslizar em dispositivos móveis esteja habilitada.

    As configurações do bloco da coluna na seção multicoluna
    Configuração Descrição
    Imagem A imagem que você quer exibir.
    Título O título da coluna.
    Descrição O texto do parágrafo na coluna.

    Página

    Você pode optar por exibir o conteúdo de uma página personalizada em uma seção. Isso leva o conteúdo inteiro da página para a seção, mas não leva o código Liquid de modelos.

    O esquema de cores da seção usa as seguintes configurações:

    • Por padrão, o texto tem a cor Texto. Os estilos aplicados ao texto na página se estendem à seção como um todo.
    • Os hiperlinks usam a cor Destaque 1.

    Configurações de seção

    As configurações da seção Página
    Configuração Descrição
    Página A página da loja virtual que será exibida.

    Rich text

    É possível adicionar uma seção de rich text com um cabeçalho, conteúdo de parágrafo e um botão para vincular os clientes a uma nova página.

    Configurações de seção

    As configurações da seção de rich text
    Configuração Descrição
    Esquema de cores Para o plano de fundo da seção rich text, é possível escolher entre estas opções: Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.
    Definir seção com largura total Por padrão, as seções têm largura total.

    Bloco de título

    As configurações do bloco de título na seção de rich text
    Configuração Descrição
    Título O título da seção.
    Tamanho da fonte do título

    O tamanho do texto do título:

    • Pequeno — desktop: 24 px, dispositivo móvel: 20 px
    • Médio — desktop: 40 px, dispositivo móvel: 30 px
    • Grande — desktop: 52 px, dispositivo móvel: 40 px

    Bloco de texto

    O bloco Texto é uma boa maneira de compartilhar informações sobre a marca com os clientes. Use-o para descrever os benefícios dos produtos, fazer comunicados, dar as boas-vindas da loja ou divulgar os valores da marca.

    As configurações do bloco de texto na seção de rich text
    Configuração Descrição
    Descrição Texto em parágrafo para o conteúdo principal da seção.

    Bloco de botão

    As configurações do bloco de botão na seção de rich text
    Configuração Descrição
    Etiqueta de botão O texto exibido no botão.
    Link de botão O URL ao qual você quer vincular o botão.
    Usar estilo de botão com contorno Ajusta o estilo do botão para ser um contorno de um botão em vez de ter um plano de fundo sólido.

    Apresentação de slides

    É possível adicionar uma seção de apresentação de slides para exibir um carrossel com até cinco imagens em uma página da loja.

    Configurações de seção

    As configurações da seção de apresentação de slides
    Configuração Descrição
    Layout Escolha largura total (padrão) ou grade. A largura total exibe a apresentação de slides na largura total da seção, já a grade exibe a apresentação de slides com preenchimento nos dois lados.
    Altura do slide

    A altura da apresentação de slides:

    • Adaptar à primeira imagem (padrão): todas as imagens terão a mesma altura que a primeira do carrossel.
    • Pequena
    • Médio
    • Grande
    Estilo de paginação

    O estilo de navegação da apresentação de slides que aparece abaixo das imagens.

    • Pontos
    • Balcão (padrão)
    • Números
    Alternar slides automaticamente

    Marque esta caixa para alternar automaticamente as imagens na apresentação de slides. Se essa caixa não for marcada, a apresentação exibirá uma imagem estática até que o cliente avance manualmente.

    Alterar cronômetro de slides Use a barra para definir o tempo de rotação automática da apresentação de slides. O tempo mínimo é de três segundos e o máximo é de nove segundos.
    Layout para dispositivo móvel Marque a caixa para exibir o conteúdo abaixo das imagens no dispositivo móvel.
    Acessibilidade Adicione uma descrição à apresentação de slides para clientes com deficiência visual.

    Configurações do slide de imagem

    As configurações das imagens da seção de apresentação de slides
    Configuração Descrição
    Imagem Imagem estática para a apresentação de slides. Clique na imagem para selecionar uma nova ou use o menu Alterar se quiser alterá-la ou removê-la.
    Editar texto alternativo

    Descreva a apresentação de slides para clientes que usam leitores de tela.

    Título

    Texto opcional para o título da imagem. O texto é adicionado a cada imagem individualmente.

    Tamanho do título

    Escolha entre um pequeno, médio (padrão) ou grande.

    Subtítulo Subtítulo opcional para a imagem. O texto é adicionado individualmente a cada imagem.
    Etiqueta de botão Digite o texto de um botão ou deixe essa opção em branco para ocultá-lo.
    Link de botão O URL ao qual você quer vincular o botão.
    Usar estilo de botão com contorno Clique na caixa de seleção para alternar entre um botão sólido ou contornado.
    Posição do conteúdo no desktop A posição da caixa de conteúdo sobre a imagem. Escolha entre acima, meio ou abaixo e entre esquerda, centro ou direita. Observe que meio/centro é a configuração-padrão.
    Exibir contêiner no desktop Marque esta opção para exibir a caixa de conteúdo.
    Alinhamento do conteúdo no desktop A posição do conteúdo sobre a imagem. Escolha entre esquerda, centro (padrão) ou direita.
    Opacidade de sobreposição de imagem Use o controle deslizante para ajustar a opacidade da sobreposição da imagem.
    Esquema de cores Altere a cor de fundo da caixa de conteúdo. Escolha entre Destaque 1, Destaque 2, Plano de fundo 1 (padrão), Plano de fundo 2 ou Inverso. Esta configuração exige que o contêiner seja exibido para afetar a imagem da apresentação de slides.
    Layout para dispositivo móvel Escolha como o conteúdo aparecerá em um dispositivo móvel. Escolha entre esquerda, centro (padrão) ou direita.

    Vídeo

    É possível adicionar uma seção para incorporar um vídeo do YouTube ou do Vimeo a uma página da loja.

    Configurações de seção

    As configurações da seção de vídeo
    Configuração Descrição
    Título O título da seção.
    Imagem de capa A imagem exibida antes que um cliente reproduza o vídeo.
    URL O link para o vídeo no YouTube ou no Vimeo. O vídeo precisa estar disponível publicamente.
    Texto alternativo do vídeo O texto alternativo do vídeo.
    Definir seção com largura total Remove o preenchimento padrão e deixa a seção na largura total da página.

    Tudo pronto para começar a vender com a Shopify?

    Experimente de graça