Personalize as páginas da loja do site e as páginas de detalhes dos produtos.
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.
Saiba mais sobre como fazer alterações acessíveis no estilo em "Criação de um site Commerce acessível".
Página da loja 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 prévia do site e depois no ícone de pincel na seção desejada da loja. Confira Seções da página de coleção para saber como abrir os estilos de seção de loja.
- 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:
- Abra a página da loja que você deseja editar.
- Retorne ao painel Site, clique em Design e depois em Estilos do site.
- Use os ajustes nas seções Produtos para alterar o estilo da página de destino.
- 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 da loja
Os visitantes da loja encontram todas as imagens em destaque do produto dispostas em grade. A página da loja mostra até 200 produtos; acima disso, os clientes podem clicar em Avançar para ver mais produtos.
Na seção de estilos da loja, é possível personalizar os detalhes abaixo. Lembre-se de que 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
- Botão "Adicionar ao carrinho" - mostra o botão "Adicionar ao carrinho" na página da loja, além das páginas de detalhes do produto se o produto tiver uma ou nenhuma variante. Se tiver mais de uma, aparecerá o botão Ver opções na página da loja.
- 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:
- Para definir as cores do seu site ou criar um visual exclusivo para a seção da sua loja, escolha outro tema de seção.
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 sua loja encontram todas as imagens em destaque do produto dispostas em grade. Para ajustar o estilo da grade, use estes 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 da loja 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:
- Abra a página de detalhes do produto que você deseja editar.
- Clique em Editar design (canto superior esquerdo). Em alguns sites é necessário passar o cursor sobre Editar, clicar em Editar design e, em seguida, clicar no ícone de pincel.
Escolha entre as seguintes opções de layout:
- Simples — A imagem e a descrição do produto são exibidas lado a lado, rodeadas por espaços em branco.
- Embalar — As imagens do produto envolvem a descrição. As imagens estão sempre alinhadas à esquerda.
- Metade — A imagem do produto divide a página com a descrição. A imagem está sempre alinhada à esquerda.
- Total — As imagens do produto são exibidas em um carrossel sem margens acima da descrição.
Se você selecionar o layout Simples, também poderá personalizar estas opções:
- Exibição da variante
- Largura da imagem
- Proporção da imagem (somente nos designs slideshow e carrossel)
- No design do carrossel, a proporção da imagem define as proporções do receptáculo da imagem, mas sua imagem pode não ser cortada para preenchê-la. Recomendamos adicionar imagens que tenham a mesma proporção que você escolher em suas configurações.
- Alinhamento do Texto
- Estilo de navegação do produto
- Posição da descrição - onde a descrição do produto aparece.
- Botão "Adicionar ao carrinho" - a opção Inline coloca o botão ao lado do campo Quantidade.
- Espaçamento da imagem
- Largura da galeria
- Alinhamento do conteúdo (topo, centro) - o alinhamento no topo talvez inclua um espaçamento entre o topo da imagem do produto e o texto. O alinhamento do conteúdo está disponível nos designs slideshow e carrossel, mas não em empilhado.
- Design (slideshow, empilhado, carrossel) - se o design da galeria for slideshow, aparecerão as miniaturas do produto.
- Disposição da galeria
- Posicionamento da miniatura da galeria - posiciona as imagens apresentadas do produto quando o design é em slideshow.
- Largura do formulário
- Tamanho e cor da seta do carrossel
- Ação de clique (zoom ou lightbox)
- Mover o cursor (Zoom ou nenhum)
- Fator de zoom de imagem
Frequência da assinatura
Se você vende produtos de assinatura, pode alterar as cores da seção de frequência da assinatura na página de detalhes do produto. Abra os temas de cores do site e altere as cores em página de detalhes do produto: assinaturas.
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ões Adicionar ao carrinho e finalização de compra
O botão Adicionar ao carrinho pode ficar abaixo das miniaturas dos produtos na página da loja; e na página de detalhes de cada produto. Nas páginas da loja, as cores dos botões seguem o texto e as cores de fundo do produto. O botão Adicionar ao carrinho na página de detalhes do produto; e o botão Finalizar compra na página do carrinho de compras seguem os ajustes de estilo do botão principal e as configurações de cores do seu site. Lembre-se de que, a fim de padronizar o visual do site, as opções de estilo do botão afetam a maioria dos botões. Esses botões sempre direcionam os clientes para o carrinho e para a página de finalização de compra no Squarespace. Não é possível usá-los como links para sites externos.
Para preservar a aparência das páginas de detalhes do produto, os ajustes de espaçamento horizontal não afetam os botões Adicionar ao carrinho. 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.
Exibição da variante
O layout simples mostra as variantes como botões ou em um menu suspenso. O botão da variante segue os ajustes de estilo do botão secundário do site. Todos os outros layouts mostram as variantes em um menu suspenso. A cor do menu suspenso com as variantes muda com base no tema de cores da seção. Segue a família de fontes dos campos "Variante". A opção de se cadastrar na lista de espera de um produto só aparece quando as variantes aparecem no menu suspenso.
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
Na página de detalhes do produto, para mostrar o nível atual do estoque de cada variante, ative as etiquetas de disponibilidade limitada. Isso impedirá que os clientes tentem adicionar mais de um produto ao carrinho quando o nível de estoque for um. Não é possível alterar o tamanho do campo de quantidade.
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 |
| Altere a fonte de exibição da variante. Não é possível alterar a fonte dos itens do 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 por padrão. Se você ocultar o ícone do carrinho de compras, ele aparecerá na parte inferior da página quando os clientes adicionarem itens ao carrinho. Para saber mais, acesse a tela 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 ficar no topo da página da loja ou em uma barra lateral. Na versão móvel, a navegação por categoria sempre aparece no topo.
A fonte de navegação da categoria segue o estilo do parágrafo. A cor segue o ajuste de navegação por categorias em Produtos: grade básica em Estilos do site.
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 - Produtos: Zoom de imagem
- Clássico - n/a
| Descrição | Advanced [Avançado] | Clássico |
| Ativar ou desativar o zoom da imagem | Ativar o zoom da imagem | n/d |
| Definir o fator de zoom da imagem | Fator de zoom de imagem | n/d |
| Defina o zoom da imagem para ativar ao clicar ou passar o cursor | Zoom ativado ao | n/d |
| Defina as imagens do produto para abrir em um lightbox |
Ative o lightbox. Se a configuração "Ativar lightbox" não aparecer, ative o zoom da imagem e deixe o zoom para ativar ao passar o cursor. Essa ação deve revelar a configuração "Ativar lightbox". Você pode desativar o zoom da imagem após ativar o lightbox. Para ativar o zoom da imagem e o lightbox, o zoom da imagem precisa estar definido para ativar ao passar o cursor. |
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.
- Na Página da Loja, clique em Editar design e, em seguida, abra Estilo de Site.
- Clique em Fontes.
- 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 | Elementos da página da loja |
| 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.
O menu suspenso das variantes são exceção, pois usam a mesma fonte em todas as páginas da loja clássica. Essa fonte não pode ser alterada nos estilos do site.
Páginas da loja 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.
- O botão "Adicionar ao carrinho" aparece antes da descrição nas páginas do produto com os layouts Completo e Simples .
- A navegação por categoria é exibida horizontalmente para que os compradores deslizem.
- Os produtos aparecem em uma ou duas colunas. Na versão móvel, clique em Editar e depois em Editar seção. Para alterar o número de colunas que aparecem, clique no ícone + ou -.
- Em aparelhos móveis, a navegação por rastro da navegação aparece quando os visitantes clicam nas tags de categoria em uma página de destino da loja. A navegação por rastro da navegação não é exibida quando os visitantes clicam em um produto diretamente na página de uma loja.
- As imagens na página de detalhes do produto aparecem na proporção 1:1 em qualquer layout.
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.