Como criar uma loja virtual de artesanato tipo Etsy sem precisar programar

Aprenda como criar uma loja virtual de artesanato sem código, usando o editor visual web do Bubble.

Você gosta de artesanato? Que tal um software feito por você mesmo?

Ao longo dessa postagem, vamos descobrir o processo de usar o Bubble para criar sua própria versão ‘white-label’ de uma loja virtual de artesanato tipo o Etsy grátis.

Esteja você procurando criar uma loja virtual de artesanato dedicada ou apenas interessado em utilizar alguns dos principais recursos do Etsy, este guia compartilhará como começar a criar a lógica subjacente para seu MVP sem precisar programar.

Portanto, ao longo deste guia iremos destacar como criar os seguintes recursos principais do Etsy:

• Listagem de produtos – Permitindo que os usuários façam upload e vendam produtos
• Exibindo listas dinâmicas de produtos na página inicial
• Criação de páginas de produtos dinâmicas para cada item individual
• Uma experiência de checkout para facilitar transações

As etapas para criar uma loja virtual de artesanato tipo Etsy sem nenhum código incluem:

Faça seu cadastro gratuito no Bubble.

Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito, então você pode acompanhar enquanto criamos nossa loja virtual juntos.

Assim, ao iniciar seu projeto, você pode escolher começar criando um protótipo para o design do produto ou criando os campos necessários em seu banco de dados.

Neste caso, começaremos usando a ferramenta de design visual do Bubble para moldar a interface de usuário da nossa loja de artesanato. Dessa forma, se você está replicando uma versão do Etsy, algumas das páginas principais que você deseja incluir são:

• Uma página inicial – Apresentando listas de produtos
• Página de upload de produtos – Um portal onde os usuários podem fazer upload de produtos que desejam vender
• Perfis de usuários
• Uma página de produto individual – Exibindo os detalhes completos de um produto selecionado
• Uma página de checkout – Incluindo uma lista de produtos no carrinho de um usuário

Além disso, um recurso importante no Bubble é a capacidade de enviar dados entre as páginas. Isso permite que você crie uma versão genérica de uma página e, em seguida, exiba dinamicamente o conteúdo relevante de seu banco de dados quando for necessário.

Assim, no caso da sua loja virtual tipo Etsy, você só precisará criar uma página para hospedar seus produtos individuais. Podemos então criar a lógica necessária para exibir apenas o produto relevante em cada página quando for necessário (abordaremos isso com mais detalhes em breve).

Configurando o banco de dados do seu Etsy no code

A exibição do produto foi mapeada, então podemos nos concentrar na criação dos campos de dados necessários para alimentar sua aplicação. Assim, contaremos com esses campos para conectar os workflows por trás da sua loja virtual.

O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos únicos. Dessa forma ao criar com o Etsy como MVP, precisaremos criar os seguintes tipos de dados e campos:

Tipo de dados: Produtos

Campos:

• Nome do produto
• Descrição
• Imagem do produto
• Preço
• Categoria – permitindo várias entradas
• Disponibilidade de estoque

Tipo de dados: Usuário

Campos:

• Produtos listados – Nota: Criando um campo baseado em lista em um tipo de dados separado permite que você integre perfeitamente todos os seus campos de dados relevantes sem ter que criar valores de campo adicionais.
• Produtos comprados
• Endereço
• Produtos adicionados ao carrinho

Workflows necessários para criar uma loja virtual de artesanato

Portanto, agora que você estruturou o design e o banco de dados para sua loja, é hora de começar a montar tudo – tornando sua plataforma funcional.

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

Listando um produto à venda

Além disso, um dos principais recursos do Etsy é a capacidade dos usuários de listar seus produtos à venda na loja.

Portanto na página de upload do produto, você pode começar a criar esse processo usando uma combinação de inputs, incluindo: campos de texto livre, uploaders de imagens ou campos de seleção múltipla.

Depois que um usuário tiver adicionado seus detalhes relevantes em cada entrada, eles clicarão no botão enviar para criar uma nova entrada em seu banco de dados. Assim, este clique de botão será a ação necessária para acionar seu workflow.

Além disso, usando o editor de workflow, você pode optar por criar um novo item em seu banco de dados. Neste caso, estaremos criando um novo produto.

Você precisará então começar a adicionar dados aos campos relevantes em seu banco de dados. Portanto mapeie cada input que deseja criar em relação ao campo de dados correspondente.

Exiba uma lista de conteúdo dinâmico na sua página inicial

Depois de começar a enviar produtos para a loja, você estará pronto para exibir cada item em um feed na página inicial. Isso pode ser obtido utilizando nosso elemento de grupo repetidor.

Grupos repetidores se integram ao seu banco de dados para exibir e atualizar uma lista de conteúdo dinâmico.

No entanto ao usar um grupo repetidor, você precisará primeiro vincular o elemento a um tipo de dados em seu banco de dados. Nesse caso, você classificará o tipo como um produto.

Além disso, você também precisará definir a fonte de dados como uma lista de todos os produtos submetidos em seu banco de dados. Portanto se desejar segmentar cada repetição por uma categoria relevante, você pode adicionar uma restrição adicional à sua fonte de dados.

Dessa forma você está pronto para começar a estruturar o conteúdo dinâmico que será exibido nesta grade. Simplesmente mapeie a primeira coluna com o conteúdo relevante que você gostaria de mostrar, então o grupo repetidor preencherá as colunas restantes com base em seus dados existentes.

Criando eventos no grupo repetidor para nosso Etsy no code

Também podemos criar eventos no grupo repetidor dentro de cada coluna individual.

Este recurso se tornará útil ao criar recursos de navegação em sua plataforma. No entanto, como a página inicial da Etsy exibe apenas uma visão geral de cada produto (incluindo seu nome, imagem e preço), você deseja exibir os detalhes completos do produto para cada item único em uma página separada.

Assim, esse conteúdo adicional precisará ser hospedado na página de seu produto individual.

Assim, para ativar esse evento, você precisará começar criando um workflow que redirecione o usuário à página do seu produto quando a imagem do item for clicada.

Ao criar este workflow, use um evento de navegação para enviar um usuário para outra página. Daqui, selecione o tipo da página de destino como a página do produto.

Em seguida, você precisará enviar dados adicionais a esta página para que o editor do Bubble saiba qual produto específico exibir. Os dados que você precisa exibir são os do produto da célula atual.

Exibir conteúdo dinâmico na página de um produto

Quando um usuário é direcionado para uma página de produto específica, você pode facilmente extrair esses dados de evento do seu workflow para exibir o conteúdo relevante.

Primeiramente, antes de criarmos esse workflow, você precisa garantir que o tipo da página corresponda à propriedade de dados que você está enviando por meio da lógica de eventos. Nesse caso, você precisará definir a página do produto como uma propriedade do produto.

Agora você pode começar a adicionar conteúdo dinâmico em seus elementos de página, exibindo as informações do produto que foram enviadas em seu workflow.

Adicionando itens a um carrinho

Quando um usuário decide que está pronto para comprar um produto, ele clica no botão ‘adicionar ao carrinho’, e aciona um novo workflow.

A lógica por trás desse workflow é semelhante à criação de um produto novo, só que desta vez faremos alterações (make changes to thing…) em um campo em seu banco de dados, não criaremos algo novo.

O item que precisamos mudar é o usuário atual, no qual vamos querer adicionar o produto da página atual à sua lista de produtos adicionados ao carrinho.

Guia do Bubble sobre loja virtual para artesanatos tipo Etsy sem código

Criar um checkout para nossa loja de artesanato com o Stripe.js

Um dos recursos exclusivos do Etsy ou de qualquer loja virtual é a capacidade de comprar produtos por meio de um checkout. Assim, usando o Bubble, é possível aproveitar o poder de vários plugins para aceitar pagamentos e processar pedidos com facilidade.

Dessa forma, neste guia, usaremos o plugin Stripe.js processar pagamentos com cartão de crédito por meio do Stripe.

Nota: Depois de integrar este plugin, você precisará primeiro configurar suas chaves de API nas configurações do plug-in.

Assim, ao criar uma página de checkout para sua loja virtual de artesanato; você começará adicionando um grupo repetidor que exibe uma lista de todos os itens atualmente no campo de dados adicionado ao carrinho do usuário.

Criar loja virtual passo-a-passo no Bubble

Abaixo dessa lista, você desejará exibir o preço total dos itens coletivamente em seu carrinho. O Bubble irá calcular isso automaticamente com base em seus campos de dados existentes.

Abaixo desse preço, você pode mapear uma forma de pagamento onde um usuário pode adicionar seus detalhes de pagamento. Você também precisará incluir um elemento de token Stripe próximo ao formulário de pagamento.

Este elemento não será visível para seus usuários finais, mas é essencial para realizar uma nova transação no Stripe.

Quando o botão de compra é clicado, criaremos um novo workflow que aciona um pagamento Stripe.

Assim, você começará selecionando o evento ‘converter cartão em Stripetoken A‘ (convert cart into Stripetoken A). Nesse evento, você precisará configurar seus inputs para corresponder à estrutura de pagamento do Stripe.

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

Usando o evento ‘Stripe.js – charge – create’, você verificará o token Stripe, bem como o valor final a ser pago (incluindo a moeda).

Próximos passos para criar uma loja vrtual de artesanato

Enfim, depois de familiarizar-se com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, você pode começar a ser criativo com as experiências criadas montando sua loja virtual grátis.

Adicionalmente, você pode:

• Adicionar suporte para diferentes estilos e tamanhos aos produtos
• Incluir uma função de pesquisa de produto
• Adicionar avaliações de usuários a cada produto
• Adicionar perfis de usuário
• Permitir que os usuários adicionem produtos a uma lista salva
• Incluir sugestões de produtos recomendados nas páginas de produtos

Quer saber mais sobre o Movimento Sem Codar? Veja também nossos Tutoriais em Vídeo:

• Essa ferramenta gratuita vai acelerar 10x a criação do seu aplicativo Bubble
• Por dentro do aplicativo de um GIGANTE do MARKETING DIGITAL
• Como criar aplicativo de gestão financeira

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.
Acesse aqui a versão original deste tutorial em inglês.