Olá pessoal neste treinamento vamos mostrar uma ferramenta da sua loja que vai lhe ajudar a compor imagens, texto mais um carrossel de produtos! Mas onde devo usar este recurso? Imagine que você está usando o blog da loja e criou um conteúdo falando sobre itens ideias para decorar um ambiente da casa. Ao final do conteúdo seria muito legal ter um carrossel de produtos com estes itens, assim o seu cliente/público ao se interessar pelo conteúdo e por impulso ele vai comprar aqueles produtos! E ainda, você poderá usar a URL do blog para fazer uma campanha de marketing digital sobre o assunto, trazendo mais tráfego para sua loja e mais conversão de vendas! Sensacional não?
Para colocar um produto ao final ou no meio de um conteúdo, seja ele blog, página institucional ou até mesmo na tela inicial da loja com uma boa diagramação e layout profissional, vamos usar um recurso da sua loja! Então depois de definir onde vamos colocar esse grupo de produtos, seja em nossas páginas, conteúdo de blog, itens da tela inicial, e etc… vamos precisamos criar um grupo de produtos, vá no menu de Cadastros > Produtos > Produtos em Destaque ao adicionar um novo item aqui você pode colocar um título, escolha um tipo por produto ou categoria (veja o treinamento para saber mais) e ao salvar será gerado um SHORTCODE.
Este código pode ser copiado e colado em qualquer local da loja que use um editor de texto, como mostra na imagem abaixo:
Aqui no exemplo, eu usei ele na Área Personalizada, ao salvar e conferir na loja veja que ele vai substituir este texto pelos produtos que colocamos em destaque. Mas este recurso tem mais alguns truques que podem te ajudar a melhorar a exibição e controle dos itens exibidos, vamos lá.
Digamos que que queira montar algo como a imagem abaixo na tela inicial da loja:
Aqui temos um fundo colorido com duas colunas, sendo a primeira com título, texto e botão para categoria e do outro lado um carrossel de produtos com dois itens por linha sem a exibição do título, para fazer isso vamos usar alguns parâmetros no nosso shortcode, vamos adicionar da seguinte forma:
[produtos-destaque id="0" itemsperpage="2" cols="2" title="0"]
Note que depois do ID que define qual é o grupo de produtos passamos mais alguns parâmetros vamos conferir mais de perto:
| produtos-destaque | Nome do Shortcode, não mude-o e deixe tudo dentro das chaves [ ] |
|---|---|
| id | Número de referencia do gRupo que criamos |
| itemsperpage | Itens por página, para cada lâmina do carrossel iremos exibir esta quantidade de produtos |
| cols | colunas por página, aqui é definido quantas colunas teremos de produtos, use a seguinte combinação: 1, 2, 3, ,4 ,6 ou 12 |
| title | Caso não preencha ou use o valor 1, o título será exibido se usar o valor 0 ele não será exibido |
| altura | Altura da imagem, o valor será convertido em pixel. Caso não passe nenhum valor nem este nem largura será inserido |
| largura | Largura da imagem, o valor será convertido em pixel. Caso não passe nenhum valor nem este nem altura será inserido |
| redimensionar | 0 para deixar o tamanho padrão, se passar 1 ou não for colocar este parâmetro, irá colocar o valor de altura ou largura que definir antes, ou o padrão da loja se não colocar |
| intervalo | Defina um intervalo ao passar de uma lâmina para outra em Milessegundos. Ex: 1min = 60000ms Observação: Se não colocar esse parâmetro o carrossel não vai trocar de lâmina de forma automática |
Aqui destacamos dois itens importantes para compor esse layout o “itemsperpage” e “cols” para ficar mais claro como dividir a razão de itens por colunas veja este artigo no passo 5 tem uma ilustração bem simples para lhe ajudar
Então voltando ao nosso exemplo ficou fácil agora né, agora temos o grupo, com 2 itens por página e 2 colunas sem título: [produtos-destaque id=”0″ itemsperpage=”2″ cols=”2″ title=”0″]
Agora um exemplo onde podemos definir uma largura e altura da imagem, para otimizar o carregamento dos itens: [produtos-destaque id=”0″ altura=”250″ largura=”250″]
Outro exemplo é usando ele com as imagens do tamanho original, cuidado para não afetar o carregamento da loja, neste exemplo temos: [produtos-destaque id=”0″ redimensionar=”0″]
Agora é caprichar na diagramação, no exemplo acima basta criar uma tabela com duas colunas, colorir a tabela e de um lado colocar o texto e do outro o shortcode se quiser saber mais sobre como editar conteúdo em tabela confira neste outro treinamento aqui.
Lembre-se este é um recurso que poderá usar em qualquer parte da loja que use o editor de texto, poderá usar em uma página institucional ou em um artigo do blog, desta forma pode gerar conteúdo específico para falar de um determinado grupo de produtos e ao final deixar eles para serem comprados, poderá por exemplo escrever sobre um “look” ideal para uma festa e no final do artigo deixar os produtos para seu cliente comprar.
Espero ter ajudado, até próxima e boas vendas!
