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.
Todos os temas da Shopify incluem os recursos da loja virtual detalhados nesta página. Além disso, os temas pagos também podem incluir alguns desses recursos. Para saber mais, consulte o guia de atendimento sobre seu tema específico.
Nesta página
- Barra de comunicados
- Cabeçalho
- Rodapé
- Posts do blog
- Colagem
- Conteúdo recolhível
- Lista de coleções
- Formulário de contato
- Liquid personalizado
- Banner de assinante de e-mail
- Assinante de e-mail
- Coleção em destaque
- Produtos em destaque
- Banner de imagem
- Imagem com texto
- Várias colunas
- Várias linhas
- Página
- Rich text
- Apresentação de slides
- Vídeo
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
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.
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. |
Cabeçalho
O cabeçalho aparece em todas as páginas da loja virtual.
Configurações de seção
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.
|
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:
|
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. |
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.
|
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çã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. |
Rodapé
O rodapé é exibido em todas as páginas do tema.
Configurações de seção
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
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.
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. 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
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 | 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
- 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 | 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.
|
Layout para dispositivo móvel |
Como os blocos são exibidos em dispositivos móveis. Colagem: exibe as imagens em um layout de colagem:
|
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
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. 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:
|
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:
|
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 | 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:
|
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
- 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 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
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
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
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 |
Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores.
|
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 | 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
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
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 | 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:
|
Formato da imagem | Escolha um dos formatos abaixo para as imagens de produto:
|
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 e definições de metacampo de 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. |
Produtos 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 | 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:
|
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. |
Blocos de 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 e definições de metacampo de 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 | 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:
|
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. 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
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 | 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:
|
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. 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
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:
|
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
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.
|
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 | 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.
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
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 | 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:
|
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. 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
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
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.
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. |
Animações |
Selecione uma animação para a imagem:
|
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 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
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. |