Botão na página do produto
O Botão na página é o convite para provar que aparece na página de cada produto. Você escolhe onde ele fica, o texto, o visual e se ele tem uma animação.
Para abrir, vá em Experiência na loja › Elementos › Botão na página.
Mostrar ou esconder o botão
Seção intitulada “Mostrar ou esconder o botão”Em Onde aparece, use Mostrar o botão na loja. Desligado, o provador só abre por um botão próprio da loja. Os outros ajustes continuam guardados.
Escolher onde o botão aparece
Seção intitulada “Escolher onde o botão aparece”Há três posições:
| Posição | Quando usar |
|---|---|
| Junto ao botão de comprar | Recomendado. O cliente vê ao decidir. |
| Flutuante no canto | Sempre visível enquanto o cliente rola a página. Escolha o canto em Canto da tela. |
| Sobre a foto do produto | Discreto, junto da imagem. Um selo redondo no canto da foto, que mostra o texto ao tocar. |
Marcar o lugar na sua página
Seção intitulada “Marcar o lugar na sua página”Para Junto ao botão de comprar e Sobre a foto do produto, você indica o lugar numa página real da sua loja.
-
Clique em Escolher na minha página.
-
Em URL da Página do Produto, cole o endereço de uma página de produto da sua loja e clique em Carregar.
-
Clique em Selecionar Elemento e depois clique no lugar da página. Para Junto ao botão de comprar, clique no botão de comprar ou na área perto dele. Para Sobre a foto do produto, clique na área que contém a foto, não na imagem em si.
-
Confira o lugar escolhido e clique em Usar esta posição.
-
Em Em relação a esse lugar, escolha Logo abaixo ou Logo acima. Esse ajuste vale só para Junto ao botão de comprar.
-
Clique em Publicar alterações.
A posição escolhida vale para todas as páginas de produto. Enquanto nenhum lugar for escolhido, o editor mostra Falta escolher o lugar na página.
Ajustar o botão sobre a foto
Seção intitulada “Ajustar o botão sobre a foto”Com Sobre a foto do produto, a seção de mesmo nome libera os ajustes do selo: Texto sobre a foto, Ícone sobre a foto, Canto da foto, cores, Diâmetro no computador (px), Diâmetro no celular (px), Distância da borda (px) e Espera do texto no celular (ms). Na espera, 0 mostra o texto na hora e 5000 equivale a 5 segundos.
Nessa posição, o visual vem só dessa seção. Os ajustes de aparência do botão comum (cores, forma, tamanho, fonte e estados) ficam desativados.
Mudar o texto e o ícone
Seção intitulada “Mudar o texto e o ícone”Em Conteúdo, edite Texto do botão e escolha o Ícone. Prefira um texto curto e direto.
Mudar a aparência
Seção intitulada “Mudar a aparência”Em Aparência, escolha o Estilo:
- Padrão: usa o ícone e as cores do tema do provador, sem texto próprio.
- Personalizado: usa o seu texto, as suas cores e os ajustes abaixo.
Se você estiver no Padrão e mudar qualquer ajuste de aparência, o botão passa para Personalizado e o editor avisa.
No estilo Personalizado, você ajusta:
- Variante: Preenchido, Contorno ou Link. Trocar a variante mantém cor, fonte, cantos, sombra e espaçamentos.
- Cor de fundo e Cor do texto. A cor começa igual à cor da marca; mudar aqui vale só para este botão.
- Forma e sombra: Cantos (Quadrado, Arredondado, Pílula ou Círculo), sombra e borda.
- Tamanho e largura: tamanho da letra, espaçamento interno, tamanho do ícone e Largura (Ajustar ao conteúdo ou Ocupar toda a largura).
- Texto: fonte, peso, itálico, maiúsculas e espaçamentos.
- Estados: cores ao passar o mouse e o contorno de foco para quem navega pelo teclado.
Ativar uma animação
Seção intitulada “Ativar uma animação”Na seção Animação, escolha o Movimento do botão:
| Opção | Efeito |
|---|---|
| Nenhuma | O botão fica parado. |
| Pulsar | O botão cresce e volta de leve, sem parar. |
| Brilho | Um reflexo de luz passa por dentro do botão de tempos em tempos. |
| Balançar | O botão dá uma balançada rápida de tempos em tempos. |
O movimento para quando o cliente passa o mouse ou foca o botão, e quem pediu menos movimento no aparelho vê o botão parado. Com o botão Sobre a foto do produto, a animação fica desativada.
Para desenvolvedores
Seção intitulada “Para desenvolvedores”Na seção Para desenvolvedores, quem cuida do código da loja pode informar o seletor CSS do lugar, uma página de referência e um CSS próprio para o botão. Use o seletor só se o lugar escolhido na página não funcionar.
Perguntas frequentes
Posso esconder o botão e abrir o provador por um botão da minha loja?
Sim. Desligue Mostrar o botão na loja. O provador passa a abrir só por um botão próprio da loja, indicado em Para desenvolvedores na aba Janela do provador.
A animação atrapalha o cliente?
O movimento para quando o cliente passa o mouse ou foca o botão. Quem pediu menos movimento no aparelho vê o botão parado.
Por que não consigo escolher animação?
Com o botão sobre a foto do produto, a animação fica desligada. O botão sobre a foto não se movimenta.