Dentro este guia, vamos ver como realizar um site web e-commerce através do Framework360.
Primeiro, é oportuno distinguir se queremos criar um site web e-commerce com um único produto ou com múltiplos produtos. No primeiro caso, ou seja, se quisermos vender um único produto, basta irmos na opção Checkout do menu principal do Framework360, configurar o checkout e inserir manualmente nosso produto; sobre isso, nos ocupamos em um guia específico que você pode consultar clicando aqui.
Dentro deste guia, por outro lado, nos ocuparemos de como realizar um site web e-commerce para a venda de múltiplos produtos.
Passo 1: Vamos instalar o plugin Ecommerce
Primeiro, precisamos instalar o plugin Ecommerce, para fazer isso vamos à opção Plugin do menu principal do Framework360 seguindo os seguintes passos:
Personalização > Plugin
Uma vez dentro da tela dos plugins, procuramos, através da área apropriada para pesquisa, o plugin Ecommerce e o instalamos.
Uma vez instalado o plugin dentro do menu principal do Framework360, abrir-se-á uma nova seção chamada, justamente, Ecommerce através da qual poderemos ampliar nosso site com todas as funcionalidades multiproduto.
Passo 2: Vamos definir as preferências do plugin Ecommerce
Depois de instalar o plugin Ecommerce , devemos nos dirigir à seção Preferências do Plugin do menu principal do Framework360 e vá até a opção Preferências Ecommerce seguindo os seguintes passos:
Personalização > Preferências do Plugin > Ecommerce
Uma vez dentro da página de personalização das Preferências Ecommerce, através da opção Sistema de avaliações poderemos decidir se ativamos ou não a possibilidade de permitir que nossos clientes deixem avaliações.
Enquanto isso, indo na opção Moderar avaliações, poderemos aprovar pessoalmente as avaliações deixadas pelos clientes antes da publicação efetiva no site.
Por fim, através da opção Atualização automática do estoque poderemos decidir se o estoque deverá reduzir a quantidade do vendido automaticamente no momento em que o cliente faz o pedido ou no momento em que o pedido é considerado pago.
Passo 3: Adicionamos um produto ao nosso E-commerce
Para adicionar um produto ao nosso E-commerce, vamos à opção do menu principal do Framework360 Produtos seguindo os seguintes passos:
Ecommerce > Produtos
Uma vez dentro da tela Produtos clicamos no botão verde no canto superior direito Adicionar.
Dentro da tela de criação do produto temos várias abas que nos permitem personalizar de forma precisa a criação do nosso produto.
TAB PRODUTO
Dentro da aba Produto podemos adicionar:
- o nome do produto;
- a categoria de referência (daqui a pouco também vamos tratar do aspecto da criação da categoria);
- o preço;
- a eventual taxa a ser aplicada ao preço;
- Um eventual desconto do artigo e o limite temporal do desconto;
- a quantidade de estoque do produto;
- a quantidade mínima de produto adquirível (útil para sites que se ocupam de venda por atacado);
- a descrição breve e a descrição extensa do produto;
- decidir se destacar o produto;
- o tipo de produto (padrão, digital ou vale-presente);
- o código do produto;
- o EAN;
- O peso do produto.
TAB ATRIBUTOS E VARIAÇÕES
Enquanto, ao nos deslocarmos para a aba Atributos e Variações podemos selecionar os eventuais atributos do produto caso o produto apresente variações, por exemplo, de tamanho ou cor.
Para poder inserir atributos ao nosso produto, é necessário que tais atributos tenham sido criados previamente na área apropriada do menu principal do Framework360 chamada Atributos. Para acessar a área Atributos , devemos nos dirigir ao menu principal do Framework260 e seguir os seguintes passos:
Ecommerce > Atributos
Uma vez dentro da área Atributos , para adicionar um novo atributo, clique no botão verde no canto superior direito Adicionar. Neste ponto, a tela de criação do atributo será aberta, onde podemos realizar e definir a variação desejada.
Depois de criar nosso atributo, podemos voltar à aba Atributos e variações, presente na tela de criação do produto em que estávamos anteriormente, e selecionar o atributo criado. Na figura seguinte, vemos um exemplo em que estamos selecionando o atributo cor do nosso produto:
Uma vez selecionado o atributo desejado, continuando a rolar dentro da aba Atributos e Variações podemos inserir uma imagem, o código, a quantidade e o preço de cada variante do nosso atributo. No exemplo apresentado, temos a possibilidade de inserir a imagem do produto na cor vermelha, a imagem do produto na cor verde e os respectivos códigos, quantidades e preços, caso estes últimos variem em relação ao que foi inserido na aba Produto vista anteriormente.
TAB ARTIGOS RELACIONADOS
Dentro da aba Artigos Relacionados temos a possibilidade de inserir eventuais artigos relacionados em:
- Up-Sell, ou seja, inserir um upgrade do produto (por exemplo, se o produto em questão é um modelo de sapato, o up-sell poderia ser um modelo de sapato semelhante, mas mais caro), será proposto ao cliente comprar o upgrade em vez do produto que está vendo;
- Cross-Sell, ou seja, inserir um produto relacionado ao que o cliente está vendo (por exemplo, se o produto em questão é um modelo de sapato, o cross-sell poderia ser um par de meias), será proposta ao cliente a combinação de compra de ambos os produtos.
TAB IMAGENS
No tab imagens temos a possibilidade de carregar diferentes imagens do produto. Lembramos que para inserir imagens diferentes com base em um determinado atributo, como visto anteriormente, devemos ir no tab Atributos e Variações.
TAB SEO
No tal SEO temos a possibilidade de inserir um TAG Title e um TAG Description para decidir como o produto aparecerá no motor de busca.
TAB SOCIAL
Por fim, dentro do tab Social podemos decidir como nosso produto aparecerá nas redes sociais, portanto, mesmo princípio que vimos para o tab dedicado ao SEO, mas para as Redes Sociais.
Passo 3: Vamos criar as categorias e subcategorias dos nossos produtos
Sobre como criar as categorias e subcategorias dos nossos produtos, realizamos um artigo específico que te convido a consultar clicando aqui.
Passo 4: Adicionamos os produtos no site para torná-los compráveis
Uma vez criados os produtos, só nos resta inseri-los no site web para torná-los compráveis.
Primeiramente, devemos ir à página do site web onde queremos que nossos produtos apareçam, que, por exemplo, pode ser a página inicial do site. Para fazer isso, vamos até a seção Páginas do menu principal do Framework360 seguindo os seguintes passos:
Sitio Web > Páginas
Uma vez dentro da tela resumida de todas as páginas do site web, vamos clicar na página onde queremos inserir nossos produtos para modificá-la.
Bem, neste ponto estamos dentro da tela de edição da página que selecionamos, agora vamos adicionar uma linha e, através do visual builder do Framework360, inserimos dentro da linha o bloco Lista Produtos (presente dentro da aba Ecommerce) como mostrado nas figuras seguintes:
A este ponto, o Framework360 nos dirá que é necessário criar uma estrutura do bloco, para isso vamos à aba Estrutura para criar uma nova estrutura ou importar uma estrutura criada anteriormente, como mostrado na figura seguinte:
Uma vez definida a nossa estrutura, se quisermos modificar a visualização (por exemplo, definir se queremos que os produtos apareçam dentro de uma grade ou de um carrossel e quantos produtos devem ser exibidos dentro da grade ou do carrossel nas várias posições celular, tablet e pc) devemos nos dirigir à aba Geral na seção Visualização.
Passo 5: Modificamos a página do produto
Uma vez criado o produto Framework360, ele criará automaticamente a página onde o produto será exibido. Se quisermos modificar esta página, não precisamos fazer nada além de ir à opção Páginas presente no menu principal do Framework360, seguindo os seguintes passos:
Sitio Web > Páginas
Uma vez dentro da opção Páginas , vamos procurar a página do nosso produto e clicando nela poderemos modificá-la através do visual builder do Framework360.
Ou, se não quisermos modificar manualmente as graficas das nossas páginas de produtos, poderíamos instalar um dos muitos templates dedicados ao e-commerce que o Framework360 nos disponibiliza. Para mudar o template, devemos nos dirigir à opção Temas do menu principal do Framework360, seguindo os seguintes passos:
Personalização > Temas
Passo 6: Adicionamos o carrinho dentro do menu principal
Vamos ver agora como podemos adicionar dentro do menu do nosso site, ou seja, no header do site, o carrinho. Para fazer isso, vamos até a opção Blocos Globais do menu principal do Framework360 seguindo os seguintes passos:
Sítio Web > Blocos Globais
Uma vez dentro da tela dos Blocos Globais , vamos clicar no bloco Menu Principal para modificá-lo. Neste ponto, inserimos dentro do nosso menu uma nova coluna e vamos nos mover para dentro dela, através do visual builder do Framework360, o bloco Carrinho como mostrado na figura seguinte. O bloco carrinho o encontramos dentro da aba Pagamentos do visual builder.
Depois de inserir o bloco Carrinho vamos configurá-lo a nosso gosto, sempre através do visual builder, e o jogo è feito!
Se você quer descobrir como realizar o header do seu site com o Framework360, nós preparamos um guia específico que você pode consultar clicando aqui.
Passo 7: Vamos configurar o Checkout
Chegou a hora de configurar o Checkout. Um checkout é a última parte de um site web e-commerce que permite ao cliente comprar os produtos que ele inseriu anteriormente no carrinho ou que de qualquer forma ele está interessado em adquirir.
Sobre como configurar o Checkout corretamente, nós preparamos um guia específico que convido você a consultar clicando aqui.
Passo 8: Conectamos os métodos de pagamento PayPal e Stripe
Bem, chegamos à última etapa da fase de compra, ou seja, o pagamento. Para permitir que o cliente realize o pagamento, precisamos conectar ao nosso site web e-commerce um método de pagamento; os métodos mais utilizados são
PayPal e Stripe. Nós criamos dois guias específicos nos quais explicamos como conectar esses dois métodos de pagamento ao Framework360; para consultá-los, clique nos links abaixo:- Como conectar PayPal ao nosso site web criado no Framework360
- Como conectar Stripe ao nosso site web criado no Framework360
Passo 9: Criamos um cupom de desconto
Por fim, è oportuno especificar que o Framework360 também nos dá a possibilidade de criar um cupom de desconto que os clientes podem utilizar na fase de compra em nosso e-commerce. Também sobre este assunto, para maior clareza, consideramos apropriado criar um guia específico que você pode consultar clicando aqui.
