Chegou a hora de dar vida nos seus Hotsites! Crie páginas escolhendo um dos templates pré-desenvolvidos e vincule os seus respectivos conteúdos!
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.
Criando uma página nativa "sem conteúdo" na loja virtual
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é).
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>
Este 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
Cada plataforma pode disponibilizar tutoriais para a criação de páginas e templates, como o exemplo abaixo:
Configuração do hotsite no painel da SmartHint
1. No painel administrativo, no menu lateral vá na categoria de "Hotsites" e em seguida "Cadastro hotsites"
Nessa página, também estará uma listagem das páginas que já foram criadas. E, sempre que for necessário, poderá editar, desligar, pausar, excluir ou duplicar uma página. Basta selecionar os respectivos ícones, como mostra a imagem a seguir:
2. Depois, clique no botão nova página, e na tela de configuração da página de hotsite, preencha os campos como indicado abaixo:
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”.
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.
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)
3. Em "Selecione o template", defina qual será utilizado, 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.
Os Templates de categorias (legado) e Template padrão (legado): permite inserir URLs de imagens direto na configuração, enquanto as opções acima, precisa incluir os banners em "Cadastro de banner".
4. Em Banner, será preciso indicar a imagem para subir como banner e, caso queira, o URL de clique para redirecionamento.
Observação
Para lojistas que decidirem utilizar os Templates de categoria e Templates padrão, sem ser o legado deverão realizar o "Cadastro de banner"
Na configuração da página de hotsite esses banners cadastrados apareceram para serem selecionados.
Para os templates legado:
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.
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: pngMobile
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.
5. Em Vitrine, escolha os produtos que serão apresentados no hotsite, é possível subir os produtos de quatro formas diferentes, são elas:
a. 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, preencha apenas as colunas C, D e E:
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.
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).
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.
b. 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.
c. 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.
d. 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).
- 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;
e. Ativar ordenação automática: Na configuração de Hotsite, se a opção de "Ordenação Automatica" estiver desligada, ela seguirá a ordenação da lista importada. Agora se ela estiver ligada, ela vai considerar a relevância e destaque de produtos, quando houver.
6. Em 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.
Transformando o URL para 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.