Como criar um site de e-commerce (sem programar)

Aprenda a criar sua própria loja virtual tipo Shopify, usando o editor visual web do Bubble.

Como criar um site de e-commerce Shopify no code

Para ter uma loja virtual, sites de e-commerce como o Shopify, BigCommerce ou Volusion deixam fácil para comerciantes criar e começar a vender produtos rapidamente pela internet.

Se você tem interesse em criar seu próprio site de e-commerce, no entanto, tradicionalmente seria necessário um time de engenheiros de software para desenvolver um aplicativo rico em recursos – a menos que você crie com Bubble. As ferramentas de programação visual do Bubble tornam possíveis para qualquer um criar seu próprio software poderoso sem ter que tocar numa única linha de código. Os usuários do Bubble de todo o mundo estão criando suas próprias lojas virtuais sem programar, diretórios, e até mesmo redes sociais.

Ao longo deste post, vamos descobrir o processo por trás de criar um aplicativo de e-commerce como o Shopify gratuito usando o Bubble. Se você está procurando replicar a plataforma de e-commerce completa, ou apenas tem interesse em utilizar alguns dos recursos principais do site, este guia vai compartilhar como começar a criar seus workflows.

Os passos para criar um site de e-commerce tipo Shopify gratuito sem precisar programar incluem:

Fazer cadastro gratuito no Bubble

Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Então podemos começar a criar seu site de e-commerce com o Bubble.

💻 Crie já sua conta gratuita no Bubble, a plataforma que uso para criar Aplicações Web sem programar

Podemos escolher começar criando o protótipo para o design do site, ou os campos necessários dentro do banco de dados.

Aqui iniciaremos usando a ferramenta de design visual do Bubble para moldar a interface de usuário da nossa plataforma. Se você está criando uma loja virtual tipo Shopify, algumas das páginas principais que precisará incluir são:

  • Criar loja: Uma página para criar uma nova loja
  • Criar produto: Usado para criar produtos dentro de uma loja
  • Página da loja: Usado para hospedar cada loja e uma lista dos produtos da loja
  • Página do produto: Uma página para exibir os detalhes completos de um produto individual
  • Checkout: Usado para revisar pedidos e processar pagamentos
  • Painel de controle: Um portal de administração para gerenciamento de pedidos
  • Página de pedido: Usado para exibir os detalhes completos de um pedido individual
Criar site de e-commerce Shopify - design interface do usuário

Configurando o banco de dados

Depois de mapear a exibição do seu site, você pode focar em criar os campos de dados necessários para alimentar sua aplicação. Vamos depender desses campos para conectar os workflows por trás da plataforma.

O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos únicos. Quando estiver criando sua plataforma de e-commerce como o Shopify de MVP, precisaremos criar os seguintes tipos de dados e campos:

Tipo de dado: Usuário

Campos:

  • Nome – texto
  • Itens no carrinho – Lista de produtos. Nota: A criação de um campo como uma lista, baseado em um tipo de dados separado, permite a integração perfeita de todos os campos de dados relevantes.
  • Produtos comprados – Lista de produtos
  • Loja própria – Loja
Criar site de e-commerce Shopify - tipos de dados e campos

Tipo de dado: Loja

Campos:

  • Nome – texto
  • Logo – imagem
  • Descrição – texto
Criar site de e-commerce Shopify - tipos de dados e campos

Tipo de dado: Produto

Campos:

  • Nome – texto
  • Preço – número
  • Imagem – imagem
  • Descrição – texto
  • Loja original – loja
Criar site de e-commerce Shopify - tipos de dados e campos

Tipo de dado: Pedido

Campos:

  • Cliente – usuário
  • Endereço de entrega – endereço geográfico
  • Loja – loja
  • Produtos comprados – Lista de produtos
  • Status de pedido enviado – sim / não com ‘não’ como padrão
Criar site de e-commerce Shopify - tipos de dados e campos

Crie seus workflows

Agora que você estruturou tanto o design quanto o banco de dados, é hora de começar a juntar tudo e deixar seu site funcional.

No Bubble, a principal maneira de fazer isso é com workflows. Cada workflow acontece quando ocorre um evento (ex: o usuário clica em um botão), e então executa uma série de “ações” como resposta (ex: “cadastre o usuário”, “altere um item no banco de dados”, etc.)

Criar uma nova loja virtual em nosso site de e-commerce

O primeiro recurso que precisamos é uma experiência de integração para que os usuários criem sua própria loja.

Começaremos adicionando uma combinação de elementos de Input na nossa página criar loja. Esses elementos vão incluir inputs padrões de texto, um carregador de imagens, e um botão.

Criando uma nova loja virtual sem programar

Em seguida, criaremos nosso primeiro workflow usando o editor do Bubble. Este workflow será acionado quando o botão criar loja é clicado.

Ao criar esse workflow, vamos optar por criar um item no banco de dados.

Criando uma nova loja virtual sem programar

O item que queremos criar é uma nova loja.

Ao criar uma loja dentro do nosso banco de dados, precisaremos combinar os elementos de input on-page com os campos de dados correspondentes.

Criando uma nova loja virtual sem programar

Após criar uma loja, vamos precisar adicionar este item em um campo de dados lojas próprias do usuário. Isso vai reconhecer os usuários atuais como administradores da loja.

Para alcançar isso, vamos criar outro evento dentro do nosso workflow, mas dessa vez, estaremos alterando um item no banco de dados.

Using Bubble’s no-code editor to make changes to a thing

O item que queremos alterar é o usuário atual (Current User), adicionando a nova loja criada às suas lojas criadas (created stores).

Adding a user as a Shopify store owner in Bubble’s no-code editor

Após este evento, iremos direcionar nossos usuários para o próximo estágio do workflow de integração – permitindo-os criar novos produtos para sua loja.

Incluindo um evento navegacional no nosso workflow, vamos direcionar o usuário para nossa página criar produto.

Creating a page navigation event using Bubble’s no-code editor

Ao enviar o usuário para essa página, também passaremos pelos dados da nova loja que acabamos de criar.

Sending data between pages in Bubble’s no-code editor

Adicionando um produto na loja

Para enviar os dados de uma nova loja através da nossa página de criar produto, também iremos configurar o tipo de página como loja (Store).

Criando loja virtual Shopify sem programar - Adicionando produtos

Em seguida, você pode começar incorporando um matriz de elementos de input para criar o produto.

De novo, vamos criar um novo workflow quando o botão criar produto é clicado.

Criando loja virtual Shopify sem programar - Adicionando produtos

Esse workflow vai seguir a mesma estrutura daquele que usamos para criar uma loja nova, mas dessa vez, estaremos criando um produto novo.

Dentro desse workflow, vamos linkar o produto novo à loja da página atual.

Criando loja virtual Shopify sem programar - Adicionando produtos

Após um novo produto ser adicionado, também precisaremos incluir uma etapa adicional no nosso workflow – restando os valores dos elementos de input on-page. Isso permitirá que o dono da loja adicione múltiplos produtos sem sair da página.

Resetting Bubble’s no-code input elements

Uma vez que o dono da loja terminou de adicionar todos os produtos em uma loja, criaremos um workflow que os permite ver a nova loja.

Esse workflow será acionado quando o botão visitar loja é clicado (Button Visit store).

Triggering a no-code workflow to visit a Shopify store page

Ao criar esse workflow, usaremos um evento de navegação para direcionar o usuário para nossa página da loja, enviando com eles os dados das página das lojas atuais.

Sending a user to a Shopify store page in Bubble’s no-code editor

Exibindo conteúdo dinâmico na página da loja

Após o dono da loja criar um catálogo de produtos para o site de e-commerce, podemos começar a exibi-los em uma loja pública que os usuários possam acessar.

Ao criar nossa página da loja, iremos novamente começar configurando o tipo de dados como loja.

Criar site e-commerce Shopify - conteúdo dinâmico

Agora podemos começar estruturando o conteúdo dinâmico que será exibido na página da loja.

Criar site e-commerce Shopify - conteúdo dinâmico

Na nossa página da loja, também precisamos exibir uma lista dos produtos que foram criados. Isso pode ser feito o elemento grupo repetidor do Bubble.

Para começar a exibir dados em um grupo repetidor, você precisa primeiro linkar o elemento a um tipo de dados dentro do banco de dados. Isso ajudará a identificar qual conteúdo será mostrado.

O tipo de dado do grupo repetidor precisa ser configurado como uma lista de produtos.

Então teremos que selecionar uma fonte de dados para este elemento, permitindo-o saber qual produto específico será exibido. A fonte de dados vai realizar uma pesquisa por todos os produtos no banco de dados onde a loja original equivale a loja da página atual.

Criar site e-commerce Shopify - conteúdo dinâmico

Depois que o grupo repetidor foi configurado, você poderá adicionar o conteúdo dinâmico que será exibido dentro de cada linha.

Simplesmente mapeie a primeira coluna com o conteúdo relevante que você gostaria de mostrar, e o grupo repetidor vai preencher as colunas restantes com base nos seus dados existentes.

Criar site e-commerce Shopify - conteúdo dinâmico

Embora nosso grupo repetidor mostre uma visão geral de cada produto, vamos ter que criar uma página dedicada ao produto para mostrar todos os detalhes do produto individual quando é selecionado.

Para direcionar o usuário à nossa página do produto, criaremos um workflow quando o botão ver produto é clicado.

Criar site e-commerce Shopify - conteúdo dinâmico

Mais uma vez, usaremos um evento de navegação para direcionar o usuário, dessa vez enviando os dados do produto da célula atual (Current cell’s Product).

Criar site e-commerce Shopify - conteúdo dinâmico

Adicionando um item no carrinho do usuário

Seguindo o processo das páginas anteriores, primeiro precisamos começar a configurar nosso tipo de página – mas dessa vez, será definido como produto.

Displaying dynamic content on a Shopify product page

Após exibir os elementos de conteúdo dinâmico na página, criaremos um novo workflow quando o botão adicionar ao carrinho é clicado.

Nesse workflow, precisamos alterar um item no banco de dados.

Using Bubble’s editor to make changes to a no-code database

O item que iremos alterar é o usuário atual, colocando o produto das páginas atuais na lista de itens no carrinho.

Bubble Shopify clone app adding an item to a users cart

Uma vez que o usuário terminou de colocar produtos no carrinho, vamos então criar outro workflow que os direciona à página de checkout.

Bubble no-code tool creating a new workflow

Enquanto o usuário compra produtos que são hospedados na mesma loja, também enviaremos através  dos dados da loja dos produtos.

Sending a user to a Shopify clone app checkout

Enquanto enviamos dados de uma loja específica, também precisaremos configurar o tipo da página de checkout como sendo loja.

Configuring the page type of a no-code Shopify checkout

Em seguida, você pode adicionar um grupo repetidor que mostra uma lista de todos os produtos dentro do campo de dados ‘adicionado ao carrinho do usuário atual’.

Using Bubble’s no-code repeating group to display a list of Shopify products

Abaixo dessa lista, você vai então exibir o preço total dos itens coletivamente no carrinho. O Bubble vai calcular automaticamente com base nos seus campos de dados existentes.

Shopify clone app checkout total price

Processando pagamentos

Após criarmos nossa experiência de checkout, precisamos criar um recurso que processa pagamentos para novos pedidos.

Usando o Bubble, é possível aproveitar o poder de vários plugins para aceitar pagamentos facilmente.

Neste guia, usaremos o plugin Stripe.js para processar pagamentos com cartão de crédito através do Stripe.

Nota: Após instalar esse plugin, você vai precisar configurar suas chaves de API primeiro dentro das configurações do plugin.

Para criar uma experiência de pagamento intuitiva, vamos começar adicionando um elemento popup à nossa página. Popups permitem exibir conteúdos novos sem enviar um usuário para longe da página atual.

Ao criar este popup, mapearemos um formulário de pagamento onde o usuário pode adicionar os detalhes de pagamento.

Bubble Shopify clone app payment form

Também será necessário incluir um token Stripe próximo ao formulário de pagamento. Esse elemento não será visível para os usuários finais, mas é essencial para gerar uma nova transação no Stripe.

Quando o botão de comprar é clicado, criamos um novo workflow que aciona um pagamento no Stripe para completar este processo de checkout.

Dentro desse workflow, começamos selecionando o evento que ‘converte o cartão em Stripetoken A’. Dentro desse evento, é preciso combinar os campos de input do popup à estrutura de pagamento do Stripe.

Processing a payment in Bubble’s Shopify clone app

Processando o token da conta bancária do usuário

Com o cartão convertido em token Stripe, criaremos um workflow adicional que processa esse token automaticamente da conta bancária do usuário.

Usando o evento ‘Stripe.js – charge – create’, verificamos o token Stripe, assim como a quantia final a ser paga (incluindo a moeda).

Charging a Stripe payment using Bubble’s no-code toolset

Quando o pagamento for processado, criaremos um novo pedido dentro do banco de dados, armazenando os detalhes da página atual.

Incluindo passos adicionais neste workflow, vamos optar por criar um novo item no banco de dados – um novo pedido.

Dentro deste evento, registraremos quem é o cliente, qual o endereço, uma lista dos produtos comprados, e a loja da qual os produtos foram comprados.

Creating a product order in a Shopify clone app

Após esse evento, precisamos criar outro passo do workflow – desta vez alterando um item no banco de dados.

O item que queremos mudar é a lista de produtos comprados do usuário atual, adicionando a ela os produtos do nosso novo pedido.

Adding a no-code Shopify product to a users purchase history

Após adicionar esses produtos a uma lista comprada, temos que remover os itens do carrinho do usuário.

Removing a Shopify product item from a users add to cart list

Uma vez completos os workflows para processar um pagamento, precisaremos voltar para nossa página e criar um evento para exibir nosso popup de pagamento.

Quando o botão de confirmar pedido é clicado, acionaremos um novo workflow.

Creating a Bubble workflow to confirm a no-code Shopify order

Nesse workflow, selecionaremos mostrar um elemento (Show).

Showing a no-code element in Bubble’s visual editor

É claro,o elemento que queremos mostrar é nosso popup.

Using Bubble’s visual workflow editor to display a payment form

Criar um painel de controle para rastrear pedidos

Uma vez que um cliente fez um pedido, precisaremos criar um painel de controle para que os donos de lojas rastreiem e atualizem o status desses pedidos.

Na nossa página do painel de controle, começaremos adicionando um elemento grupo repetidor.

O tipo de dados desse elemento precisa ser configurado como pedidos, e a fonte de dados vai procurar por todos os pedidos onde a loja comprada = a loja pertencente aos usuários atuais.

Creating a no-code Shopify admin dashboard

Também podemos adicionar uma restrição ao grupo repetidor, exibindo apenas pedidos onde o status de envio é rotulado como ‘não’. Por padrão, todos os pedidos novos vão incluir esse status até que sejam modificados.

A fim de ver os detalhes completos de um pedido e atualizar seu status, criaremos um workflow que envia o dono da loja para uma página de pedido individual quando o botão ver pedido é clicado.

Triggering a Bubble workflow to view a Shopify order

Esse workflow usará um evento de navegação, enviando com ele dados do pedido das células atuais.

Sending data between Shopify order pages

Atualizando o status de um pedido

Na nossa página de pedidos, primeiro precisaremos configurar o tipo da página como pedido.

Criar site e-commerce Shopify - Atualizando e finalizando pedido

Depois, adicionaremos um grupo repetidor para exibir todos os itens dentro do pedido da página atual.

Criar site e-commerce Shopify - Atualizando e finalizando pedido

O último recurso que vamos colocar é um workflow para atualizar o status de um pedido.

Com o pedido recolhido e enviado, o dono da loja pode clicar no botão marcar como completo, acionando um workflow.

Criar site e-commerce Shopify - Atualizando e finalizando pedido

Esse workflow fará alterações em um item – atualizando o status de envio dos pedidos da página atual como ‘sim’.

Criar site e-commerce Shopify - Atualizando e finalizando pedido

Criar recursos adicionais para um site de e-commerce

Você aprendeu neste artigo como criar campos de dados customizados e exibir conteúdo dinâmico. Agora pode começar a criar novas experiências em seu site de e-commerce tipo Shopify.

Adicionalmente você pode:

ATENÇÃO: Este é um tutorial traduzido para Português a partir do original em Inglês. O Bubble possui dezenas de tutoriais ensinando a criar aplicativos de forma 100% visual, sem precisar programar.

Acesse aqui todos os tutoriais: https://bubble.io/how-to-build

Acesse aqui a versão original deste tutorial em inglês: https://bubble.io/blog/build-shopify-clone-no-code/

Tudo que você precisa saber sobre Desenvolvimento Visual de Aplicativos em uma aula Online e 100% Gratuita:

Renato Asse

Renato Asse

Sem Codar é onde empreendedores aprendem a criar aplicativos web e mobile sem programação ou código. Acesse nosso Canal no YouTube para ver os tutoriais e dicas de desenvolvimento.

Posts relacionados

INSCREVA-SE

Cadastre-se gratuitamente para receber dicas, tutoriais e novidades sobre o mundo do desenvolvimento sem código:

COMPARTILHE

Share on facebook
Share on whatsapp
Share on twitter
Share on email

FIQUE POR DENTRO DAS NOVIDADES

Cadastre-se Gratuitamente