O hotsite é uma página exclusiva que você pode criar para divulgar algo e captar a atenção dos consumidores, com foco direto em conversão de vendas. Na SmartHint, você pode criar quantos hotsites quiser e customizá-los como desejar.
Criamos esse tutorial para te ajudar na criação e configuração dos hotsites no nosso painel.
1.0 Como criar uma página na plataforma
O primeiro passo para a criação do hotsite na SmartHint é a criação de uma página dentro de sua plataforma. Essa página pode ser usada para várias páginas de hotsites na configuração em nosso painel.
Basicamente, ela precisa conter os elementos padrões das demais páginas do seu e-commerce, como header (cabeçalho) e footer (rodapé):
Veja que ela não tem nenhum conteúdo propriamente dito. É preciso agora indicar um seletor (div) de elemento nessa página para carregarmos os conteúdos do hotsite — que serão apresentados no próximo passo deste artigo.
2.0 Criando ou identificando div na página
Cada plataforma tem uma forma de integrar e fazer funcionar os elementos HTML da página. Nesse sentido, como será preciso criar um seletor (div ou class) para indicar o local na página em que vamos inserir as informações do hotsite, separamos um script genérico para realizar essa criação:
<!DOCTYPE html>
<html>
<head>
<div class=”topo-site”>
</div>
<div class=”menu-site”>
</div>
</head>
<body>
<div id=”smarthint”>Insira uma div vazia entre o seu cabeçalho e o seu rodapé, nós iremos utilizar esta div para inserir os nossos conteúdos</div>
</body>
<footer>
<div class=”info-site”>
</div>
<div class=”fale-conosco”>
</div>
</footer>
</html>
Esse script serve para exemplificar como funcionam os elementos de uma página. Em resumo, é preciso criar essa div (que poderá ser utilizada em todas as outras páginas), para indicar em qual lugar iremos carregar os conteúdos a serem configurados. Isso será tratado no próximo tópico, na parte de template.
AJUDINHA DA SH - Para algumas plataformas, já identificamos algumas divs que podemos incluir como seletor, assim não será preciso criar a div, somente a página (mencionada no primeiro tópico).
-Loja Integrada
Utilizar: .conteiner-principal
-Shopify
Utilizar: #shopify-section-collection-template
-Nuvemshop
Utilizar: (.js-body-position.container)
As plataformas abaixo disponibilizaram um tutorial para a criação das divs. Confira nos links:
Traycorp
https://traycorp.desk360.com.br/ajuda/article/style-editor
VTEX
https://help.vtex.com/pt/tutorial/como-criar-um-template-de-pagina–frequentlyAskedQuestions_1850
3.0 Configuração do hotsite no painel da SmartHint
Para criar e configurar os hotsites, acesse o painel da SmartHint > menu lateral > Hotsite > Páginas.
Depois, clique no botão nova página, como indicado acima.
Nessa seção, você também consegue visualizar as páginas que já foram criadas. E, sempre que for necessário, pode editar, desligar, pausar, excluir ou duplicar uma página. Basta selecionar os respectivos ícones, como mostra a imagem a seguir:
3.1 Nome da página
No campo Nome da página, insira o nome para identificação da página no nosso painel e título da página para os compradores. Ex: “Selecionados”.
3.2 URL da página
Nesse campo, identifique qual é o final do URL que você deseja para a página de hotsite, pois adicionaremos esse termo no final do URL criado para a página.
Por exemplo: uma página em branco foi criada com o nome hotsite (www.minhaloja.com.br/hotsite), então o termo que você incluir nesse campo nós vamos inserir para trazer o conteúdo do hotsite. Nesse caso, o URL da página foi identificado como “selecionados’’. Veja como o URL ficará: www.minhaloja.com.br/hotsite#page=selecionados
Obs: verifique como transformar a página em hotsite no item 4.0 deste artigo.
3.3 Seletor da página
Nesse campo, é preciso indicar o seletor criado na página (seja div ou class) para inserirmos o conteúdo no hotsite. Lembrando que algumas plataformas já têm alguns seletores que podemos utilizar. Verifique no tópico 2.0 deste artigo.
Importante: a div criada na plataforma pode vir em dois formatos: ID ou CLASS. Ambas funcionam, porém, para indicá-las no painel, é preciso chamá-las com as seguintes nomenclaturas: quando for class, inserir o seletor entre parênteses. Ex: (.smarthint-selec). Quando for ID, inserir seletor com #. Ex: (#smarthint)
3.4 Template
O template de hotsite da SmartHint é composto por três elementos: banner, vitrine de produtos e filtro. Para configurar essas opções, você pode selecionar o Template padrão ou o Template de Categorias.
Características:
Template de Categorias: contém elementos como banner, vitrine e filtro.
Template padrão: contém os mesmos elementos (banner, vitrine e filtro) e um adicional de texto para inserir abaixo do banner na página.
3.5 Banner
Nesse espaço, será preciso indicar o URL da imagem para subir como banner e, caso queira, o URL de clique.
URL da imagem do banner (obrigatório): nesse campo você deve informar o URL em que a imagem do banner está hospedada.
URL de clique do banner (opcional): caso queira levar o usuário para algum destino, identifique qual o URL nesse campo. Assim, quando ele clicar no banner, será redirecionado para a página indicada.
Se a opção Utilizar também no mobile for ativada, a imagem ficará responsiva para ambos os dispositivos (mobile e desktop). Mas, caso queira desenvolver uma arte exclusiva para mobile, desligue o botão, puxando para a esquerda, e preencha o URL da imagem para o mobile e o URL de clique desejado.
As imagens devem ter as seguintes características:
Desktop
Largura: aproximadamente 1.000 pixels
Altura: aproximadamente 200 pixels
Resolução: 96 pixels
Tamanho: até 200 KB (quanto menor, melhor)
Formato: png
Mobile
Mesmo caso do desktop, utilizaremos apenas a altura como padrão, pois a largura será adaptada de acordo com o layout. A altura do desktop é de 94px.
Lembrando que, como adaptamos as ferramentas ao layout do site, essas dimensões são ajustadas de acordo com a visualização do usuário.
3.6 Vitrine
Esse espaço serve para escolher os produtos que serão inseridos e apresentados em vitrines no hotsite.
Temos três opções para essa inserção:
1) Importação de produtos: para essa opção disponibilizamos na tela de configuração o arquivo .CSV, no qual você poderá fazer a identificação dos produtos, como mostra a imagem.
Não é obrigatório o preenchimento das colunas A e B. Mas a C, D e E sim.
Campo: informe aqui qual é a forma que iremos reconhecer o produto: por código SKU, MPN ou através do URL do produto.
Valor: nesse campo é preciso preencher qual é o código ou link do produto.
Ordem: aqui você deve escolher a posição em que esse produto aparecerá na página. Lembrando que ‘’0’’ é a primeira posição.
Obs: sempre que precisar editar os produtos da página (excluir, inserir ou até mesmo trocar a ordem de posição deles), basta fazer o download do arquivo na tela de configuração, pois ele estará sempre salvo com as últimas modificações que fizer. Depois, faça upload novamente com a planilha atualizada.
Ao fazer a importação de produtos via planilha, não será possível, na mesma configuração de página, trocar para inserir via resultado de busca (segunda opção de inserção).
2) Resultado de busca: para utilizar essa opção, será necessário realizar uma busca em sua loja pelo termo desejado. Assim, os produtos apresentados no resultado dessa pesquisa serão os produtos que aparecerão no hotsite. Para isso, basta copiar o URL dessa busca e colar no campo indicado:
Importante: na inserção por planilha, os produtos precisam estar com estoque e ativos no nosso painel. Caso contrário, poderão aparecer com erro.
Se você não tem a opção de filtros na busca SmartHint da sua loja, entre em contato com a equipe de suporte através do chat, no painel administrativo.
3) Vitrine de recomendação: Essa opção da importação, irá trazer os produtos que são recomendados nas vitrines Lançamentos ou Ofertas Especiais. Para isso basta seleciona-los.
3.7 Texto adicional
Quando selecionado o Template Padrão (exemplificado no tópico 3.4), automaticamente abrirá o campo de Texto Livre. Para incluir esse texto, basta digitar o conteúdo no campo indicado.
4.0 Como transformar a página em hotsite
Para transformar a página em hotsite, é preciso incluir alguns atributos, confira a seguir.
Página criada: www.minhaloja.com.br/teste (página sem conteúdo, item 1.0).
Página hotsite: para a plataforma VTEX, insira logo após o link da página criada o atributo “#page=” Ficará mais ou menos assim: www.minhaloja.com.br/teste#page=selecionados
Para as demais plataformas, insira logo após o link da página criada o atributo “?page=” Ficará mais ou menos assim: www.minhaloja.com.br/teste?page=selecionados
Pronto, agora você poderá vender mais com as páginas de Hotsite da SmartHint!