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
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
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. |
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.
|
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. |
Cabeçalho fixo |
Escolha se quer usar e como exibir um cabeçalho fixo. |
Exibir linha separadora | Exibe uma linha para separar visualmente o cabeçalho do conteúdo da página. |
Posição do logo em dispositivo móvel |
Escolha onde o logo será exibido em dispositivos móveis. |
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
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. |
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 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. |
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
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 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.
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.
Configuração | Descrição |
---|---|
Título | O título do bloco. |
Subtexto | O texto a ser exibido no bloco. |
Bloco de imagem
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:
|
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
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
- No editor de temas, clique no título da seção de posts do blog.
- Na seção Blog, clique em Alterar.
- Selecione o blog.
- 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
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. |
Layout para dispositivo móvel |
Como os blocos são exibidos em dispositivos móveis.
|
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
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
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
Configuração | Descrição |
---|---|
Coleção | A coleção que você deseja exibir. |
Bloco de imagem
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
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:
|
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:
|
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
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
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:
|
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
- No editor de temas, clique no bloco Coleção em que você quer incluir uma coleção.
- Clique em Selecionar coleção.
- 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
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
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. |
Banner para assinatura 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
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.
|
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.
|
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
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
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
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
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
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
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: 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 | 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:
|
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
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. |
Largura da mídia para desktop | Escolha o tamanho da mídia pequeno, médio ou grande. Lembre-se de que a imagem é otimizada automaticamente para 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: |
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.
Bloco | Configurações |
---|---|
Texto | Digite o texto do produto em destaque:
|
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
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.
|
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
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
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
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
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:
|
Largura da imagem no desktop | A largura da imagem:
|
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.
|
Posição do conteúdo no desktop | A posição vertical do conteúdo no contêiner:
|
Alinhamento do conteúdo no desktop | O alinhamento do texto no contêiner:
|
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.
|
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:
|
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
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
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:
|
Bloco de botão
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
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:
|
Tamanho do texto | Tamanho do texto do conteúdo:
|
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
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.
|
Proporção da imagem |
A proporção da imagem:
|
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:
|
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.
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. |
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
Configuração | Descrição | Altura da imagem | Escolha a altura da imagem:
|
---|---|
Largura da imagem no desktop | A largura da imagem:
|
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:
|
Alinhamento do conteúdo no desktop | O alinhamento do texto no contêiner:
|
Posicionamento da imagem no desktop | Escolha a posição das imagens. O posicionamento é otimizado automaticamente para dispositivos móveis:
|
Esquema de cores | A cor de fundo da seção. 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 das linhas. Escolha 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:
|
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
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. |
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
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
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.
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.
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.
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.
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
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:
|
Estilo de paginação |
O estilo de navegação da apresentação de slides que aparece abaixo das imagens.
|
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
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
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. |