Chegou a hora de dar vida nos seus Hotsites! Crie páginas escolhendo um dost emplates pré-desenvolvidos e vincule os seus respectivos conteúdos!
Confira o vídeo abaixo com o discorrido deste artigo:
O hotsite é uma página exclusiva que pode ser criada e divulgada as campanhas e produtos para captar a atenção dos consumidores, com foco direto em conversão de vendas. Na SmartHint, é possível criar quantos hotsites quiser e customizá-los como desejar.
Neste artigo iremos apresentar como criar e configurar os hotsites no painel administrativo SmartHint.
Criando uma página "sem conteúdo" na plataforma do site:
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.
A página precisará conter os elementos padrões das demais páginas do seu e-commerce, como header (cabeçalho) e footer (rodapé), indicado no exemplo abaixo:
Esta página não possui um 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.
Observação
Nesta etapa, da criação da página sem conteúdo na plataforma de hospedagem do site, é importante um conhecimento de criação de páginas, para isso sugerimos entrar em contato com o suporte das respectivas plataformas.
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, para 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 cabeçalho e o rodapé da página criada, nós iremos utilizar esta div para inserir os nossos conteúdos do Hotsite</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.
Atenção:
Para algumas plataformas, identificamos algumas divs que pode ser incluido como seletor na configuração do hotsite, 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
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 página, 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:
Na tela de configuração da página de hotsite, preencha os campos como indicado abaixo:
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”.
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, da imagem acima o URL da página foi identificado como “selecionados’’. Veja como o URL ficará: www.minhaloja.com.br/hotsite?page=selecionados. Verifique como transformar o link de acesso para hotsite no item 4 deste artigo.
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, conforme indicado acima neste artigo.
Observação
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)
4- Template
O template de hotsite da SmartHint é composto por três elementos: banner, listagem de produtos e texto. Para configurar essas opções, você pode selecionar o Template padrão ou o Template de Categorias, veja abaixo suas diferenças:
- Template de Categorias: contém elementos como banner e lista de produtos.
- Template padrão: contém os mesmos elementos (banner e lisa de produtos) e um adicional de texto para inserir abaixo do banner na página. Como apresentado abaixo:
5- Banner
Nesse espaço, será preciso indicar o URL da imagem para subir como banner e, caso queira, o URL de clique para redirecionamento.
- 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.
Observação
Para usúarios-lojistas com integração novo catálogo, o banner é inserido de outra forma em nosso painel, como um template de banner, confira como criar um template no artigo "Cadastro de banner - novo catálogo".
Na configuração da página de hotsite esses banners cadastrados apareceram para serem selecionados.
Acima dos campos de URL de clique e de banner, temos a opção "Utilizar também no mobile" se a opção 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.
Atenção:
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 mobile é 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.
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:
- 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.
Observação
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.
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.
Atenção
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).
- 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:
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.
- 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.
-
Produtos por condição: Defina as regras para que os produtos sejam apresentados de acordo com os valores de condições e de forma dinâmica na vitrine customizada. Desta forma, você não precisará se preocupar em alterar a exibição de produtos de forma manual todas as vezes que ocorrem atualizações (Preço de/por, Gênero, Tag, Marca e Categoria).
As condições são de “contém” ou “ não contém”: Preço de/por, Gênero, Tag, Marca e Categoria;- Para as regras de condição que “contém”, todos os produtos que possuírem os valores dos atributos indicados na regra deverão ser retornados;
- Para as regras de condição que “não contém”, todos os produtos que possuírem os valores dos atributos indicados na regra não deverão retornar.
Na imagem de exemplo acima, foi incluido a condição de apresentar produtos com PREÇO DE de R$10,00 até R$100,00 e que seja do GÊNERO feminino e que não contém na CATEGORIA de camisetas.
Todavia, entre os valores de cada condição, deverão ser agrupados e segmentados.
Por exemplo:Neste exemplo acima, existe uma regra de PREÇO POR e CATEGORIA, sendo assim, um agrupamento entre as condições deverá percorrer todas as regras e possibilidades.
- Produtos de R$ 10,00 até R$ 100,00 E Tenis;
- Produtos de R$ 10,00 até R$ 100,00 E Vestidos;
- Produtos de R$ 10,00 até R$ 100,00 E Calças;
OBSERVAÇÃO:
Com esta funcionalidade, sempre que houver uma alteração no produto, a a listagem do Hotsite validará as condições para exibir os produtos de forma atualizada. Ou seja, sempre que houver atualização da base no painel, os produtos dessa condição de vitrine customizada serão atualizados.
7- Texto adicional (para template padão)
Quando selecionado o Template Padrão (exemplificado no tópico 4), automaticamente abrirá o campo de Texto Livre. Para incluir esse texto, basta digitar o conteúdo no campo indicado, que esse texto aparecerá abaixo do banner na página de hotsite.
8- 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)
Página hotsite: Insira logo após o link da página criada o atributo “?page=” Ficando assim: www.minhaloja.com.br/teste?page=selecionados
Pronto! Agora você poderá vender mais com as páginas de Hotsite da SmartHint!
Esperamos que este conteúdo tenha sido útil pra você! Confira outros artigos.