Ir para o conteúdo

Provador virtual no seu site

Leve o provador da Previaly para a página de produto da sua loja virtual. Você cola um trecho de código uma única vez; a partir daí, cada armação que existir nos dois lados ganha o botão Experimentar agora (ou um ícone sobre a foto) e abre o provador por cima do seu site, com câmera, exatamente como na sua página da Previaly.

Antes de começar: o Código do modelo

O seu site reconhece a armação pelo Código do modelo. Em cada armação, no painel da Previaly, use no Código do modelo o mesmo SKU (código) que o produto tem na sua loja virtual. Maiúsculas e espaços não importam: rb-3025 e RB-3025 são o mesmo código.

Sem o código igual nos dois lados, o botão simplesmente não aparece naquele produto — e nada mais muda no seu site.

O trecho

Copie em Configurações → Provador no seu site, no painel. Ele tem este formato, com o endereço da sua ótica no lugar de minha-otica:

<script src="https://previaly.com/provador.js" data-loja="minha-otica" async></script>

Ali você também escolhe se prefere o botão antes do Comprar ou o ícone sobre a foto do produto. A escolha vale para todos os produtos e pode ser trocada quando quiser, sem mexer no site.

O botão segue o idioma do seu site: numa página em português ele diz Experimentar agora; com <html lang="en">, Try on now; com lang="es", Probar ahora.

Onde colar em cada plataforma

Shopify

  1. No painel do Shopify, abra Loja virtual → Temas e, no tema atual, clique em Personalizar.
  2. Na página de produto, adicione um bloco Liquid personalizado (Custom Liquid) e cole o trecho. Salve.
  3. Alternativa: … → Editar código, abra theme.liquid e cole o trecho logo antes de </body>.

Nuvemshop

  1. No painel, abra Configurações → Códigos externos.
  2. Cole o trecho no campo de códigos e salve.

Não é preciso editar o tema nem acessar o FTP.

Loja Integrada

  1. No painel, abra Visual → Incluir código HTML e ative o Modo avançado.
  2. Clique em Adicionar código. Local: Código no rodapé. Página: Produto (ou Todas). Tipo: JavaScript.
  3. Cole o trecho e clique em Criar código.

Esse recurso da Loja Integrada está disponível nos planos pagos. As alterações podem levar até 15 minutos para aparecer no site.

WooCommerce (WordPress)

  1. Instale um plugin de trechos de código, como o WPCode, e crie um trecho de rodapé (footer) para as páginas de produto — ou cole o trecho no footer.php do seu tema filho, antes de </body>.
  2. Salve e abra uma página de produto para conferir.

Qualquer outro site

Cole o trecho antes de </body> em todas as páginas de produto. Se o seu site não expõe o SKU na página, você pode apontar a armação diretamente: acrescente data-sku="CODIGO" ao trecho daquela página, ou data-armacao="ID" com o identificador da armação (os 12 caracteres no fim do endereço dela na Previaly).

Como conferir

Abra a página de um produto cujo código exista nos dois lados. O botão Experimentar agora aparece antes do Comprar, com a mesma altura dele (ou o ícone, sobre a foto). Ao tocar, o provador abre por cima do site e pede a câmera. Fechar volta para o seu site, sem recarregar.

Perguntas frequentes

Isso pode quebrar o meu site? O trecho só acrescenta um botão e uma janela por cima; não altera formulário, carrinho ou checkout. Quando não reconhece a página ou o código, ele não faz nada.

O provador não abriu dentro do Instagram. O navegador interno do Instagram e do Facebook não libera a câmera dentro de outra página. Nesses casos o provador abre em uma nova aba, na sua página da Previaly.

Posso desligar a medição de DNP e altura? Sim, em Configurações → Provador. A escolha vale na sua página da Previaly e no seu site.

Quero um seletor diferente para o botão Comprar. Acrescente data-botao-comprar=".minha-classe" ao trecho; para o ícone, data-foto=".minha-galeria". Isso é para quem mexe no tema — na maioria dos casos não é preciso.