Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Estilizar Páginas de Loja

Você pode personalizar a forma como os produtos aparecem em seu site para combinar com o design e a apresentação da sua marca. Use este guia para encontrar as opções de estilo para as páginas da sua loja e páginas de detalhes do produto com base na versão do seu site.

Página de Armazenamento x páginas de detalhes do produto

Antes de estilizar seus produtos, é bom entender como o Squarespace os estrutura em todos os sites. Os produtos são organizados em duas partes: páginas da loja, que criam uma página de destino navegável e, em seguida, páginas de detalhes de produto individuais. Essas áreas compartilham alguns ajustes de estilo e têm suas próprias opções de estilo. Para saber mais, acesse Adicionar produtos à sua loja.

Abra as opções de estilo

Você alterará a página da loja e as opções de estilo da página de detalhes do produto em dois lugares:

  • Páginas da Loja - Clique em Editar na visualização do site e, em seguida, clique no ícone de Lápis na seção de loja que você deseja editar. Para saber mais sobre como abrir estilos de seção de loja, visite Seções da página de coleção na versão 7.1.
  • Páginas de detalhes do produto - Abra a página de detalhes do produto que você deseja editar. Clique em Editar design e, em seguida, clique no íconePincel. Essas configurações de estilo se aplicam a todas as páginas de detalhes do produto em seu site.

Para estilizar as páginas da loja:

  1. Abra a página da loja que você deseja editar.
  2. No Menu Inicial, clique em Designs e depois em Estilos do Site.
  3. Use os ajustes nas seções Produtos para alterar o estilo da página de destino.
  4. Para ajustes específicos para páginas de detalhes do produto individuais, saia dos estilos do site, abra um produto e insira novamente os estilos do site.

Dicas:

  • Na pré-visualização, clique em qualquer parte da página para exibir apenas os ajustes de estilo disponíveis para essa parte e ocultar os outros.
  • Se você tiver várias Páginas de Loja, as alterações de estilo se aplicarão a todo o site a todas as Páginas da Loja para criar uma aparência consistente.
  • Seu template pode ter recursos, como imagens de banner ou cabeçalhos de página, que afetam a aparência da Página da Loja.

Página Armazenar

Os visitantes da sua Página da Loja veem todas as imagens em miniatura do item do produto dispostas em uma grade. Nos estilos de seção de loja, você pode personalizar esses detalhes, suas alterações se aplicam a todas as Páginas da Loja em seu site:

Formato:

  • Largura da imagem
  • Espaçamento entre colunas
  • Espaçamento entre linhas
  • Número de colunas (mínimo duas)
  • Proporção da imagem
  • Alinhamento do Texto
  • Espaçamento do texto da imagem
  • Mostrar ou ocultar preço
  • Onde a navegação de categoria é exibida. Não é possível ocultar a navegação da categoria.
  • Alinhamento de texto de cabeçalho
  • Mostrar título da categoria - oculta ou exibe o título da página na parte superior da seção da loja.
  • Navegação do produto
    • Trilha de navegação - Exibe o caminho de navegação que os visitantes percorreram antes de chegar à página atual, excluindo produtos relacionados e páginas de categorias filtradas. 
    • Nenhum

Cores:

Use a tabela abaixo para encontrar as opções de estilo para estas famílias de templates:

  • Avançado - Brine, Farro, Skye, Tremont, York
  • Classic - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • Unique - Galapagos e Supply seguem diferentes ajustes de estilo. Visite o seu guia de templates para obter informações sobre produtos de estilo.

Layout

Os visitantes da página da sua loja veem todas as imagens em miniatura do item do produto dispostas em uma grade. Estilize a grade com esses ajustes.

Seção Estilos do Site

  • Avançado - Produto: Layout
  • Classic - Produtos
Descrição Advanced [Avançado] Clássico
Alterar o número de itens por linha Itens por linha Produtos por linha
Altere o espaço entre cada item na linha Espaçamento entre itens n/d
Altere a forma da imagem. Cortar imagens para caber Proporção da imagem n/d
Defina a forma do contêiner de imagem n/d Tamanho do item de produto
Escolha se a imagem é recortada para preencher o contêiner de imagem n/d Recorte automático da imagem do produto
Alterar a cor que é exibida atrás de imagens que não são cortadas para o tamanho do contêiner n/d Cor de fundo do produto

Informações sobre o produto

Para exibir ajustes móveis para páginas de armazenamento avançadas, selecione Posição: sobreposição.

Seção Estilos do Site

  • Avançado - Produtos: detalhes
  • Classic - Produtos
Descrição Advanced [Avançado] Clássico
Defina o título e o preço a serem exibidos abaixo da imagem ou ao mover o cursor Posição: embaixo, sobreposição Títulos da lista de produtos: embaixo, sobreposição
Alinhar texto quando Títulos da Lista de Produtos: Sob estiver ativado n/d Alinhamento da lista de produtos: centro, esquerda
Defina a cor da sobreposição ao mover o cursor quando Títulos da Lista de Produtos: Sobreposição estiver selecionado. Ajuste o controle deslizante para definir a transparência n/d Cor de sobreposição do produto
Escolha onde o texto é exibido nos navegadores móveis Posição (versão móvel): embaixo, sobreposição n/d
Escolha como o texto se alinha Alinhamento n/d
Defina a cor da sobreposição ao mover o cursor quando Posição: Sobreposição estiver selecionado. Mover o controle deslizante para definir a transparência Cor de sobreposição n/d
Altere ainda mais o alinhamento do texto quando definido para exibir ao mover o cursor Margem da sobreposição n/d
Altere o espaçamento abaixo de cada linha Espaçamento n/d
Desmarque para ocultar os títulos dos itens Mostrar título n/d
Defina a fonte do título Fonte do título n/d
Defina o Cor do título Cor Cor do título n/d
Defina a cor do título no celular Cor do título (versão móvel) n/d
Defina o espaço entre o texto e a imagem quando definido como Posição: Abaixo Margem do título n/d
Desmarque para ocultar preços Mostrar preço Mostrar preço do produto
Defina a fonte do preço Fonte do preço n/d
Defina a cor do preço no computador Cor do preço n/d
Defina a cor do preço no celular Cor do preço (versão móvel) n/d
Defina a cor do preço de venda no computador Cor do Preço em Promoção n/d
Defina a cor do preço de venda no celular Cor do preço em Promoção (versão móvel) n/d
Defina o espaço entre o preço e o título Espaçamento entre Preços n/d

Página de detalhes do produto

As imagens que são exibidas são as imagens do produto. Para estilizar a página de detalhes do produto:

  1. Abra a página de detalhes do produto que você deseja editar.
  2. Clique em Editar design no canto superior esquerdo. Em alguns sites, talvez seja necessário mover o cursor sobre Editar, clicar em Editar design e, em seguida, clicar no ícone de Lápis.

Você pode personalizar estas opções:

  • Largura da imagem
  • Proporção da imagem (apenas design da galeria Slideshow)
  • Alinhamento do Texto
  • Estilo de navegação do produto
  • Espaçamento da imagem
  • Largura da galeria
  • Alinhamento de conteúdo (superior ou centro) - O alinhamento superior pode exibir a margem entre a parte superior da imagem do produto e o texto
  • Design de galeria (Slideshow, Empilhados, Carrossel) - Se o design da galeria for Slideshow, imagens em miniatura do produto serão exibidas.
  • Disposição da galeria
  • Disposição das imagens em miniatura da galeria - Posiciona as imagens em miniatura do produto quando o design da galeria é Slideshow.
  • Largura do formulário
  • Tamanho da seta do carrossel
  • Ação de clique (zoom ou lightbox)
  • Mover o cursor (Zoom ou nenhum)
  • Fator de zoom de imagem

Produtos relacionados

A seção de produtos relacionados nas páginas de detalhes do produto segue os ajustes nos estilos de seção da loja. Para acessar essas configurações a partir de uma página de detalhes do produto, volte para a Página da Loja e clique em Editar no canto superior esquerdo. As fontes seguem os ajustes de fonte do seu site.

Botão Adicionar ao Carrinho

Este botão segue os ajustes de estilo de botãodo seu site. Não é possível ocultar o botão Adicionar ao carrinho na versão 7.1. Quando um produto está esgotado, o botão Adicionar ao carrinho aparece esmaecido.

Botão Finalização de compra

O botão Finalização de compra exibido na página do carrinho de compras segue as configurações de cor do seu site. Não é possível personalizar sua forma ou fonte.

Menus suspensos variantes

A cor do menu suspenso de variantes muda com base no tema de cores da seção.

O campo de quantidade

O campo quantidade será exibido na página de detalhes do produto se:

  • O nível de estoque do produto for maior que um
  • Houver variantes, independentemente dos níveis de estoque variantes individuais

Para exibir o nível de estoque atual para cada variante na página de detalhes do produto, ative as etiquetas de disponibilidade limitada. Isso impedirá que os clientes tentem adicionar mais de um produto ao seu carrinho quando o nível de estoque for um.

Use a tabela abaixo para encontrar as opções de estilo para estas famílias de templates:

  • Avançado - Brine, Farro, Skye, Tremont, York
  • Classic - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • Unique - Galapagos e Supply seguem diferentes ajustes de estilo. Visite o seu guia de templates para obter informações sobre produtos de estilo.

Layout

Seção Estilos do Site

  • Avançado - Produtos: Layout
  • Classic - Produtos
Descrição Advanced [Avançado] Clássico
Alterar espaçamento de itens Espaçamento n/d
Adicionar espaço em branco ao topo da página Margem Superior n/d

Mudar exibição de paginação

Exibição da navegação: apenas trilha de navegação, apenas paginação, trilha de navegação e paginação, nenhuma Mostrar nav do item do produto
Alterar texto de paginação Estilo da paginação: anterior próximo, títulos n/d
Alterar texto de paginação Alinhamento da navegação: esquerda, direita, centro, dividir n/d
Alterar fonte de paginação Fonte da navegação n/d
Mudar a cor da paginação Cor da navegação n/d
Alterar a cor da seta entre os títulos da página na navegação Cor do separador da navegação n/d

Dicas de paginação:

  • A ordem do produto é definida pelo local onde eles aparecem nas páginas da loja. Eles são ordenados da esquerda para a direita.
  • Não é possível limitar a paginação a uma categoria específica. A paginação exibe todos os produtos.

Imagens

Ao olhar para um item individual, os clientes veem as imagens do produto.

Seção Estilos do Site

  • Avançado - Produtos: galeria
  • Classic - Produtos
Descrição Advanced [Avançado] Clássico
Alterar alinhamento de imagem Posição: Esquerda, Direita n/d
Alterar o estilo da galeria Design: slideshow, empilhado n/d
Alterar a largura da imagem Largura n/d
Definir a forma da imagem Proporção da imagem Tamanho da galeria de produtos
Escolha se a imagem do produto é cortada para preencher o contêiner de imagem. Caso contrário, a Cor de Fundo do Produto será exibida atrás da imagem. n/d Galeria de produtos auto-crop
Os ajustes em miniatura afetam as imagens em miniaturas de navegação que são exibidas abaixo da imagem quando o Design: Slideshow está selecionado. Alinhamento das miniaturas: esquerda, centro, direita n/d
Alterar a largura da miniatura Largura da imagem em miniatura n/d
Alterar espaçamento das miniaturas Espaçamento entre imagens em miniatura n/d
Altere o espaço entre imagens quando Design: empilhado estiver selecionado. Espaçamento n/d

Informações sobre o produto

Seção Estilos do Site

  • Avançado - Produtos: detalhes
  • Classic - Produtos
Descrição Advanced [Avançado] Clássico
Alterar onde os detalhes estão posicionados na página Alinhamento: Esquerda, Centro, Direita n/d
Alterar a altura da linha

Altura da Linha

O ajuste de altura da linha na seção Body: font também afeta a altura da linha aqui.

n/d
Alterar espaçamento entre letras Espaçamento n/d
Mostrar ou ocultar o título do produto Mostrar título n/d
Alterar fonte do título do produto Fonte do título n/d
Alterar cor do título do produto Cor do título n/d
Mostrar ou ocultar preço Mostrar preço n/d
Alterar fonte de preço Fonte do preço n/d
Alterar a cor do preço Cor do preço n/d
Alterar a cor para itens de venda Cor do Preço em Promoção n/d
Selecione onde a descrição do produto é exibida Posição do trecho: acima do preço, abaixo do preço, abaixo do botão Adicionar ao carrinho n/d
Alterar a descrição do produto fonte Fonte do trecho n/d
Alterar cor da descrição do produto Cor do trecho n/d
Alterar cor do link da descrição do produto Cor do link do trecho n/d
Ocultar ou exibir os botões de compartilhamento Mostrar botões de compartilhamento Compartilhamento social de produtos
Use os ajustes na seção de botões de compartilhamento Estilizar botões de compartilhamento Estilizar botões de compartilhamento

Quantidade e variantes

Seção Estilos do Site

  • Avançado - Produtos: Opções
  • Clássico - Conteúdo principal
Descrição Advanced [Avançado] Clássico
Mostrar ou ocultar variantes Mostrar variantes n/d
Mostrar ou ocultar quantidade. A quantidade só é exibida quando há vários itens disponíveis. Mostrar quantidade n/d
Alterar a exibição de quantidade Estilo: somente texto, quadrado, arredondado, pílula n/d
Adicionar uma cor de borda à exibição de quantidade Cor da borda n/d
Adicionar uma cor de fundo à exibição de quantidade Cor de fundo n/d
Alterar a fonte de exibição de quantidade Fonte da etiqueta n/d
Alterar a cor da exibição da quantidade Cor da etiqueta n/d
Definir a quantidade e variantes fonte Fonte Segue os ajustes do cabeçalho ou do Título em todo o site.
Definir a quantidade e as variantes da cor do texto Cor do texto n/d
Alterar a fonte do menu suspenso variante. Não é possível alterar a fonte do item de menu. Fonte n/d

O campo de quantidade

O campo quantidade será exibido na página de detalhes do produto se:

  • O nível de estoque do produto for maior que um
  • Houver variantes, independentemente dos níveis de estoque variantes individuais

Para exibir o nível de estoque atual para cada variante na página de detalhes do produto, ative as etiquetas de disponibilidade limitada. Isso impedirá que os clientes tentem adicionar mais de um produto ao seu carrinho quando o nível de estoque for um.

Botão Adicionar ao Carrinho

Seção Estilos do Site

  • Avançado - Mostrar botões
  • Clássico - Botões
Descrição Advanced [Avançado] Clássico
Ocultar o botão Desmarcar Mostrar botão n/d
Alterar o estilo do botão Estilo: sólido, contorno, em relevo Estilo: padrão, sólido, contorno, levantado
Alterar a forma do botão Formato: quadrado, arredondado, pílula Formato: quadrado, arredondado, pílula
Adicionar ou remover a margem de botões Margem: pequeno, médio, grande n/d
Alterar a cor do botão Cor Cor do botão
Alterar cor do texto do botão Cor do texto Cor do texto
Alterar fonte do botão Fonte Fonte
Dica: quando um produto está esgotado, o botãoAdicionar ao carrinho aparece esmaecido.

Botão Finalização de compra

O botão Finalização de compra exibido na página do carrinho de compras segue as configurações de cor do seu site. Não é possível personalizar sua forma ou fonte.

Produtos relacionados

Produtos relacionados são exibidos em uma grade na parte inferior da página. Você pode usar esses ajustes para mudar a aparência deles.

Seção Estilos do Site

  • Avançado - Produtos: produtos relacionados
  • Clássico - Produtos
Descrição Advanced [Avançado] Clássico
Alterar itens por linha Itens por linha Itens por linha
Adicionar ou remover espaçamento de itens Espaçamento entre itens Espaçamento entre itens
Definir a proporção da imagem Proporção da imagem Proporção da imagem
Alterar o alinhamento do texto Alinhamento de detalhes: centro, esquerda Alinhamento de detalhes: centro, esquerda
Alterar o espaçamento do título Margem do título Margem do título

Carrinho de compras

O ícone é exibido como um carrinho no cabeçalho do site. Para saber mais, acesse Exibição do ícone do carrinho de compras.

Todos os templates suportam um botão Carrinho de compras que mostra o número de itens no carrinho de um cliente e leva à página de finalização de compra. Se o seu carrinho não estiver aparecendo, consulte nossas dicas de solução de problemas. Para saber como estilizar o ícone do carrinho de compras do seu templates, visite Exibição do ícone do carrinho de compras.

Navegação de categorias

Depois de adicionar categorias aos seus produtos, eles criam um menu de navegação na parte superior da página de destino. Os clientes podem usar esses links para filtrar os produtos em que estão interessados. Tenha em mente que em ambas as versões, a navegação de categoria:

  • Só é exibida depois de você adicionar pelo menos uma categoria
  • Não é exibida nas páginas de detalhes
  • Exibe todas as categorias, mesmo aquelas vinculadas a produtos ocultos

A navegação por categoria pode ser exibida na parte superior da página da loja ou em uma barra lateral.

A fonte de navegação da categoria segue o estilo do parágrafo.

Dependendo da posição, as subcategorias são exibidas em um menu aninhado. Para alterar a posição, abra os estilos de seção e clique em Barra lateral ou Superior em Tipo de categorias . Para alterar a ordem da navegação, clique e arraste as categorias no gerenciador de categorias.

  • Barra lateral - As subcategorias serão exibidas em um menu aninhado na página da loja e em páginas de categoria filtradas
  • Superior - As subcategorias serão exibidas na página principal da categoria filtrada, mas não nas páginas de subcategoria filtradas.

Para ocultar a navegação da categoria, abra as configurações da categoria e desligue a alternância ao lado de Visibilidade do filtro. Repita isso para cada categoria. Para saber mais, acesse Organizar produtos.

A navegação da categoria é exibida em ordem alfabética. Use a tabela abaixo para encontrar as opções de estilo para estas famílias de templates:

  • Avançado - Brine, Farro, Skye, Tremont, York
  • Classic - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • Único - Galápagos e Supply seguem diferentes ajustes de estilo. Não é possível ocultar a navegação de categoria nesses templates. Visite o seu guia de templates para obter informações sobre como estilizar a navegação da categoria.

Seção Estilos do Site

  • Avançado - Produtos: filtro sort +
  • Clássico - Produtos
Descrição Advanced [Avançado] Clássico
Ocultar navegação de categoria Exibição: esconder Desmarcar Mostrar navegação de categoria
Ativar, desativar e alinhar a navegação por categoria Display: superior, lado esquerdo, lado direito, esconder n/d
Defina a largura se a navegação da categoria estiver à esquerda ou à direita. Largura n/d
Altere o espaço abaixo da navegação. Margem n/d
Altere o espaço entre cada item na linha Espaçamento entre itens n/d
Defina o alinhamento de texto Alinhamento: Esquerda, Centro, Direita n/d
Defina a fonte de navegação Fonte

Fonte da navegação por categorias

(Não disponível em Bedford, Five, Ishimoto, Montauk e Native)

Defina a cor de navegação Cor

Categoria Nav Cor

(Não disponível em Bedford, Five, Ishimoto, Montauk e Native)

Escolha os links de cores exibidos ao passar o mouse Cor ativa

Cor da navegação ativa por categorias

(Não disponível em Bedford, Five, Ishimoto, Montauk e Native)

Etiquetas à venda, esgotados e disponibilidade limitada

Itens esgotados sempre exibem uma etiqueta esgotado personalizável. Em ambas as versões, você pode alterar o texto do rótulo e sua fonte e cor . Na versão 7.0, você pode alterar a forma e a localização do rótulo.

As etiquetas de venda e disponibilidade limitada também são exibidas se você as tiver ativado. A maneira de modelá-los depende da versão do seu site. Você pode alterar o texto da etiqueta de disponibilidade limitada no painel Disponibilidade limitada, mas não é possível alterar o texto da etiqueta de venda.

  • Os itens esgotados sempre exibem o emblema de status abaixo da imagem do produto na página da loja e na página de detalhes do produto.
  • Os rótulos de venda e disponibilidade limitada seguem os ajustes de cores e fontes diversos do seu site.

Use a tabela abaixo para encontrar as opções de estilo para estas famílias de templates:

  • Avançado - Brine, Farro, Skye, Tremont, York
  • Classic - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • Unique - Galapagos e Supply seguem diferentes ajustes de estilo. Visite o seu guia de templates para obter informações sobre produtos de estilo.

Para acessar esses ajustes de estilo, acesse a página da loja que você deseja editar antes de abrir os estilos do site.

Seção Estilos do Site

  • Avançado - Produtos: Emblemas de status
  • Clássico - Produtos
Descrição Advanced [Avançado] Clássico
Ocultar o emblema Estilo: nenhum n/d
Definir o estilo de crachá Estilo: retângulo, quadrado, círculo, nenhum n/d
Definir a cor do crachá de venda Cor de Promoção n/d
Definir a cor do crachá esgotado Cor de Esgotado n/d
Definir a fonte do emblema Fonte n/d
Adicionar ou remover a margem Margem n/d
Definir a posição do crachá Posição: superior esquerda, superior central, superior direita, centro-esquerda, centro-centro, centro-direita, inferior esquerda, inferior central, inferior direita n/d
Sobrepor o emblema com a imagem do produto Inserção: flutuante, alinhado, acoplar na vertical, acoplar na horizontal n/d
Alterar o tamanho do crachá Tamanho da inserção n/d
Cor do Preço em Promoção Use a cor do preço de venda na seção Produtos: Detalhes n/d
Cor do crachá de status Só pode ser preto ou branco, com base na cor de fundo do crachá n/d
Cor limitada da etiqueta da disponibilidade Cor limitada da etiqueta da disponibilidade Cor limitada da etiqueta da disponibilidade
Fonte de etiqueta de disponibilidade limitada Fonte de etiqueta de disponibilidade limitada Fonte de etiqueta de disponibilidade limitada

Zoom de imagem, visualização rápida e efeitos de pairar

Uma imagem de produto alternativa sempre é exibida ao mover o cursor sobre as páginas da loja quando um produto tem mais de uma imagem. Os detalhes do produto sempre são exibidos abaixo da imagem do produto. Você pode ativar a visualização rápida nas configurações de página ou bloco. A cor de fundo da lightbox de exibição rápida segue a cor da seção da loja.

O zoom da imagem não está disponível nas páginas da loja. No entanto, você pode ativar as lightboxes e zoom de imagem ao clicar e mover o cursor sobre a página de detalhes do produto. Ative esses efeitos no painel Itens do produto:

  • Lightbox - Abre a imagem em uma janela lightbox ao clicar.
  • Zoom - Amplia os detalhes da imagem ao clicar ou mover o cursor.

Use a tabela abaixo para encontrar as opções de estilo para estas famílias de templates:

  • Avançado - Brine, Farro, Skye, Tremont, York
  • Classic - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • Galapagos suporta as opções alternativas de sobreposição de informações de imagem e produto.
  • A fonte suporta opções exclusivas de sobreposição de informações do produto .

Efeitos hover

Para exibir o ajuste do comportamento do mouse do item em Páginas de Loja Avançadas, vá para a seção Produto: Detalhes e selecione Posição: Abaixo .

Seção Estilos do Site

  • Avançado - Produtos: Layout
  • Clássico - Produtos
Descrição Advanced [Avançado] Clássico
Definir a ação de mover o cursor

Comportamento do Mouse no Item (exibe quando a posição Produto: Detalhes está definida como Abaixo )

n/d
Ao passar o cursor, mostra a segunda imagem no editor do produto Comportamento do cursor do item: mostrar imagem alternativa n/d
Ao passar o cursor, desbota os detalhes visíveis do produto

Item Comportamento do Cursor: Desbotar

n/d
Nenhum efeito de mover o cursor

Na seção Produto: Detalhes , selecione Posição: Abaixo , e na seção Produto: Layout , escolha Comportamento do Cursor do Item: Nenhum

Títulos da lista de produtos: Abaixo
Ao passar o cursor, mostra os detalhes do produto em vez de desbotar ou aparecer uma imagem alternativa

Na seção Produto: Detalhes, selecione Posição: Sobreposição

Lista de produtos Títulos: Sobreposição
Exibir títulos de produtos abaixo da imagem do produto n/d Títulos da lista de produtos: Abaixo
Alterar a cor da sobreposição ao mover o cursor n/d Cor de sobreposição do produto
Mostrar ou ocultar o preço do produto ao mover o cursor n/d Mostrar preço do produto

Dicas alternativas de imagem:

  • Se a segunda imagem do produto tiver áreas transparentes, a primeira imagem será visível nessas áreas ao mover o cursor.

Zoom de imagem

Seção Estilos do Site

  • Avançado - Itens do produto
  • Clássico - n/a
Descrição Advanced [Avançado] Clássico
Habilitar Pré-visualização Rápida do Produto Ação mover o cursor: Zoom n/d
Definir o fator de zoom da imagem Fator de zoom de imagem n/d

Dicas de zoom de imagem:

  • Imagens com fundos transparentes (.png) exibirão a imagem original por trás da versão ampliada.

Visualização rápida

Depois de ativar a Visualização rápida, novas seções aparecerão no Painel de Estilos do Site. As configurações de estilo são aplicadas em todo o site para criar uma estética consistente.

Os visitantes usam a visualização rápida do produto para visualizar os detalhes do item em uma lightbox sem navegar longe da Página da Loja. Esse recurso não está disponível para as Páginas da Loja Clássicas, embora as imagens do produto sejam abertas em uma lightbox a partir das páginas de detalhes do produto nesses templates.

Seção Estilos do Site

  • Avançado - Produtos: botão de visualização rápida
  • Clássico - n/a
Descrição Advanced [Avançado] Clássico
Personalize o estilo, a cor, a fonte, o espaçamento, a posição e o tamanho do botão Visualização Rápida Posição n/d
Personalize a aparência da lightbox Produtos: lightbox de visualização rápida n/d
Exibir a descrição do produto Exibição de trecho: Truncar n/d
Adicionar um filtro de cor à Página da loja atrás da lightbox Cor de sobreposição n/d
Alterar a navegação e o botão fechar que aparecem fora da lightbox Controles n/d
Alterar a fonte do título da Visualização Rápida Na seção Produtos: Detalhes, selecione Fonte do Título n/d

Dicas da Visualização Rápida:

  • Se o texto de visualização rápida tiver problemas de formatação, tente adicionar os detalhes do produto como texto simples.
  • A Visualização rápida não está disponível em dispositivos móveis.
  • O texto do botão "Visualização Rápida não pode ser personalizado.
  • As imagens de produtos são exibidas como quadrados recortados na Visualização rápida.
  • As descrições de produtos aparecem na Visualização rápida sem formatação especial, incluindo estilos de cabeçalhos, negrito, itálico ou listas com marcadores.

Fontes e cores

Cores e fontes na Página da Loja e na página de detalhes do produto seguem seus ajustes de fonte e cores em todo o site. Você também pode alterar a cor de seções específicas da loja na seção Editor de Estilos. As páginas de detalhes do produto seguem o tema de cores da seção da loja.

  1. Na Página da Loja, clique em Editar design e, em seguida, abra Estilo de Site.
  2. Clique em Fontes.
  3. Escolha uma fonte e clique no botão para aplicar a fonte a partes específicas do seu site.

Use estes ajustes para alterar fontes na página da sua loja e nas páginas de detalhes do produto:

Seção Armazenar elementos de página
Títulos Títulos da página, Título da seção Produtos relacionados e títulos de produtos
Parágrafos Descrição do produto, preço e navegação de página
Botões Botões
Meta Estilos diversos, como tags e preços
Avançado: produtos: lista Título da lista, preço sugerido, status da lista
Avançado: página de detalhes do produto Título do item, preço do item, descrição do item, campos variantes

Use a tabela abaixo para encontrar as opções de estilo para estas famílias de templates:

  • Avançado - Brine, Farro, Skye, Tremont, York
  • Classic - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley

Páginas da Loja Clássicas

O texto na Página da Loja Clássica segue os mesmos ajustes de estilo que o texto no resto do seu site. Por exemplo, para alterar a fonte ou a cor do título do item, use o ajuste Cabeçalho ou Título 1. Alguns elementos, como Navegação por Categoria, têm seus próprios ajustes de fonte que estão listados ao longo deste guia com base no elemento que você está denominando.

Os menus suspensos variantes são uma exceção, pois usam a mesma fonte em todas as Páginas da Loja Clássica. Esta fonte não pode ser alterada em Estilo do Site.

Páginas de Armazenamento Avançadas

As fontes em páginas avançadas da loja seguem os ajustes de estilo no resto do seu site, mas elas têm ajustes de fonte adicionais para elementos específicos da página da loja. Esses ajustes são listados ao longo deste guia com base no elemento que você está estilizando.

Dispositivo móvel

Itens de produtos e informações se acumulam verticalmente em smartphones, tablets e navegadores estreitos.

  • No momento, a Visualização Rápida e o Zoom de Imagem não estão disponíveis no celular.
  • Títulos e preços sempre são exibidos abaixo do produto as imagens nas Páginas da Loja.
  • Cor de sobreposição, imagem alternativa e efeitos de desvanecimento não são exibidos.
  • Quando a navegação por categoria não cabe em uma linha, ela é exibida como uma lista de rolagem horizontal que os visitantes podem deslizar.

Na versão 7.1:

  • As imagens na página de detalhes do produto sempre são exibidas em slides para os clientes deslizarem. As imagens em miniatura não são exibidas abaixo do slideshow.
  • A navegação por categoria é exibida horizontalmente para que os compradores deslizem.
  • Os produtos são exibidos em uma única coluna.
  • A navegação da trilha de navegação não é exibida.

Na versão 7.0:

  • As páginas de lojas avançadas têm cores móveis exclusivas para títulos de itens, preços e preços de venda.
  • Os produtos são exibidos em duas ou mais colunas.

Visite os estilos avançados para dispositivos móveis da versão 7.0 para saber mais sobre as outras opções móveis do seu template. A versão 7.1 não tem estilos móveis separados.

Este artigo foi útil?
Utilizadores que acharam útil: 32 de 119