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 comunicados

A barra de comunicados permite que você comunique informações importantes a seus clientes na página que quiser e personalize até 12 blocos de comunicados diferentes. Também é possível adicionar um seletor de idiomas, um seletor de país ou região e ícones de redes sociais à barra de comunicados.

Se você tiver vários comunicados, escolha se alternará automaticamente os comunicados ou se permitirá que os clientes usem manualmente os botões de chevron.

Configurações de seção

As configurações da seção de barra de comunicados
Configuração Descrição
Esquema de cores Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
Exibir linha separadora Exibe uma linha para separar visualmente a barra de comunicados do conteúdo da página.
Ícones de redes sociais Exibe ícones de redes sociais que são links para suas contas nas redes sociais.
Girar automaticamente os comunicados Ative para alterar os comunicados automaticamente.
Mudar os slides a cada Selecione a frequência de alternância dos comunicados.
Habilitar seletor de país/região Adicione um seletor para que os clientes escolham entre os países e as regiões ativados nas configurações de pagamento. Dessa forma, eles podem ver os preços dos produtos na moeda que preferem.
Habilitar seletor de idioma Adicione um seletor para que os clientes escolham entre os países e as regiões ativados nas configurações de idioma. Assim, eles podem acessar a loja no idioma que preferem.

Bloco de comunicados

Adicione um texto e um link a um bloco de comunicados para que ele direcione clientes a uma página específica depois de ser clicado.

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.
Link O link para o qual você quer direcionar os clientes que clicarem na barra de comunicados.

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
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 Use o menu suspenso para escolher um tipo de menu para desktop:
  • Menu suspenso: exibe o conteúdo do menu do segundo nível, com o terceiro nível recolhido até que o item correspondente do segundo nível seja clicado. O tipo de menu é otimizado automaticamente para dispositivos móveis.
  • Megamenu: exibe todo o conteúdo dos menus de segundo e terceiro nível após o primeiro clique. O tipo de menu é otimizado automaticamente para dispositivos móveis.
  • Gaveta: exibe o menu de gaveta por meio de um ícone de menu de hamburger. Depois que este ícone é clicado, são exibidos todos os itens do primeiro nível do menu, que podem ser clicados para abrir outras camadas de navegação (nível dois e três).
Cabeçalho fixo

Escolha se quer usar e como exibir um cabeçalho fixo.

  • Nenhum: o cabeçalho não rola com o cliente.
  • Na rolagem da página para cima: o cabeçalho aparece quando o cliente rola a página para cima.
  • Sempre: o cabeçalho sempre é exibido quando o cliente rola a página para cima ou para baixo.
  • Sempre, reduzir o tamanho do logo: o cabeçalho sempre aparece quando o cliente rola a página para cima ou para baixo, e o tamanho do logo diminui em 25% durante esse procedimento.
Exibir linha separadora Exibe uma linha para separar visualmente o cabeçalho do conteúdo da página.
Esquema de cores Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
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.
Posição do logo em dispositivo móvel

Escolha onde o logo será exibido em dispositivos móveis.

  • Centro: o logo aparece no centro do cabeçalho.
  • Esquerda: o logo aparece à esquerda do cabeçalho.
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.

Bloco do cabeçalho

Confira abaixo os blocos que podem ser adicionados à seção Cabeçalho.

Configurações do bloco de app na seção de cabeçalho
Configuração Descrição
Apps Adicione até três apps compatíveis com a Online Store 2.0. Eles serão posicionados à esquerda do ícone do carrinho e estarão limitados ao tamanho de 44 pixels por 44 pixels.

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 Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
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 Exibir assinante de e-mail. Se a opção Exibir assinante de e-mail não estiver habilitada, o item não será exibido. Use os botões para deixar o texto em negrito ou itálico ou para adicionar um link.
Seguir no Shop Mostre o botão para seguir na vitrine no app do Shop. Saiba mais sobre o recurso Seguir no Shop.
Í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 ativas na loja. Os ícones de formas de pagamento que não foram registrados pelo provedor de pagamento podem não estar disponíveis. Em uma visita à loja, esses ícones são filtrados para exibir apenas as formas de pagamento aceitas na região e na moeda do cliente atual.
Mostrar links para políticas Mostra os ícones de links para políticas ao lado das informações sobre direitos autorais. Gere esses links em Configurações > Políticas no admin da Shopify. Saiba mais sobre como adicionar políticas à loja.
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. Use os botões para deixar o texto em negrito ou itálico ou para adicionar um link.
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 informações sobre a marca

Gerencie as informações sobre a marca nas configurações do tema. Saiba mais sobre as informações da marca.

As configurações do bloco para informações da marca na seção de rodapé
Configuração Descrição
Exibir ícones de redes sociais Exibe os ícones das redes sociais cujo link de perfil você tenha inserido nas configurações do tema.

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. Use os botões para deixar o texto em negrito ou itálico ou para adicionar um link.
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 Título da seção. Use os botões para deixar o texto em negrito ou itálico ou para adicionar um link.
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 Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
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 criar uma colagem de imagens, produtos, coleções e vídeos. Por padrão, cada seção de colagem contém três blocos: imagem, produto e coleção. Se você remover um desses, poderá adicionar outro de vídeo.

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.

As proporções recomendadas para todas as imagens nesta seção são 2:3 ou 1:1.

Configurações de seção

As configurações da seção de colagem
Configuração Descrição
Título Título da seção. Use os botões para deixar o texto em negrito ou itálico ou para adicionar um link.
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 Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
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. É possível fazer upload de uma imagem de capa personalizada no admin da Shopify.
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.

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.

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. Use os botões para deixar o texto em negrito ou itálico ou para adicionar um link.
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 Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
Esquema de cores do contêiner Um conjunto de cores que podem ser aplicadas ao contêiner. Saiba mais sobre esquemas de cores. Vale lembrar que o esquema selecionado é exibido apenas quando a opção Layout está definida como contêiner de Linha ou 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 Título da seção. Use os botões para deixar o texto em negrito ou itálico ou para adicionar um link.
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 Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
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 esse endereço pode ser alterado na página de configurações Notificações 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 Título da seção. Use os botões para deixar o texto em negrito ou itálico ou para adicionar um link.
Tamanho do título Altera o tamanho do texto do título. Escolha entre pequeno, médio e grande.
Esquema de cores Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
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 disponibilizados nas instruções dos apps baixados para incluir apps nas 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 Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
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.

Banner de assinante de e-mail

É 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 Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.


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

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 Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
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 Título da seção. Use os botões para deixar o texto em negrito ou itálico ou para adicionar um link.
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.

É 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. Use os botões para deixar o texto em negrito ou itálico ou para adicionar um link. Para inserir uma fonte dinâmica como título da seção, clique no botão correspondente.
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: 25.
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 Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
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.
Formato da imagem Escolha um dos formatos abaixo para as imagens de produto:
  • Padrão: altera a imagem do produto para o formato retangular.
  • Arco: curva a parte superior da imagem do produto.
  • Bolha: arredonda a imagem do produto com uso de um dentre seis formatos de bolha aleatórios que mostram uma animação exclusiva quando o mouse passa sobre eles.
  • Chevron para a esquerda: altera a imagem do produto para o formato de chevron com uma inclinação acentuada para a esquerda.
  • Chevron para a direita: altera a imagem do produto para o formato de chevron com uma inclinação acentuada para a direita.
  • Diamante: altera a imagem do produto para o formato de diamante com quatro lados.
  • Paralelogramo: altera a imagem do produto para um formato com dois pares de linhas paralelas.
  • Arredondado: arredonda a imagem do produto para um formato circular ou oval que mostra uma animação exclusiva quando o mouse passa sobre ele.
Exibir segunda imagem ao passar o cursor Quando o cliente passa o cursor sobre a imagem do produto, outra é exibida, se houver.
Exibir fornecedor 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.

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 Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
Exibir plano de fundo secundário Exibe o produto em destaque na cor do plano de fundo secundário.
Largura da mídia para desktop Escolha o tamanho da mídia: pequeno, médio ou grande. A imagem é otimizada automaticamente em dispositivos móveis.
Ajustar a mídia à tela Selecionar esta opção define uma altura máxima para a mídia, calculada de acordo com a altura da janela do navegador.
Ajuste da mídia Selecione Original para manter a proporção original da mídia ou Ajustar para enquadrá-la no contêiner.
Posição da mídia no desktop Defina se a mídia do produto em destaque está no lado esquerdo ou direito. Essa configuração se aplica apenas a usuários que acessam a página em um computador.
Zoom de imagem

Escolha como será o zoom da imagem em computadores:

  • Abrir janela modal: abre a imagem grande. Padrão para dispositivos móveis.
  • Sem zoom: desativa o zoom em imagens. Recomendável quando não são de alta resolução.
  • Clicar e passar o cursor: clique para aumentar o zoom na imagem e depois passe o cursor para ver as diferentes seções ampliadas. A passagem do cursor com redução do zoom é desabilitada quando as imagens aumentadas são clicadas de novo ou quando o mouse sai do contêiner da imagem. Se essa configuração estiver habilitada e o usuário estiver em um dispositivo móvel, a imagem será aberta em uma janela modal por padrão.
Ocultar mídia de outras variantes Selecione esta opção para ocultar a mídia de outras variantes depois 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.

É 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.
Ícone com texto O bloco exibe até três ícones que podem ser selecionados em uma lista de ícones pré-instalados ou em uma imagem carregada. Se você optar pelo upload de uma imagem, ela substituirá a seleção do menu suspenso de ícones. Para o layout dos ícones, selecione entre vertical ou horizontal. Para excluir um ícone, limpe o campo de título. Para exibir mais de três ícones, adicione outro bloco de "Ícone com texto".
SKU Este bloco exibe a SKU (Unidade de manutenção de estoque) de um produto quando a variante tem uma SKU associada a ela. Saiba mais sobre [como adicionar números de SKU às variantes de produto no admin](/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku#add-sku-numbers-to-your-product-variants-from-the-admin-sectioned%20themes-specific).

Banner de imagem

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.

  • Adaptar à primeira imagem: define a altura da seção para se adaptar à altura da primeira imagem.
  • 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
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 Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores. Vale lembrar que o esquema selecionado é exibido apenas quando a opção Exibir caixa de texto no desktop está selecionada.
Animações

Selecione uma animação para a imagem:

  • Nenhuma (padrão)
  • Movimentação do ambiente, que muda lentamente a posição da imagem dentro do contêiner.
  • Posição de fundo fixa: quando um cliente rola a página, os elementos em primeiro plano, como texto e botões, movem-se na mesma velocidade, enquanto o fundo permanece fixo.
  • Zoom na rolagem: quando um cliente rola a página, os elementos em primeiro plano, como texto e botões, movem-se na mesma velocidade, enquanto o fundo permanece fixo e a imagem aumenta.
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. Use os botões para deixar o texto em negrito ou itálico ou para adicionar um link.
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
  • Médio
  • 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 Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
Animações

Selecione uma animação para a imagem:

  • Nenhuma (padrão)
  • Movimentação do ambiente, que muda lentamente a posição da imagem dentro do contêiner.
  • Zoom na rolagem: quando um cliente rola a página, os elementos em primeiro plano, como texto e botões, movem-se na mesma velocidade, enquanto o fundo permanece fixo e a imagem aumenta.
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. Use os botões para deixar o texto em negrito ou itálico ou para adicionar um link.
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

Várias colunas

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 Título da seção. Use os botões para deixar o texto em negrito ou itálico ou para adicionar um link.
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 Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
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 Título da coluna. Use os botões para deixar o texto em negrito ou itálico ou para adicionar um link.
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.

Várias linhas

É possível adicionar uma seção com várias linhas, cada uma com imagem, texto e um botão opcional. Para dar destaque a um produto, coleção ou post do blog, combine um texto com uma imagem. Adicione informações sobre disponibilidade, estilo ou mesmo uma avaliação.

Também é possível exibir conteúdo de metaobjetos por origens dinâmicas. Para mostrar entradas de metaobjetos, é necessário criar um, gerar as entradas e verificar se há acesso à vitrine antes de usá-los em seções multilinhas.

Configurações de seção

As configurações da seção multilinha
Configuração Descrição
Altura da imagem Escolha a altura da imagem:
  • Adaptar à imagem
  • Pequena
  • Média (padrão)
  • Grande
Largura da imagem no desktop A largura da imagem:
  • Pequena
  • Média (padrão)
  • Grande
Tamanho do título Altera o tamanho do texto do título. Escolha entre pequeno, médio ou grande.
Estilo de texto Altera o estilo do texto. Escolha entre Corpo (padrão) e Subtítulo.
Estilo de botão Escolha entre um botão sólido e um botão de contorno.
Posição do conteúdo no desktop A posição vertical do conteúdo no contêiner:
  • Acima
  • Centro (padrão)
  • Abaixo
Alinhamento do conteúdo no desktop O alinhamento do texto no contêiner:
  • Esquerda (padrão)
  • Centro
  • Direita
Posicionamento da imagem no desktop Escolha a posição das imagens. O posicionamento é otimizado automaticamente para dispositivos móveis:
  • Alternar da esquerda (padrão)
  • Alternar da direita
  • Alinhado à esquerda
  • Alinhado à direita
Esquema de cores Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
Esquema de cores do contêiner Um conjunto de cores que podem ser aplicadas ao contêiner. Saiba mais sobre esquemas de cores.
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 linha

As configurações dos blocos para linha na seção multilinhas
Configuração Descrição
Imagem Clique em Selecionar imagem e escolha uma para a linha. Clique no botão Alterar se quiser mudar ou remover a imagem. E, para vincular às origens dinâmicas, clique no botão de origem.
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.
Legenda Adicione um slogan ou uma legenda à imagem.
Título Texto do título da linha. Use os botões para deixar o texto em negrito ou itálico ou para adicionar um link.
Texto Exibe um texto no estilo de parágrafo na linha.
Etiqueta de botão O texto exibido no botão.
Link de botão O URL ao qual você quer vincular o botão.

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 Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
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 Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
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.
Conexão com fontes dinâmicas Use fontes dinâmicas na seção de rich text para fazer referência a informações como metacampos ou metaoectos. Você pode até usar referências de lista para listas de saída de texto em seu tema. Por exemplo, uma lista de metacampos (mesmo que disponível em um metaoectect referenciado) pode ser usada para saída de uma lista de texto dentro da configuração de rich text em seu tema.

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: todas as imagens terão a mesma altura que a primeira do carrossel.
  • Pequena
  • Média (padrão)
  • 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.
Animações

Selecione uma animação para a imagem:

  • Nenhuma (padrão)
  • Movimentação do ambiente, que muda lentamente a posição da imagem dentro do contêiner
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 de cabeçalho para a imagem. O texto é adicionado individualmente a cada imagem. Use os botões para deixar o texto em negrito ou itálico ou para adicionar um link.

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. Use os botões para deixar o texto em negrito ou itálico ou para adicionar um link.
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 Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores. Essa 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 Título da seção. Use os botões para deixar o texto em negrito ou itálico ou para adicionar um link.
Tamanho do título Altera o tamanho do texto do título. Escolha entre pequeno, médio e grande.
Reproduzir vídeo ininterruptamente Quando essa opção estiver marcada, o vídeo recomeçará após o término.
Vídeo Adicione ou selecione seu próprio vídeo para a seção. É possível editar o vídeo para usar uma imagem de capa personalizada e adicionar um texto alternativo. Caso seja adicionado um vídeo hospedado na Shopify, ele será usado em vez do vídeo no URL definido na configuração abaixo.
URL O link do vídeo no YouTube ou no Vimeo. Vale lembrar que o vídeo precisa estar disponível publicamente e só será exibido se nenhum vídeo hospedado na Shopify for adicionado na configuração acima.
Imagem de capa A imagem exibida antes que um cliente reproduza o vídeo.
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 Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
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