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 aparece em todas as páginas da loja virtual.

Configurações de seção

As configurações da seção de título
Configuração Descrição
Esquema de cores Para o plano de fundo do cabeçalho da loja, é possível escolher entre Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso no menu suspenso.
Imagem do logo Clique no botão Selecionar imagem para ver a biblioteca de mídia ou clique no botão Alterar para mudar ou remover a imagem da seção.
Editar texto alternativo Adicione uma breve descrição para melhorar o SEO e descrever a mídia para clientes que usam leitores de tela.
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 no desktop

A posição do logotipo no cabeçalho quando um cliente vê o site em uma tela grande. Nos dispositivos móveis, ela é otimizada automaticamente.

  • 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 na parte superior (padrão): exibe o logo acima do menu principal e alinha o logo e os itens de menu no centro.
Menu O menu que será o principal. Clique em Alterar para selecionar um menu diferente.
Tipo de menu para desktop Permite escolher um tipo de menu para desktop. A primeira opção, Suspenso, exibe o conteúdo no segundo nível do menu, e o terceiro nível fica recolhido até o item do segundo receber um clique. Já a outra alternativa, Megamenu, mostra todos os níveis no primeiro clique. Vale lembrar que o tipo de menu é otimizado automaticamente para dispositivos móveis.
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.
Espaçamento Use o controle deslizante para acrescentar um espaço entre 0 px e 100 px abaixo do cabeçalho, na margem inferior.
Preenchimento da seção Use o controle deslizante para adicionar de 0 px a 100 px de espaço à parte superior ou inferior do cabeçalho.

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 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.
Espaçamento Use o controle deslizante para acrescentar um espaço entre 0 px e 100 px acima do rodapé, na margem superior.
Preenchimento da seção Use o controle deslizante para acrescentar um espaço entre 0 px e 100 px na parte superior ou inferior do rodapé.

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 exibido no bloco. Apenas itens de menu de nível superior são exibidos no rodapé. Portanto, menus suspensos acabam não sendo exibidos como esperado.

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.
Tamanho do título Altera o tamanho do texto do título. Escolha entre pequeno, médio e grande.
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ê quer exibir na seção. Máximo: 4 posts.
Número de colunas no desktop Número de colunas exibido em desktops. Mínimo: 1. Máximo: 4.
Esquema de cores Para a cor de fundo da seção do blog, é possível escolher entre Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.
Exibir imagem em destaque Exibe a imagem em destaque no post do blog. Proporção sugerida: 3:2.
Exibir data Exibe a data em que o post foi criado.
Exibir autor Exibe o nome do autor dos posts.
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.
Preenchimento da seção Use o controle deslizante para acrescentar um espaço entre 0 px e 100 px na parte superior ou inferior da seção de posts 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.
Tamanho do título Altera o tamanho do texto do título. Escolha entre pequeno, médio e grande.
Layout para desktop

Saiba como a mídia de colagem é exibida no desktop.

  • 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 todas as mídias do mesmo tamanho e em uma coluna.
    Esquema de cores Para a cor de fundo da colagem, é possível escolher entre Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.
    Preenchimento da seção Use o controle deslizante para acrescentar um espaço entre 0 px e 100 px na parte superior ou inferior da seção de colagens.

    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.
    URL O link do YouTube ou do Vimeo para o vídeo, que precisa estar disponível publicamente. O vídeo será reproduzir em uma janela pop-up.
    Texto alternativo do vídeo O texto alternativo do vídeo. Descreve o contexto e a finalidade do vídeo para clientes que usam leitores de tela.
    Usar a proporção original da imagem Selecione esta opção para que a imagem não seja cortada.

    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 segunda imagem ao passar o cursor Quando o cliente passa o cursor sobre a imagem do produto, outra é exibida, se houver.

    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.

    Bloco de imagem

    As configurações do bloco de imagem na seção Colagem
    Configuração Descrição
    Imagem Clique no botão Selecionar imagem para escolher uma imagem ou clique no botão Alterar para mudar ou remover a imagem da seção.
    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.
    Usar a proporção original da imagem Selecione esta opção para que a imagem não seja cortada.

    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.
    Tamanho do título Altera o tamanho do texto do título. Escolha entre pequeno, médio e grande.
    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 Clique no botão Selecionar imagem para escolher uma imagem ou clique no botão Alterar para mudar ou remover a imagem da seção.
    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.
    Preenchimento da seção Use o controle deslizante para acrescentar um espaço entre 0 px e 100 px na parte superior ou inferior do conteúdo recolhível.

    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.
    Ícone Escolha um ícone na lista suspensa para exibir na frente do título do conteúdo recolhível. Por padrão, o ícone da marca de seleção está selecionado.
    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.

    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
    Tamanho do título Altera o tamanho do texto do título. Escolha entre pequeno, médio e grande.
    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.
    Número de colunas no desktop Número de colunas exibido em desktops. Mínimo: 1. Máximo: 5.
    Esquema de cores Para a cor de fundo na seção da lista de coleções, é possível escolher entre Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.
    Habilitar o botão "Ver tudo" se a lista incluir mais coleções que as mostradas Exibe um botão "Ver tudo" que leva os clientes à lista completa de coleções.
    Número de colunas em dispositivos móveis Define um layout de colunas específico para dispositivos móveis. Escolha entre 1 e 2 colunas.
    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.
    Preenchimento da seção Use o controle deslizante para acrescentar um espaço entre 0 px e 100 px na parte superior ou inferior da 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

    Configurações de seção

    As configurações para a seção do formulário de contato
    Configuração Descrição
    Título O título da seção
    Tamanho do título Altera o tamanho do texto do título. Escolha entre pequeno, médio e grande.
    Esquema de cores Para a cor de fundo na seção do formulário de contato, selecione entre Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.
    Preenchimento da seção Use o controle deslizante para acrescentar um espaço entre 0 px e 100 px na parte superior ou inferior do formulário de contato.

    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.

    Configurações de seção

    As configurações para a seção do Liquid personalizado
    Configuração Descrição
    Liquid personalizado Adicione snippets de app ou outros códigos do Liquid para criar personalizações avançadas.
    Esquema de cores Para a cor de fundo na seção do formulário de contato, selecione entre Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.
    Preenchimento da seção Use o controle deslizante para acrescentar um espaço entre 0 px e 100 px na parte superior ou inferior da seção do Liquid personalizado.

    É 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 Para a cor de fundo na seção do banner de assinante de e-mail, é 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.
    Tamanho do título Altera o tamanho do texto do título. Escolha entre pequeno, médio e grande.

    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 de fundo na seção Assinante de e-mail, é possível escolher entre 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 para assinatura de e-mail
    Configuração Descrição
    Título O título da seção.
    Tamanho do título Altera o tamanho do texto do título. Escolha entre pequeno, médio e grande.

    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 o cliente pode inserir um e-mail para se inscrever e receber materiais de marketing. O bloco não tem configurações personalizáveis.

    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 Título da seção. Clique no botão da origem dinâmica para inseri-la como título da seção.
    Tamanho do título Altera o tamanho do texto do título. Escolha entre pequeno, médio e grande.
    Descrição Digite um texto descritivo para a coleção em destaque. É possível usar formatações como negrito, itálico ou incluir links. Clique no botão da origem dinâmica para inseri-la na descrição da coleção em destaque.
    Mostrar a descrição da coleção no admin Marque esta caixa para usar a descrição adicionada à coleção no admin da Shopify em vez de textos inseridos no campo "Descrição" acima.
    Estilo da descrição Use o menu suspenso e escolha um estilo para a descrição da coleção em destaque. As opções são "Corpo" (padrão), "Título" ou "Maiúsculas".
    Coleção A coleção da qual você quer exibir os produtos. Clique em Alterar para remover ou alterar a coleção.
    Máximo de produtos a serem mostrados O número de produtos exibidos na coleção. Mínimo: 2. Máximo: 12.
    Número de colunas no desktop Número de colunas exibido em desktops. Mínimo: 1. Máximo: 5.
    Deixar os produtos na largura total Marque a caixa para exibir produtos na largura total da janela, independentemente da configuração de largura da página.
    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.
    Estilo "Ver tudo" Escolha entre um link, um botão sólido e um botão de contorno.
    Habilitar carrossel no desktop Marque a caixa para exibir produtos em um carrossel nas telas com tamanho superior a 989 pixels.
    Esquema de cores Para a cor de fundo na seção de coleções em destaque, é possível escolher entre Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.
    Proporção da imagem A proporção das imagens do produto:
    • Adaptar à imagem (padrão): 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.
    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.
    Habilitar botão para adicionar rapidamente Permite que os clientes adicionem itens ao carrinho no cartão do produto. Se houver variantes, o botão mostrará "Escolher opções" e exibirá informações em um pop-up. Assim, o cliente pode selecionar as variantes, adicionar o item ao carrinho, fazer checkout imediato com "Compre já" ou clicar para ver todos os dados do produto. Vale lembrar que para usar essa configuração o botão "Compre já" precisa estar habilitado na página do produto. Caso contrário, os clientes terão a opção de adicionar o item ao carrinho, mas não verão o fluxo de trabalho de checkout rápido do botão "Compre já".
    Número de colunas em dispositivos móveis Define um layout de colunas específico para dispositivos móveis. Escolha entre 1 e 2 colunas.
    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.
    Preenchimento da seção Use o controle deslizante para acrescentar um espaço entre 0 px e 100 px na parte superior ou inferior da seção de coleções em destaque.

    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.
    Esquema de cores Selecione o esquema de cores do produto em destaque.
    Exibir plano de fundo secundário Exibe o produto em destaque na cor do plano de fundo secundário.
    Ocultar mídia de outras variantes Selecione esta opção para ocultar a mídia de outras variantes assim que uma variante for selecionada.
    Habilitar loop de vídeo Permite que o vídeo seja reproduzido repetidamente após os clientes o iniciarem.
    Preenchimento da seção Use o controle deslizante para acrescentar um espaço entre 0 px e 100 px na parte superior ou inferior da seção de produtos em destaque.

    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 Tamanho do título: escolha entre Pequeno, Médio ou Grande.
    Preço Não há configurações personalizáveis no bloco.
    Seletor de variante Escolha entre pílulas ou um menu suspenso.
    Seletor de quantidade Não há configurações personalizáveis no bloco.
    Botões Comprar Marque a caixa Exibir botões de checkout dinâmico para exibir as opções habilitadas nas configurações de Pagamentos.
    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 Adiciona um código HTML ou Liquid personalizado.
    Apps Adicione um app compatível com a Online Store 2.0.

    A seção de banner de 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 de 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 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 para a seção do banner de imagem, é possível escolher entre 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 Exibir 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 de 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 pequeno, médio e grande.

    Bloco de texto

    As configurações do bloco de texto na seção Banner de 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 de 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 Clique em Selecionar imagem para escolher uma imagem para a seção. Clique no botão Alterar para mudar 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 vertical do conteúdo no contêiner:
    • Acima (padrão)
    • Meio
    • Abaixo
    Alinhamento do conteúdo no desktop O alinhamento do texto no contêiner:
    • 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, é possível escolher entre 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
    Preenchimento da seção Use o controle deslizante para acrescentar um espaço entre 0 px e 100 px na parte superior ou inferior da seção de imagem com texto.

    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 Altera o tamanho do texto do título. Escolha entre pequeno, médio e 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.
    Tamanho do título Altera o tamanho do texto do título. Escolha entre pequeno, médio e grande.
    Largura da imagem

    A largura das imagens adicionadas às colunas.

    • Largura total da coluna (padrão): 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 (padrão): 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.
    Número de colunas no desktop Use a escala de intervalo para selecionar o número de colunas que aparecem em desktops. O mínimo é 1, e o máximo é 6.
    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 Escolha Nenhum, para ocultar o plano de fundo secundário, ou Exibir como plano de fundo da coluna, para alterar as cores do contêiner da coluna.
    Etiqueta de botão O texto exibido no botão.
    Link de botão O URL ao qual você quer vincular o botão.
    Esquema de cores Para a cor de fundo na seção de várias colunas, é possível escolher entre Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.
    Número de colunas em dispositivos móveis Define um layout de colunas específico para dispositivos móveis. Escolha entre 1 e 2 colunas.
    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.
    Preenchimento da seção Use o controle deslizante para acrescentar um espaço entre 0 px e 100 px na parte superior ou inferior da seção de várias 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.
    Etiqueta de link [opcional] O texto de um link adicionado abaixo do bloco da coluna. Deixe em branco caso não tenha o link.
    Link URL do link. Deixe em branco se não houver um link.

    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.

    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.
    Tamanho do título Altera o tamanho do texto do título. Escolha entre pequeno, médio e grande.
    Esquema de cores Para a cor de fundo na seção do bloco de coleção, é possível escolher entre Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.
    Preenchimento da seção Use o controle deslizante para acrescentar um espaço entre 0 px e 100 px na parte superior ou inferior da seção de página.

    Rich text

    É possível adicionar uma seção de rich text com cabeçalho, legenda, texto e um botão para levar 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
    Posição do conteúdo no desktop Escolha a posição do contêiner de rich text e use o menu suspenso para selecionar esquerda, centro (padrão) ou direita. Vale lembrar que o conteúdo é otimizado automaticamente para dispositivos móveis.
    Alinhamento de conteúdo Essa configuração afeta o alinhamento de texto em todos os blocos da seção de rich text. Use o menu suspenso para escolher esquerda, centro (padrão) ou direita.
    Esquema de cores Para o plano de fundo da seção rich text, é possível escolher entre 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.
    Preenchimento da seção Use o controle deslizante para acrescentar um espaço entre 0 px e 100 px na parte superior ou inferior da seção de rich text.

    Bloco de título

    É possível ter até três blocos de cabeçalho na seção de rich text.

    As configurações do bloco de título na seção de rich text
    Configuração Descrição
    Título Título da seção. Use os botões para deixar o texto em negrito, itálico ou adicionar um link. Clique no botão de origem para vincular a origens dinâmicas.
    Tamanho do título Altera o tamanho do texto do cabeçalho. Escolha entre pequeno, médio e grande.

    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.

    É possível ter até três blocos de texto na seção de rich text.

    As configurações do bloco de texto na seção de rich text
    Configuração Descrição
    Descrição Texto no estilo de parágrafo para o conteúdo principal da seção. Clique no botão de origem para vincular às origens dinâmicas.

    Bloco de legenda

    É possível ter até três blocos de legenda na seção de rich text.

    As configurações do bloco de texto na seção de rich text
    Configuração Descrição
    Texto Adicione um breve slogan à seção de rich text.
    Estilo de texto Use o menu suspenso para selecionar um estilo de texto entre Subtítulo (padrão) e Maiúsculas.
    Tamanho do texto Use o menu suspenso para definir o tamanho para o texto da legenda. Escolha entre pequeno, médio (padrão) e grande.

    Bloco de botão

    É possível ter até dois blocos de botões na seção de rich text.

    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 Escolha uma imagem estática ou dinâmica para a apresentação de slides. Clique em Selecionar imagem para ver a biblioteca de mídia ou clique no botão de origem para conectar a uma origem dinâmica. Depois, clique no botão Alterar para remover, alterar ou excluir a imagem.
    Editar texto alternativo

    Descreva a imagem da apresentação de slides e informe o contexto aos 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 que será vinculado ao botão. Clique no botão de origem para adicionar uma origem dinâmica como URL.
    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 Alinha o texto no contêiner. É possível escolher 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.
    Tamanho do título Altera o tamanho do texto do título. Escolha entre pequeno, médio e grande.
    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. Descreve o contexto e a finalidade do vídeo para clientes que usam leitores de tela.
    Definir seção com largura total Remove o preenchimento padrão e deixa a seção na largura total da página.
    Esquema de cores Para a cor de fundo na seção do bloco de coleção, é possível escolher entre Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.
    Preenchimento da seção Use o controle deslizante para acrescentar um espaço entre 0 px e 100 px na parte superior ou inferior da seção de vídeo.

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

    Experimente de graça