Como montar uma Loja Virtual completa | O Guia definitivo

Esse tutorial é para você que está buscando uma maneira de como montar uma loja virtual, mas não sabe nem por onde começar, pois, ao pesquisar esse assunto no Google, se deparou com uma enxurrada de informações sobre criação de lojas virtuais. Informações essas que podem ser embaraçosas pra quem não tem conhecimento algum sobre esse ramo do ecommerce.

Ao fazer uma busca no Google, os resultados exibem alguns artigos que falam a respeito do tema (montar loja virtual), mas que, apesar de serem artigos com excelentes dicas, não tratam da montagem de loja em si.

Os outros resultados mostram algumas ferramentas online para criação de lojas, o que nos deixa com uma visão muito limitada desse mercado, pois se formos criar uma loja usando a primeira opção que nos aparece, estaremos deixando de pesquisar bem o mercado e avaliar corretamente as possibilidades. Lembremos que cada negócio exige um formato específico de loja online.

Temos aqui um artigo super interessante sobre como criar um site de vendas, os quais falo das principais ferramentas online que existem e também de algumas outras plataformas. Temos também uma opção para se criar uma loja virtual básica e bem simples, sem muitos recursos de ecommerce, porém funcional, que é a loja virtual criada a partir do Wix, que podemos conferir aqui.

Como montar uma loja virtual passo a passo

<< Atenção: o post abaixo está desatualizado. Recomendo assistir este tutorial no Youtube que está atualizado.>>

Mas esse tutorial não quer apenas tratar do assunto ou indicar possíveis ferramentas e programas. O objetivo é te mostrar uma plataforma que atende TODAS as necessidade para um ecommerce saudável no Brasil, incluindo interface em português, integração com frete e forma de pagamentos nacionais e, o melhor, com excelente desempenho de usabilidade.

Primeiro veremos algumas características dessa plataforma, suas qualidades e vantagens e depois colocaremos a mão-na-massa. No final, teremos uma loja virtual completa e eficiente, a qual você também poderá fazer.

Montar uma loja virtual:  o ‘Woocommerce’

A ferramenta a qual me referi anteriormente, capaz de criar uma loja virtual completa, é o Woocommerce, um plugin que funciona no WordPress, que por sua vez, é uma das plataformas mais bem otimizadas que existem hoje em dia.

Com quase 5 milhões de instalações, o Woocommerce é hoje o plugin mais popular usado no desenvolvimento de lojas online em todo o mundo e o incrível disso tudo, é que ele é apenas um plugin para WordPress. Isso significa que a complexidade da estrutura programática dessa plataforma, já foi toda resolvida e sempre que houver algum bug ou aperfeiçoamento, estes são corrigidos/melhorados por atualizações super simples de serem feitas.

 As coisas chatas foram deixadas para quem entende.

Eu ousaria dizer que o nível de configuração do Woocommerce está até intuitivo.

Atenção: antes de prosseguir, recomendo que acesse este post aqui e veja mais informações e características importantes sobre o uso do Woocommerce.

Como montar uma loja virtual na prática

Chegamos ao momento de sair da teoria e partir pra ação. É hora de colocar a mão na massa e aprender a como fazer uma loja online passo a passo.

A nível didático, isto é, para que fique mais fácil você entender o processo, escolhi uma hospedagem gratuita para mostrar todos os passos da instalação, tanto do Worpdress, quanto do plugin Woocommerce.

O que vamos precisar para criar uma loja virtual de SUCESSO com o Woocommerce?

• Hospedagem de qualidade + Domínio próprio + Tema e Plugin Woocommerce.

O que vou utilizar para este tutorial?

• Hospedagem grátis + Subdomínio + Tema e Plugin Woocommerce.

A hospedagem GRATUITA escolhida foi a Hostinger.

Importante: por motivos particulares, não recomendo que você use a Hostinger para criar uma loja online, mesmo que resolva adquirir uma conta Premium lá, não aconselho que crie sua loja nessa hospedagem.

Lembrando que você também pode usar uma hospedagem que já possua ou qualquer outra hospedagem que pretenda contratar.

1º Passo

• Criando uma conta na Hostinger

Nesse primeiro passo, iremos criar uma conta para poder instalar o WordPress. Volto a alertar que use a Hostinger apenas para acompanhar o processo e aprender as etapas da instalação do Woocommerce.

1. Acesse a página da Hostinger e insira suas informações:

2. A Hostinger irá enviar um link para seu email cadastrado.

Após verificar seu email, já dentro do Painel, vá na guia ‘Hospedagem>> Nova Conta‘:

3. Escolha o plano Gratuito e clique em ‘Comprar’:

4. Se você não tiver um domínio próprio, deixe marcado a opção ‘Subdomínio‘. Insira um nome e uma senha.

Depois, clique em ‘Continuar‘:

5. Na próxima tela, digite o código captcha, marque os termos de uso e clique em ‘Comprar‘:

6. Você verá uma tela de sucesso e a listagem da conta. Para acessá-la, clique sobre ela:

Pronto. Sua conta Hostinger foi criada.

2º Passo

• Instalando o WordPress

Agora começaremos a instalação do CMS WordPress, necessário para que o Woocommerce funcione.

 7. Ao clicar no domínio, a conta se expandirá, escolha a opção ‘Auto Instalador‘:

8. Procure pela seção ‘Gerenciamento de Conteúdo‘ e escolha o ‘WordPress‘:

9. Em seguida, preencha os campos solicitados e clique em ‘Instalar‘:

• Língua: escolha o ‘Português Brasileiro’.
• Usuário Administrador: esse será o nome de login usado para entrar no adm do WordPress.
• Senha: uma senha para acessar sua conta WordPress.
• Email do Adm: insira seu email.

Aguarde alguns instantes para que o WordPress seja instalado.

3º Passo

• Fazendo Login no WordPress

10. Ainda nessa tela, atualize a página ou dê um F5 no teclado. (Ou vá na barra lateral e clique em “Website>>Auto Instalador”). Você verá 2 ações no seu domínio: Detalhes e Apagar.

Clique em ‘Detalhes‘:

11. Na janela que aparecer, clique na URL administrativa:

12. Informe seus dados de login e senha:

4º Passo

• Instalando o Woocommerce

Importante: este tutorial não tem a finalidade de explicar cada ferramenta e opções existentes no WordPress, pois temos diversos materiais disponíveis no Google e no Youtube que mostram todo o passo a passo de como usar cada parte do painel administrativo do CMS.

O objetivo deste artigo é tão somente mostrar a possibilidade da criação de uma loja virtual completa no WordPress, através do plugin Woocommerce.

13. Dentro do seu painel do WordPress, vá na barra lateral e clique na opção ‘Plugins>>Adicionar Novo‘:

14. Na janela que abrir, localize a barra de pesquisa e digite a palavra ‘Woocommerce‘ (tudo junto).

Tecle ‘ENTER‘ para pesquisar:

15. Nos resultados, escolha a opção ‘WooCommerce – excelling eCommerce‘ e clique em ‘Instalar agora‘:

16. Ao instalar, clique em ‘Ativar plugin‘:

17. Clique no botão ‘Install WooCommerce Pages‘ para incluir páginas na loja:

Traduzindo o plugin

18. Nessa página, clique no botão ‘Update Translation‘, para que a interface do plugin seja traduzida para o Português-BR:

Se não traduzir imediatamente, dê um F5 na página.

5º Passo

• Configurando o Woocommerce

19. Na barra lateral, vá em ‘Woocommerce>>Configurações‘:

20. Aqui começaremos a configurar a loja propriamente dita:

• Localização base: selecione Brasil e sua cidade sede.
• Locais de venda: escolha ‘Vender apenas para países específicos’ e selecione  ‘Brasil’.
• Notificação da loja: é uma mensagem de aviso que pode ser usada para quando a loja estiver em manutenção.

 21. Em ‘Moeda’, escolha ‘Real Brasileiro (R$)‘ e em ‘Posição da moeda’, selecione ‘Esquerda com espaço‘:

Em ‘Separador de milhares’, coloque um ponto e ‘Separador decimal’, coloque vírgula:

A menos que você saiba o que está fazendo, deixe o restante como está e salve as alterações:

6º Passo

• Configuração dos Produtos

22. Acesse a guia ‘Produtos‘ e escolha uma página onde os produtos serão apresentados, a mais comum é ‘Loja’:

• Nas opções seguintes deixe como está. Em ‘Ordem de produto padrão’, o mais comum é ‘Popularidade’.
• Na seção ‘Comprar’, habilite para que o usuário seja redirecionado ao carrinho de compras, logo após clicar em ‘comprar.

23. Personalize o tamanho que as imagens do produto deverão ser exibidas.

Mais abaixo, caso você vá vender produtos baixáveis, marque a opção ‘O download requer login’ e desmarque o ‘Conceder acesso..’:

Por fim, salve tudo.

Extra: redefinindo tamanho das imagens

• Para que as imagens não fiquem distorcidas ou pixelizadas, é necessário usar um plugin chamado ‘Regenerate Thumbnails‘.
• Após instalá-lo e ativá-lo, vá em ‘Ferramentas>Regen. Thumbnails‘:

• Clique no botão ‘Renerate All Thumbnails‘.

7º Passo

• Formas de Pagamento

24. Acesse a guia ‘Finalizar Compra‘ e escolha se quer usar cupons:

25. Em ‘Páginas de pagamento‘, indique as páginas onde estão, respectivamente, o carrinho de compras, a finalização e os termos e condições da loja (se não houver nenhum termo, deixe em branco):

26. Mais abaixo, selecione uma forma de pagamento que aparecerá por padrão na hora da compra. Salve as alterações:

27. Ainda nessa página, clique em cada sub-guia e configure as formas de pagamento, uma por uma, que você pretende oferecer na sua loja:

Mais a frente veremos como adicionar o PagSeguro.

8º Passo

• Configurando opções de Entrega (Frete)

28. Vá na guia ‘Entrega‘ e habilite esse recurso:

29. Escolha um modo de exibição do frete e o endereço padrão ao qual a entrega será selecionada:

30. Nos ‘métodos de entrega’, selecionamos uma entrega que estará marcada por padrão. Aqui normalmente escolhemos os Correios, mas como ainda não o adicionamos, deixamos no ‘Automático’.

Mais a frente veremos como adicionar o frete pelo Correios.

Veja que nessa página, podemos configurar cada método de entrega individualmente.

9º Passo

• Cadastro de Clientes

31. Na guia ‘Contas‘, você deverá escolher a página onde o cliente poderá acessar as informações e dados da conta que ele criou no site:

32. Escolha o comportamento desse recurso e guarde as alterações:

10º Passo

• Personalizando emails

33. Vá na guia ‘Email’ e selecione as configurações gerais para quando um email for enviado ao cliente:

Em ‘Imagem de cabeçalho‘, adicione a URL de uma imagem da sua empresa (pode ser a logotipo), e também escolha o texto do rodapé para os emails:

34. Acesse as subguias para habilitar ou desabilitar emails de notificação:

Para habilitar, entre em cada uma e marque:

Significados:

• Novo pedido: escolha se deseja receber um email quando um novo pedido for feito na loja.
• Processando pedido: notificação enviada para o cliente, assim que ele conclui o pedido. Todos os dados de compra também são enviados.
• Processando pedido: notificação enviada para o cliente, quando o pagamento é confirmado e o pedido é marcado como ‘concluído’.
• Fatura do cliente: email de fatura que é enviado para o cliente, com informações e links de pagamento.

11º Passo

• Adicionando Produtos

35. Para inserir produtos, vá em ‘Produtos>>Adicionar Produto‘:

A partir de agora, algumas configurações irão depender muito do tipo de produto que sua loja irá comercializar.

36. Adicione um título e descrição para seu produto, essa descrição aparecerá na página do produto:

37. Em ‘Dados do produto’, escolha um tipo. O mais comum é ‘Produto simples’.

Marque as opções caso seja um ‘produto Virtual’ (mídia digitais, onde não há entrega física), ou ‘Baixável’ (permite download mediante pagamento):

38. Na guia ‘Geral‘, podemos inserir um código para o produto, seu preço normal e preço de oferta (se houver) e também uma data para início e término dessa oferta:

39. Em ‘Inventário‘, marque se deseja gerenciar o estoque, adicione quantidade, status e permissão para encomendas:

40. Em ‘Entrega‘, devemos configurar o pedido e as medidas do produto.

Somente o ‘Peso’ é necessário para que o cálculo do frete seja realizado.

Obs: esses dados de dimensões aparecerão na página do produto.

41.  Os ‘Atributos‘ são detalhes customizáveis que cada produto apresenta:

42. Mais abaixo, em ‘Breve descrição do produto‘, adicione uma informação geral e relevante, deixe os detalhes para a ‘Descrição’ geral do produto.

12º Passo

• Imagem do produto

43. Para inserir uma imagem destacada na página do produto, clique em ‘Configurar imagem destacada‘:

44. Para criar uma galeria de imagens do produto, clique em ‘Adicionar galeria de imagens‘.

Por fim, escolha uma categoria e publique seu produto!

Veja aqui a página desse produto fictício.

Extra: você pode adicionar produtos fictícios apenas para visualizar a estrutura da loja e testar o sistema.

• Para isso, baixe este arquivo em formato ZIP e descompacte-o. Você verá um arquivo XML, este que será importado para sua loja.
• Agora, clique em ‘Ferramentas>>Importar‘:

• Clique em ‘WordPress‘, para instalar o importador:

• Clique em ‘Instalar agora‘:

Ative o plugin:

• Clique em ‘Escolher arquivo‘ e selecione o arquivo dummy-data.xml que você baixou anteriormente:

•  Faça o download e importe o arquivo. Agora clique em ‘Submit‘:

Clique em ‘Produtos‘ e você verá uma lista de produtos adicionados.

13º Passo

• Criando categorias

Vejamos agora como criar categorias para os produtos.

45. Na barra lateral, clique em ‘Produtos>>Categorias‘:

46. Agora dê um nome à categoria e para a URL (slug) da mesma:

Clique no botão ‘Adicionar categoria de produto‘ para criar a categoria.

14º Passo

• Trocando o tema do Woocommerce

Quando adicionamos o plugin, o Woocommerce é instalado no tema atual do site.

Contudo, existem alguns temas próprios para o Woocommerce, onde a maioria são oferecidos pela Woothemes, a criadora do Woocommerce.

A seguir, deixo uma pequena lista com o nome de temas para lojas virtuais no Woocommerce. Você pode primeiro visualizar e depois, se desejar, baixar:

1. Shopping: Visualizar – Baixar
2. Dazzling: Visualizar – Baixar
3. Artificer: Visualizar – Baixar
4. Wootique: Visualizar – Baixar
5. WooShop: Visualizar – Baixar
6. Virtue: Visualizar – Baixar
7. Vina Fashion: Visualizar – Baixar
8. Interior Store: Visualizar – Baixar

Atenção: não testei todos estes temas, portanto, aviso que se houver problemas em algum deles, favor entrar em contato com o suporte do fabricante, assim como também para qualquer erro de configuração do tema.

Como instalar um tema

Repare que todos os arquivos do tema foram deixados em formato .ZIP, mas não é necessário descompactá-lo. Veja abaixo como você deve proceder.

47. Acesse a barra lateral e clique em ‘Aparência>>Temas‘:

48. Clique em ‘Adicionar novo‘:

49. Em seguida, clique no botão ‘Fazer upload do tema‘:

50. Localize no seu computador, o tema que você baixou pelo link acima e clique ‘Instalar agora‘:

51. Ative o tema:

Obs: atualize o tema caso haja alguma atualização.

52. Para customizar algumas partes da aparência da loja, clique em ‘Personalizar‘ no nome do seu tema:

Obs: as opções dessa guia dependerão de cada tema particularmente.

Importante: Os itens, imagens, textos e produtos que são visualizados na demo de um tema, não estão incluídos no mesmo. Isso significa que ao instalar o tema, ele virá “vazio”, sem aqueles produtos e conteúdo de exemplo que foi visto na demonstração do tema.

15º Passo

• Adicionando Frete dos Correios

53. Para ter esse recurso importantíssimo para o bom funcionamento da sua loja, vá em ‘Plugins>>Adicionar novo‘. Digite ‘Correios‘ na caixa de busca e escolha ‘WooCommerce Correios‘.

Instale e ative o plugin.

54. Para configurar o frete pelos Correios, siga o caminho na barra lateral, clicando em:

‘WooCommerce>>Configurações>>Entrega>>Correios‘:

55. Habilite esse recurso, adicione o Cep de origem e escolha comportamentos como: mostrar ou não a estimativa de entrega e um simulador de frete:

56. Selecione quais serviços ele deve incluir:

57. Por fim, salve as alterações:

16º Passo

• Instalando o PagSeguro

58. Para ter o PagSeguro como mais uma forma de pagamento (gateway) na sua loja, vá em ‘Plugins>>Adicionar novo’ e pesquise por ‘Pagseguro’. Instale e ative o resultado seguinte:

59. Para configurá-lo, vá em ‘WooCommerce>Configurações>Finalizar Compra>PagSeguro‘.

60. Insira seu email do PagSeguro e gere um Token para que a transação funcione. Clique no lnk azul ‘aqui’ para abrir o PagSeguro:

61. Faça login e clique em ‘Gerar novo token‘:

62. Copie o token gerado e cole no campo ‘Token do PagSeguro‘, como mostrado acima.

Salve as alterações.

17ª Passo

• Conclusão

Após concluir essa longa jornada, você já pode começar a deixar a loja do jeitinho que deseja, principalmente na aparência. Recomendo também que faça vários testes de funcionalidade antes de iniciar a divulgação de sua loja virtual.

Repare que essas configurações mais chatinhas são realizadas apenas 1 vez, depois resta apenas fazer manutenção da loja, principalmente adicionando, editando ou excluindo produtos, preços e categorias, do jeito que funciona em qualquer outra ferramenta de criação de lojas virtuais.

Espero que esse tutorial tenha lhe ajudado a montar uma loja virtual de sucesso!!

É isso!