Tipos de página

Cada página tem suas próprias seções e configurações padrão.

Páginas de produtos

Por padrão, as páginas têm as seções Informações do produto e Recomendações de produto.

A seção Informações do produto contém os seguintes blocos padrão:

  • Texto (por padrão, exibe o atributo vendor)
  • Título
  • Texto (por padrão, exibe o atributo product subtitle)
  • Preço
  • Seletor de variante
  • Seletor de quantidade
  • Botões Comprar
  • Descrição
  • Compartilhar

Você também pode adicionar os seguintes blocos:

  • Texto
  • Liquid personalizado
  • Avaliação do produto
  • Aba recolhível
  • Pop-up
  • Produtos complementares

A seção Informações do produto pode conter até 16 blocos.

Configurações da seção Informações do produto

As 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.
Posição da mídia no desktop Defina se a mídia do produto está no lado esquerdo ou direito. Essa configuração se aplica apenas a usuários que acessam a página em um computador. Nos dispositivos móveis, a posição é otimizada automaticamente.
Layout para desktop

A maneira como a mídia do produto é exibida no desktop.

  • Carrossel de miniaturas: se o produto tiver mais de um tipo de mídia, as outras aparecerão abaixo da principal em um carrossel de miniaturas. O cliente poderá clicar em uma das miniaturas para carregá-la ou usar as setas de navegação do carrossel para ver outros itens.
  • Miniaturas: se o produto tiver mais de um tipo de mídia, as outras aparecerão como miniaturas abaixo da principal. O cliente poderá clicar em qualquer uma delas para carregá-las.
  • Empilhado: exibe todas as mídias de produto empilhadas. Para abrir uma janela pop-up que mostra a maior delas, basta clicar em uma mídia desse tipo.
  • Tamanho da mídia para desktop Escolha o tamanho da mídia: pequeno, médio ou grande. Lembramos que a otimização para dispositivos móveis é automática.
    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.

    As configurações do bloco de texto na seção de informações do produto
    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:

    • Corpo: altera o texto para o estilo de parágrafo.
    • Subtítulo: altera o texto para subtítulo, que é um pouco maior que o texto no estilo de parágrafo.
    • Letras maiúsculas: altera o texto para deixá-lo menor que o texto no estilo de parágrafo e coloca todos os caracteres em maiúsculas.

    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. Não tem configurações ajustáveis.

    Bloco de seletor de variante

    Este bloco exibe todas as opções de variantes do produto.

    As configurações do bloco de seletor de variante na seção de informações do produto
    Configuração Descrição
    Tipo

    Altera a forma como as variantes são exibidas aos clientes:

    • Botão: exibe as variantes como botões clicáveis.
    • Menu suspenso: exibe as variantes em um menu suspenso expansível.

    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.

    As configurações do bloco de botões Comprar na seção de informações do produto
    Configuração Descrição
    Exibir botões de checkout dinâmico Mostra as opções de checkout dinâmico habilitadas nas configurações de Pagamento.

    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, como o Product Reviews da Shopify, 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ções do bloco para itens complementares na seção de informações do produto
    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 mostrados como uma linha recolhível.

    Máximo de produtos a serem mostrados

    Selecione o número máximo de produtos complementares a serem exibidos. É 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.

    • Pontos
    • Balcão (padrão)
    • Números
    Proporção da imagem

    Determina a proporção das imagens no cartão do produto.

    • Retrato
    • Quadrado (padrão)
    Exibir botão para adicionar rapidamente

    O botão "Adicionar rapidamente" permite que os clientes incluam um item no carrinho direto 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.

    As configurações do bloco de compartilhamento na seção Informações do produto
    Configuração Descrição
    Texto O texto em que os clientes clicam para compartilhar o produto nas redes sociais deles.

    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.

    As configurações do bloco do Liquid personalizado na seção de informações do produto
    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.

    As configurações do bloco da aba recolhível na seção de informações do produto
    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.

    As configurações do bloco pop-up na seção Informações do produto
    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.

    Configurações da seção 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.

    As configurações da seção de recomendações de produtos
    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 A cor do fundo na seção de recomendações de produtos. Escolha entre Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.
    Proporção da imagem A proporção da imagem para as imagens dos produtos recomendados:
    • Adaptar à imagem: usa a proporção da imagem para evitar que ela seja cortada.
    • Retrato: corta as imagens para usar a proporção 2:3.
    • Quadrado: corta as imagens para usar a proporção 1:1.
    Exibir segunda imagem ao passar o cursor Quando o cliente passa o cursor sobre a imagem do produto, é exibida outra, se houver.
    Exibir fabricante 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, como o Product Reviews da Shopify, além de definições de metacampo para 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.

    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

    As configurações da seção de 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 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.

    Configurações da seção Grade de produtos

    As configurações da seção de grade do produto
    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:
    • Adaptar à imagem (padrão) - Usa a proporção da imagem para evitar que ela seja cortada.
    • Retrato: corta as imagens para usar a proporção 2:3.
    • Quadrado: corta as imagens para usar a proporção 1:1.
    Exibir segunda imagem ao passar o cursor Quando o cliente passa o cursor sobre a imagem do produto, outra é exibida, se houver.
    Exibir fabricante Exibe 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, 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, 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 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á. 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.

    As configurações da página da lista de coleções
    Configuração Descrição
    Título O título da página.
    Ordenar coleções por:

    Determina em que ordem exibir suas coleções:

    • Ordem alfabética, A-Z: exibe as coleções em ordem alfabética.
    • Ordem alfabética, de Z a A - Exibe as coleções em ordem alfabética inversa.
    • Data, mais recente primeiro: exibe as coleções da mais recente à mais antiga, com base em quando foram criadas na loja.
    • Data, mais antiga primeiro - Mostra as coleções da mais antiga à mais recente, com base em quando foram criadas na loja.
    • Contagem de produtos, alta para baixa: exibe as coleções com base na quantidade de produtos que contêm, da maior à menor.
    • Quantidade de produtos, da menor para a maior - Exibe as coleções de acordo com a quantidade de produtos, da menor para a maior.
    Proporção da imagem A proporção das imagens da coleção:
    • Adaptar à imagem (padrão) - Usa a proporção da imagem para evitar que ela seja cortada.
    • Retrato: corta as imagens para usar a proporção 2:3.
    • Quadrado: corta as imagens para usar a proporção 1:1.
    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.

    As configurações da seção Posts do blog
    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

    As configurações do bloco de imagens em destaque na página do post do blog
    Configuração Descrição
    Altura da imagem em destaque

    Determina a altura da imagem em destaque do post do blog:

    • Adaptar à imagem (padrão): mantém a proporção original da imagem.
    • As especificações de imagem estão listadas abaixo. É possível escolher uma imagem em destaque pequena, média ou grande.

    Tamanhos da imagem em destaque

    Tamanhos do bloco de imagens em destaque nas páginas de posts do blog
    Cartões pequenos Cartões grandes
    Altura da imagem em destaque (pequena)

    • Desktop: 177 px
    • Tablet: 143 px
    • Celular: N/A
    Altura da imagem em destaque (grande)

    • Desktop: 275 px
    • Tablet: 220 px
    • Dispositivo móvel: 110 px
    Altura da imagem em destaque (média)

    • Desktop: 307 px
    • Tablet: 219 px
    • Celular: N/A
    Altura da imagem em destaque (média)

    • Desktop: 550 px
    • Tablet: 440 px
    • Celular: 220 px
    Altura da imagem em destaque (grande)

    • Desktop: 407 px
    • Tablet: 275 px
    • Celular: N/A
    Altura da imagem em destaque (grande)

    • Desktop: 825 px
    • Tablet: 660 px
    • Celular: 330 px

    Bloco de título

    As configurações do bloco de título na página do post do blog
    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.

    As configurações do bloco de compartilhamento na página de post do blog
    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.

    As configurações da seção Itens na página do carrinho
    Configuração Descrição
    Exibir fabricante 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.

    As configurações da seção de subtotal na página do carrinho
    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á habilitada na loja virtual e um cliente tenta visitar 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

    As configurações da seção de cabeçalho na página com senha
    Configuração Descrição
    Imagem do logo O logo que você quer exibir.
    Largura personalizada do logo A largura do logo, que pode ser qualquer número múltiplo de 10, entre 50 e 250 pixels. Por padrão, é definida em 100 pixels.
    Esquema de plano de fundo Para o plano de fundo da seção de cabeçalho da senha e do preenchimento de imagem, é possível escolher entre estes: Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.

    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.

    As configurações da seção de assinatura de e-mail na página com senha
    Configuração Descrição
    Esquema de cores Para a cor do plano de fundo na seção Assinante de e-mail, é possível escolher entre estas opções: Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.
    Definir seção com largura total Amplia a seção para que fique na largura da janela do navegador.

    Bloco de título

    As configurações do bloco de título na seção de cabeçalho da página com senha
    Configuração Descrição
    Título O título da seção.

    Bloco de subtítulo

    As configurações do bloco de título na seção de cabeçalho da página com senha
    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

    As configurações da seção Rodapé da senha na página com senha
    Configuração Descrição
    Esquema de cores Para a cor do plano de fundo da seção de rodapé da página com senha, é possível escolher entre estas opções: Destaque 1, Destaque 2, Plano de fundo 1, Plano de fundo 2 ou Inverso.

    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 Resultados da pesquisa

    As 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:
    • Adaptar à imagem (padrão) - Usa a proporção da imagem para evitar que ela seja cortada.
    • Retrato: corta as imagens para usar a proporção 2:3.
    • Quadrado: corta as imagens para usar a proporção 1:1.
    Exibir segunda imagem ao passar o cursor Quando o cliente passa o cursor sobre a imagem do produto, outra é exibida, se houver.
    Exibir fabricante Exibe 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, como o Product Reviews da Shopify, além de definições de metacampO para reviews.rating_count e reviews.rating.
    Habilitar filtragem Clique para habilitar 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 habilitar a ordenação dos resultados da 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.

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

    Experimente de graça