Todos os sites do Squarespace aceitam a página da loja, onde você expõe e vende produtos. Alguns sites têm recursos extras, como visualização rápida, zoom de imagem e efeitos de passar o cursor, que aparecem quando o comprador passa o cursor sobre as imagens do produto. Este guia explica esses recursos e onde eles estão disponíveis.
Recursos por versão
Os recursos disponíveis dependem da versão do Squarespace em que seu site se encontra.
Na versão 7.0, essas opções estão disponíveis nas famílias de templates Brine, Farro, Galápagos, Skye, Tremont e York. Saiba mais sobre todos os templates em Tipos de página de loja.
Versão 7.1 |
Versão 7.0 |
|
Visualização rápida |
|
|
Aproximação na imagem |
|
|
Efeitos hover |
|
|
Listas de espera |
|
|
Aproximação na imagem
Com a ampliação da imagem, os clientes podem ampliar as imagens do produto para uma análise mais detalhada do material, da textura e dos detalhes mais finos. Você pode definir a ampliação para que seja ativada ao passar o mouse ou se a imagem for clicada.
A ampliação de imagens está disponível em:
- Página de detalhes do produto
- Visualização rápida das lightboxes
Ativar o zoom da imagem
A forma como você ativa o zoom da imagem depende da versão do seu site.
Para ativar a ampliação da imagem:
- Enquanto estiver em uma página de detalhes do produto, clique em Editar e depois no ícone de lápis.
- Clique no menu suspenso Ação de pairar.
- Selecione Zoom.
Para ativar a ampliação da imagem:
- Na página de detalhes de um produto, acesse o Menu Inicial, clique em Design e depois clique emEstilos do Site.
- Role para a seção Produtos: Aproximação na imagem. (No Galapagos, role até a seção Item de produto.)
- Marque Ativar Aproximação na imagem.
- Para definir o nível de ampliação, defina o controle deslizante do Fator de aproximação entre 1 e 5. (No Galapagos, é o Fator de aproximação na imagem.)
- Para escolher se a Imagem Amplia assim que o cursor se move sobre ela, defina Ampliação ativada: com Clique ou Passar o mouse. (Em Galápagos, a ampliação será sempre ativada ao passar o mouse.)
Mais ajuda com a Aproximação na imagem
- O Zoom da imagem mostra uma versão maior da imagem. Tecnicamente, ele não amplia o arquivo da imagem.
- A ampliação de imagens não está disponível na versão móvel.
- Para obter melhores resultados, formate a imagem do produto para exibição na web antes de enviar.
- Imagens com fundos transparentes (.png) exibirão a imagem original por trás da versão ampliada.
- Na versão 7.1, o Zoom da imagem não está disponível nas galerias de produtos com o design Carrossel.
Visualização rápida
Com a Visualização rápida, o cliente clica em um botão para ver os detalhes do item em uma lightbox, sem sair da página atual. A Visualização rápida incentiva o cliente a interagir com sua loja e a conhecer mais produtos.
O botão Visualização rápida pode ser exibido em:
- Blocos de Sumário
- Blocos de Produto
- Páginas de Armazenamento
O botão é exibido ao pairar sobre o produto. A lightbox de Visualização rápida inclui detalhes e imagens do produto, e um link para Exibir item completo que leva à página do item.
Se o código indesejado for exibido na visualização rápida, é provável que haja formatação de texto externo na descrição do produto. Para remover a formatação, digite novamente a descrição do produto manualmente ou cole-a como texto simples.
Adicione um botão de Visualização rápida
Você pode habilitar a Visualização rápida por Página de Armazenamento e por bloco. Se tiver várias Páginas de Armazenamento ou blocos, adicione os botões a cada um.
Para adicionar uma visualização rápida a um Bloco de Produto:
- No editor de Bloco de Produto, escolha um produto para exibir.
- Marque Ativar Visualização rápida.
- Clique em Apply (Aplicar) para salvar suas alterações.
- Salve as alterações à página.
Para adicionar visualização rápida a um Bloco de Sumário:
- No editor de blocos de sumário, certifique-se de que há uma página de loja selecionada na aba Conteúdo.
- Clique na aba Exibir.
- Marque Ativar Visualização rápida.
- Clique em Aplicar para salvar suas alterações. O botão de visualização rápida será exibido sobre toda a imagem em destaque do produto no bloco.
- Salve as alterações à página.
Para adicionar visualização rápida a uma Página de Armazenamento:
- Abra as configurações da página.
- Clique em Avançado, clique em Exibição Rápidae, em seguida, ative a opção Ativar Exibição Rápida.
- Se você tiver várias Páginas de Armazenamento, repita essas etapas para cada página.
Estilizar o botão e a lightbox (somente na versão 7.0)
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.
- No Menu Inicial, clique em Design e depois em Estilos do Site.
- Na seção Produtos: botão de Visualização rápida, personalize estilo, cor, fonte, preenchimento, posição e tamanho do botão Visualização rápida.
- Na seção Produtos: Visualização rápida em lightbox, personalize a aparência da lightbox.
Dica: se o texto da Visualização Rápida tiver problemas de formatação, tente adicionar os detalhes do produto como texto simples.
Mais ajuda com a Visualização rápida
- A Visualização rápida não está disponível em dispositivos móveis.
- Não é possível personalizar o texto do botão de "Visualização rápida" neste momento.
- As imagens de produtos são exibidas como quadrados recortados na Visualização rápida.
- Na versão 7.0, as descrições dos produtos aparece na Visualização rápida sem formatação especial, incluindo estilo de cabeçalho, negrito, itálico, listas com marcadores ou quebras de linha.
Efeitos hover
Os efeitos do recurso de pairar exibem informações ou criam movimento quando você move o cursor sobre uma imagem do produto, adicionando interação e animação à sua loja. As opções de cursor disponíveis no seu site dependem da versão do site .
Todas as Páginas da Loja mostram a segunda imagem do produto alternativo ao mover o cursor quando um produto tem mais de uma imagem.
As famílias de templates Brine, Farro, Skye, Tremont e York (com Páginas de Armazenamentos avançadas) têm três opções:
- Imagem alternativa
- Fade
- Sobreposição de informações do produto
Você pode exibir nomes e preços de produtos em uma sobreposição de cores ao passar o cursor do mouse nessas famílias de templates (com as Páginas de Armazenamento Clássicas):
- Adirondack, Avenida, Aviador, Bedford, Cinco, Flatiron, Forte, Ishimoto, Momentum, Montauk, Nativo, Pacífico, Wells, Wexley
Dois templates oferecem opções exclusivas de pairar:
- Galapagos é compatível com imagem alternativa e camada de informações de produto como opções
- O Supply aceita opções exclusivas de sobreposição de informações do produto