Tipos de página
Cada página tem suas próprias seções e configurações padrão que você pode editar e personalizar no editor de temas.
É possível adicionar até 25 seções a uma página e até 50 blocos a uma seção.
Nesta página
Páginas de produtos
Por padrão, as páginas de produto têm uma seção de Informações do produto e uma de Produtos relacionados.
A seção Informações do produto contém os seguintes blocos padrão:
- Texto (a exibição padrão é o atributo
vendor
) - Título
- Preço
- Seletor de variante
- Seletor de quantidade
- Botões Comprar
- Descrição
- Compartilhar
Você também pode adicionar os seguintes blocos-padrão:
- Texto
- SKU
- Status do estoque
- Liquid personalizado
- Linha recolhível
- Pop-up
- Avaliação do produto
- Produtos complementares
- Ícone com texto
Configurações da seção de informações do produto
Configuração | Descrição |
---|---|
Habilitar conteúdo persistente no desktop | Ao rolar uma página para baixo, a rolagem da coluna de informações do produto só começa depois que todas as imagens forem visualizadas. |
Largura da mídia para desktop | Escolha entre pequeno, médio ou grande. Essa configuração é válida apenas para usuários que acessam a página em um computador. Nos dispositivos móveis, a posição da mídia é otimizada automaticamente. |
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 no dispositivo. |
Ajuste da mídia | Selecione Original para manter a proporção original da mídia ou Ajustar para enquadrá-la no contêiner. |
Layout para desktop |
A maneira como a mídia do produto é exibida no desktop. |
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 é válida apenas para usuários que acessam a página em um computador. |
Zoom de imagem |
Escolha como será o zoom da imagem em computadores: |
Layout para dispositivo móvel | Oculte ou exiba imagens em miniatura nos dispositivos móveis. |
Ocultar a mídia de outras variantes quando uma variante for selecionada | Quando uma variante é selecionada, as imagens de outras ficam ocultas da visualização até que a seleção seja desfeita. |
Habilitar loop de vídeo | Define a reprodução automática do vídeo em loop. |
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 "Informações do produto". |
Blocos de informações do produto
Os blocos a seguir podem ser adicionados à seção Informações do produto.
Bloco de texto
O bloco de texto pode ser usado para exibir texto estático ou dados variáveis por meio de origens dinâmicas. Por exemplo, é possível adicionar um texto com uma mensagem de marketing, como "Frete grátis acima de US$ 100", idêntica em todos os produtos. Outra opção é adicionar uma origem dinâmica, como o campo Fabricante, que muda dependendo do produto visualizado.
Configuração | Descrição |
---|---|
Texto | Adiciona informações à página do produto. Compatível com texto ou origens dinâmicas. |
Estilo de texto |
Altera o estilo do texto:
|
Bloco de título
Este bloco exibe o título do produto e não tem configurações ajustáveis.
Bloco de preço
Este bloco exibe as informações de preços do produto, como preço e Comparação de preços, e não tem configurações ajustáveis.
Bloco de seletor de variante
Este bloco exibe todas as opções de variantes do produto. O seletor de variante é mostrado apenas para itens que têm essa opção. Se você remover esse bloco e tiver produtos com opções de variante, seus clientes não poderão escolher a opção de variante que querem e não poderão comprar o produto.
Configuração | Descrição |
---|---|
Tipo |
Altera a forma como as variantes são exibidas aos clientes:
|
Bloco de botões Comprar
Este bloco exibe o botão "Adicionar ao carrinho" e as informações de retirada na loja. Ele também pode exibir botões de checkout dinâmico.
Configuração | Descrição |
---|---|
Exibir botões de checkout dinâmico | Mostra as opções de checkout dinâmico ativadas nas configurações de Pagamento. |
Mostrar formulário de informações do destinatário para produtos "cartão-presente" | Exibe uma caixa de seleção opcional nos produtos "cartão-presente" para permitir que os clientes enviem e agendem o cartão-presente a um destinatário junto com uma mensagem pessoal. |
Bloco de descrição
Este bloco exibe a descrição do produto. e não tem configurações ajustáveis.
Bloco de avaliação do produto
Este bloco exibe a avaliação média do produto em estrelas, com o número de avaliações entre parênteses, por exemplo: ★★★★★ (8).
Para exibir as classificações, é necessário ter um app de avaliação de produtos e definições de metacampo para reviews.rating_count
e reviews.rating
.
Bloco de produtos complementares
Este bloco exibe produtos complementares que precisam ser configurados no app Shopify Search & Discovery.
Configuração | Descrição |
---|---|
Título |
O título do bloco. |
Exibir como linha recolhível |
Quando selecionada, o conteúdo fica recolhido em uma aba da linha. Se o cliente clicar no título, a aba se expande e mostra o que estava oculto. |
Ícone |
Selecione um ícone para o título quando os produtos complementares são exibidos como uma linha recolhível. |
Máximo de produtos a serem mostrados |
Selecione o número máximo de produtos complementares para exibir. É possível escolher o mínimo de um e o máximo de dez. |
Número de produtos por página |
O número de produtos complementares que você quer exibir por página deslizante. Selecione um valor entre 1 e 4. |
Estilo de paginação |
O estilo de navegação da página deslizante que aparece abaixo das imagens.
|
Proporção da imagem |
Determina a proporção das imagens no cartão do produto.
|
Exibir 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 as informações em questão em um pop-up. Os clientes podem selecionar variantes para adicionar ao carrinho, finalizar a compra com a opção Compre já ou clicar para ver todas as informações do item. Vale lembrar que é preciso configurar o botão Compre já fora da página do produto para que apareça nas opções rápidas. No entanto, ainda é possível adicionar o item ao carrinho quando essa opção não está disponível. |
Bloco de compartilhamento
Este bloco mostra um link clicável que permite aos clientes compartilhar o produto nas redes sociais deles.
Configuração | Descrição |
---|---|
Texto | O texto em que os clientes clicam para compartilhar o produto nas redes sociais deles. |
Bloco de SKU
Exibe a Unidade de manutenção de estoque (SKU) associada ao produto, quando relevante.
Configuração | Descrição |
---|---|
Estilo de texto |
Altera o estilo do texto:
|
Ícone com bloco de texto
Exibe até três ícones com texto. É possível escolher entre logos-padrão ou uma imagem própria.
Configuração | Descrição |
---|---|
Layout | Escolha o layout horizontal ou vertical para a seção. |
Primeiro ícone | Escolha um ícone-padrão. |
Primeira imagem | Escolha uma imagem para o primeiro ícone. Essa ação substitui os outros selecionados na configuração do primeiro ícone. Clique em Selecionar imagem e escolha uma. Clique no botão Alterar se quiser mudar ou remover a imagem. |
Editar texto alternativo | Adicione uma breve descrição da imagem para melhorar o SEO e descrever a imagem para clientes que usam leitores de tela. |
Primeiro título | Adicione um título para o primeiro ícone. |
Segundo ícone | Escolha um ícone-padrão. |
Segunda imagem | Escolha uma imagem para o segundo ícone. Essa ação substitui os outros selecionados na configuração do segundo ícone. Clique em Selecionar imagem e escolha uma. Clique no botão Alterar se quiser mudar ou remover a imagem. |
Editar texto alternativo | Adicione uma breve descrição da imagem para melhorar o SEO e descrever a imagem para clientes que usam leitores de tela. |
Segundo título | Adicione um título para o segundo ícone. |
Terceiro ícone | Escolha um ícone-padrão. |
Terceira imagem | Escolha uma imagem para o terceiro ícone. Essa ação substitui os outros selecionados na configuração do terceiro ícone. Clique em Selecionar imagem e escolha uma para a seção. Clique no botão Alterar se quiser mudar ou remover a imagem. |
Editar texto alternativo | Adicione uma breve descrição da imagem para melhorar o SEO e descrever a imagem para clientes que usam leitores de tela. |
Terceiro título | Adicione um título ao terceiro ícone. |
Bloco de status do estoque
Exibe o status de estoque para o produto. É possível mostrar o estoque restante ou o estoque restante somente após a contagem de produtos atingir o limite definido por você. O status do estoque só é exibido para produtos com acompanhamento de estoque ativado.
Configuração | Descrição |
---|---|
Estilo de texto | Selecione o estilo do texto. Escolha entre Corpo, Subtítulo ou Maiúsculas. |
Limite de estoque baixo | Use o controle deslizante para definir um limite de 0 a 100 quando os produtos exibirem um estoque baixo. Vale lembrar que, se você escolher zero, o estoque será mostrado como sempre disponível até acabar totalmente. |
Mostrar contagem de estoque | Selecione esta opção quando quiser mostrar a contagem de estoque disponível dos produtos. |
Bloco do seletor de quantidade
Este bloco, sem configurações ajustáveis, exibe um seletor de quantidade para que os clientes escolham quantas unidades do produto querem comprar. A quantidade padrão é 1.
Bloco do Liquid personalizado
Esse bloco exibe o código HTML ou Liquid personalizado que é possível adicionar a ele.
Configuração | Descrição |
---|---|
Liquid personalizado | Exibe o conteúdo que você pode inserir como código HTML ou Liquid. |
Bloco de aba recolhível
Este bloco exibe uma aba recolhível com um título. Quando o cliente clica no título, ela se expande para exibir conteúdo adicional.
Configuração | Descrição |
---|---|
Título | O título da aba. É exibido quando a aba está recolhida e expandida. |
Conteúdo da aba | O conteúdo da aba, exibido somente quando ela é expandida. |
Conteúdo da aba da página | Exibe o conteúdo de uma página na aba. Exibe apenas o conteúdo da página do editor de páginas. Nenhuma estilização do Liquid do modelo da página é exibida neste bloco. O conteúdo inserido no Conteúdo da aba é exibido acima do conteúdo da página. |
Bloco pop-up
Este bloco exibe um texto clicável que abre uma janela pop-up com o conteúdo de uma de suas páginas.
Configuração | Descrição |
---|---|
Etiqueta do link | O texto em que os clientes clicam para exibir a janela pop-up. |
Página | A página cujo conteúdo, incluído no editor, você quer exibir na janela pop-up. Vale lembrar que nenhum estilo Liquid do modelo de páginas é exibido nessa tela. |
Bloco de 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.
Ícone com bloco de 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.
Bloco de status do estoque
Este bloco exibe o status do estoque dos produtos, como em estoque, estoque baixo ou fora de estoque. Por padrão, o limite de estoque baixo é definido como 10, mas pode ser alterado para ser qualquer número de 0 a 100. Se você selecionar a caixa Mostrar contagem de estoque, a quantidade exata de itens em estoque será exibida aos clientes.
Quando um item está esgotado, o status fora de estoque é exibido. No entanto, se você selecionou a opção Continuar vendendo quando estiver fora de estoque, o status Em estoque continuará a ser exibido depois que o estoque chegar a zero ou menos.
Configurações da seção de recomendações de produtos
Com base no produto sendo visualizado, esta seção exibe outros semelhantes, com descrição parecida ou comprados frequentemente junto com ele.
Configuração | Descrição |
---|---|
Título | O título da seção. Use uma origem dinâmica. |
Tamanho do título | Altera o tamanho do texto do título. Escolha entre pequeno, médio e grande. |
Máximo de produtos a serem mostrados | Use o controle deslizante para selecionar o número máximo de produtos recomendados a serem exibidos. Mínimo: 2. Máximo: 10. |
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. |
Proporção da imagem | A proporção da imagem para as imagens dos produtos recomendados:
|
Exibir segunda imagem ao passar o cursor | Quando o cliente passa o cursor sobre a imagem do produto, é exibida outra, se houver. | Exibir fornecedor | Exibe o fabricante de cada produto. |
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. |
Número de colunas em dispositivos móveis | Defina um layout de colunas específico para dispositivos móveis. Escolha entre 1 e 2 colunas. |
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. |
Para saber mais sobre recomendações de produtos, consulte as Noções básicas sobre recomendações de produtos.
Configurações da seção de lista de pedidos rápidos
Adicione a seção Lista de pedidos rápidos ao modelo Produtos para que os clientes possam fazer pedidos em massa de várias quantidades de produto rapidamente em diferentes variantes de produto.
Configuração | Descrição | 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. |
Mostrar imagens | Exibe as imagens das variantes. |
Exibir SKU | Exibe as SKUs das variantes. |
Saiba mais sobre como adicionar a seção Lista de pedidos rápidos à sua página do produto.
Páginas de coleções
Por padrão, as páginas de coleção têm as seções Banner da coleção e Grade de produtos.
Configurações da seção Banner da coleção
Configuração | Descrição |
---|---|
Exibir descrição da coleção | Exibe a descrição da coleção. |
Exibir imagem da coleção | Exibe a imagem da coleção. |
Esquema de cores | Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores. |
Configurações da seção da grade de produtos
Configuração | Descrição |
---|---|
Produtos por página | O número de produtos que você deseja exibir em cada página. Pode ser qualquer múltiplo de 4, entre 8 e 24. O padrão é 16. |
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 é 5. |
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 o fabricante de cada produto. |
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, usar a opção Compre já para fazer checkout imediato ou clicar para ver todos os dados do produto. Vale lembrar que para usar essa configuração o botão Compre já precisa estar ativado 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á. A configuração Posição da mídia no desktop da página determina o lado de exibição da mídia na janela modal de adição rápida. |
Habilitar filtragem | Permite que os clientes filtrem os produtos da coleção com base nos filtros nas configurações de Navegação. |
Layout de filtro para desktop | Permite escolher entre o layout horizontal (padrão), vertical ou deslizante. |
Habilitar organização | Permite que os clientes classifiquem os resultados da pesquisa. |
Número de colunas em dispositivos móveis | Defina um layout de colunas específico para dispositivos móveis. Escolha entre 1 e 2 colunas. |
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 grade de produtos. |
Página da lista de coleções
A página da lista de coleções exibe todas as suas coleções disponíveis no canal de vendas Loja virtual.
Configuração | Descrição |
---|---|
Título | O título da página. |
Ordenar coleções por: |
Determina em que ordem exibir suas coleções:
|
Proporção da imagem | A proporção das imagens da coleção:
|
Número de colunas no desktop | Número de colunas exibido em desktops. Mínimo: 1. Máximo: 5. |
Número de colunas em dispositivos móveis | Defina um layout de colunas específico para dispositivos móveis. Escolha entre 1 e 2 colunas. |
Páginas
É possível criar páginas personalizadas no admin da Shopify para criar conteúdo para clientes, como uma página "Quem somos" ou informações adicionais sobre os produtos. Essas páginas não têm configurações extras no editor de temas.
Páginas do blog
As páginas do blog são a página inicial de todos os blogs que você cria no admin da Shopify. Por padrão, elas contêm uma seção Posts do blog.
Configurações da seção Posts do blog
A seção de posts do blog exibe os posts mais recentes do blog. Cada postagem exibe qualquer imagem do blog, o título do blog e o resumo ou as primeiras palavras do post. Para telas maiores, é possível optar entre exibir os posts em formato de grade ou colagem.
Configuração | Descrição |
---|---|
Layout em telas grandes | Exibe os posts do blog em formato de grade ou colagem. |
Exibir imagem em destaque | Exibe a imagem em destaque do post do blog. |
Altura da imagem em destaque | Use o menu suspenso para escolher entre o padrão Adaptar à imagem, Pequena, Média ou Grande. |
Exibir data | Em cada post do blog, exibe a data de publicação. |
Exibir autor | Em cada post do blog, exibe o autor do post. |
Páginas de posts do blog
As páginas de posts do blog exibem o conteúdo do post. Por padrão, eles contêm uma seção Post do blog. A seção Post do blog não tem configurações personalizáveis, mas contém os seguintes blocos padrão:
- Imagem em destaque
- Título
- Compartilhar
- Conteúdo
Bloco de imagem em destaque
Configuração | Descrição |
---|---|
Altura da imagem em destaque |
Determina a altura da imagem em destaque do post do blog:
|
Tamanhos da imagem em destaque
Cartões pequenos | Cartões grandes |
---|---|
Altura da imagem em destaque (pequena)
|
Altura da imagem em destaque (grande)
|
Altura da imagem em destaque (média)
|
Altura da imagem em destaque (média)
|
Altura da imagem em destaque (grande)
|
Altura da imagem em destaque (grande)
|
Bloco de título
Configuração | Descrição |
---|---|
Exibir data | Exibe a data em que o post do blog foi publicado. |
Exibir autor | Exibe o autor do post do blog. |
Bloco de compartilhamento
Este bloco mostra um link clicável que permite aos clientes compartilhar o post do blog nas redes sociais deles.
Configuração | Descrição |
---|---|
Texto | O texto em que os clientes clicam para compartilhar o post do blog nas redes sociais deles. |
Bloco de conteúdo
O bloco de conteúdo exibe o conteúdo do post do blog. Não tem configurações personalizáveis.
Página do carrinho
Por padrão, a página do carrinho tem as seções Itens e Subtotal.
Configurações da seção Itens
A seção Itens exibe os produtos e as quantidades que um cliente adicionou ao carrinho.
Configuração | Descrição |
---|---|
Exibir fornecedor | Exibe os fabricantes de cada produto no carrinho. |
Configurações da seção Subtotal
A seção Subtotal tem os blocos Preço subtotal e Botão de checkout. Nenhum desses blocos tem configurações personalizáveis.
Configuração | Descrição |
---|---|
Habilitar observação do carrinho | Exibe o campo Observação do carrinho, onde os clientes podem inserir informações adicionais. |
Página com senha
A página com senha é exibida quando essa proteção está ativada na loja virtual e um cliente tenta acessar seu site. Ela tem seu próprio cabeçalho e rodapé e, por padrão, uma seção Assinatura de e-mail.
Seção Cabeçalho de senha
Configuração | Descrição |
---|---|
Esquema de cores | Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores. |
Seção Assinante de e-mail
O objetivo desta seção é permitir que os clientes se inscrevam no seu e-mail marketing para saber mais sobre a empresa, como o horário de funcionamento.
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 | Amplia a seção para que fique na largura da janela do navegador. |
Bloco de título
Configuração | Descrição |
---|---|
Título | O título da seção. |
Bloco de subtítulo
Configuração | Descrição |
---|---|
Descrição | O conteúdo do texto da seção. |
Bloco de formulário de e-mail
Este bloco exibe o campo do formulário de e-mail, onde os clientes podem inserir endereços de e-mail. Não há configurações personalizáveis no bloco.
Seção Rodapé de senha
Configuração | Descrição |
---|---|
Esquema de cores | Um conjunto de cores que podem ser aplicadas à seção. Saiba mais sobre esquemas de cores. |
Página 404
A página 404, sem configurações personalizáveis, é exibida quando um cliente tenta acessar um link para seu site que não existe, como a página de um produto que você excluiu da loja.
Página de pesquisa
Nesta página, os clientes podem pesquisar produtos ou páginas específicos na loja virtual. Por padrão, ela tem uma seção Resultados da pesquisa.
Configurações da seção de resultados da pesquisa
Configuração | Descrição |
---|---|
Número de colunas no desktop | Número de colunas exibido em desktops. Mínimo: 1. Máximo: 5. |
Proporção da imagem | A proporção da imagem para as imagens dos produtos recomendados:
|
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 o fabricante de cada produto. |
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 filtragem | Clique para ativar a filtragem dos resultados da pesquisa. |
Layout de filtro para desktop | Permite escolher entre o layout horizontal (padrão), vertical ou deslizante. |
Habilitar organização | Clique para ativar a classificação dos resultados de pesquisa. |
Exibir data | Em cada post do blog, exibe a data de publicação. |
Exibir autor | Em cada post do blog, exibe o autor do post. |
Número de colunas em dispositivos móveis | Defina um layout de colunas específico para dispositivos móveis. Escolha entre 1 e 2 colunas. |
Preenchimento da seção | Use o controle deslizante para acrescentar um espaço entre 0 px e 100 px na parte superior ou inferior dos resultados da pesquisa. |