Nesse vídeo eu vou te ensinar a como criar um catálogo online interativo e gratuito pro seu negócio. Então, se você quer de fato criar um catálogo profissional como esse que eu tô te mostrando aqui na minha tela, olha só, gente, que catálogo incrível, ó. Ele tem os preços, tem as características aqui do produto, tem o título do produto, né?
Tem a imagem aqui do produto. E o mais legal é que esse catálogo online, ele vem justamente com esse menu, ó. Quando eu vou clicando aqui no menu, ele simplesmente vai mudando aqui os produtos, os acessórios.
Olha que legal, tá vendo? Então o cliente ele pode estar recebendo isso e visualizando todos os produtos que você trabalha. Vai ser bem interessante esse conteúdo.
Se você quer aprender, fica comigo até o final desse vídeo que eu vou te ensinar todo o passo a passo. Só antes eu peço rapidinho para você se inscrever aqui no meu canal, gente, porque o meu canal tem o objetivo de te ajudar seu negócio a prosperar na internet e dessa forma, quem sabe com esse conteúdo que eu tô te passando, você possa gerar renda extra aí pro seu negócio. E o mais interessante aqui desse catálogo online, olha que legal, ele tem uma sacolinha aqui, ó.
Tá vendo? Se você perceber aqui, ó, tem um subtotal, ó. Se eu quiser, por exemplo, eu já tinha selecionado ali um produto, ó.
Se eu quiser colocar na minha sacola, eu posso colocar, ó. E aparece justamente essa informação, ó. Se eu quiser colocar algum código aqui de cupom de desconto, eu posso fornecer esse cupom de desconto pro meu cliente e ele simplesmente aplica o cupom de desconto, faz o preenchimento, o campo de entrega, a forma de pagamento aqui, olha que legal.
E aí finalizar no WhatsApp. E aí você, como empreendedor, como dono do negócio, vendendo quem sabe esses produtos aqui do catálogo, o cliente já realiza o pagamento ali no WhatsApp para você e você simplesmente faz a entrega pro cliente. Olha que legal, gente.
É praticamente uma loja virtual, mas é claro, o pagamento, a finalização vai ser via WhatsApp e isso vai servir para todos os produtos. Ó, quando eu clico nesse outro produto aqui, ó, olha que legal, tem todas as características do produto. E aqui também tem todas essas características que eu posso ir ir colocando aqui, ó.
E se você perceber, os valores aqui, eles vão sendo somados, ó. Coloquei esse case, essa película, esse carregador e ele vai sendo somado certinho. Aqui eu posso colocar alguma referência aqui para que, no caso, o cliente ele pode colocar alguma referência para que eu, como vendedor desse produto, possa receber essas esses detalhes aqui do cliente.
Aí, simplesmente clica aqui em adicionar. E ele já adicionou aqui a sacola. Olha aqui o valor, ó.
Vou na minha sacola. Todo o produto já tá aqui, ó. Inclusive aquele outro aqui, ó.
Se eu quiser remover algum produto, o cliente quiser remover algum produto, é só ele clicar aqui, ó. O produto foi removido. Tá vendo que legal, gente?
Bem completo. E é isso que eu quero te ensinar nesse tutorial aqui. Agora, olha só, gente, tem duas formas que eu considero é ser importante de você entender.
Você pode, obviamente, hospedar essa estrutura de catálogo online gratuito dentro de uma plataforma que ofereça ali a hospedagem gratuita. Mas eu vou ser bem sincero para você. Se você quer criar uma estrutura profissional onde vários clientes seus vão estar acessando o seu catálogo online, eu recomendo você colocar isso dentro de uma hospedagem, tá?
A hospedagem que eu utilizo aqui no meu canal é a hospedagem da Hostinger e é justamente esse site que eu vou te mostrar agora aqui, ó. Perfeito, gente. Olha, já tô aqui no site da Hostinger só para você entender é como que você precisa fazer para poder contratar sua hospedagem, tá?
Então, se você for fechar essa parceria com algum cliente que você queira vender esse tipo de trabalho, esse tipo de produto, você precisa deixar claro para ele que você sim consegue entregar esse catálogo online de forma profissional, colocando dentro de uma hospedagem profissional. Porque veja, se você, se o cliente ele pega esse catálogo online e ele distribui, por exemplo, para 1000 clientes dele. E se os 1000 clientes clicarem nesse catálogo online dentro de uma hospedagem gratuita, pode chegar no limite.
Por exemplo, a Netlify, que é o que eu vou ensinar aqui para você colocar nela, ela tem um limite ali para poder de acesso. Então esse limite ele pode ser ultrapassado. E aí o catálogo online, esse catálogo aqui, ó, ele vai ficar offline, ele vai ficar, ele vai sumir por conta da quantidade de acesso que teve, tá bom?
Eu tô te dando um exemplo aqui de 1000 acessos, mas pode ser até menos. Então, por isso que eu recomendo você contratar e você convencer o seu cliente a contratar uma hospedagem na Hinger, tá bom? Inclusive, eu vou deixar o link aqui na descrição do vídeo, é só você clicar e fazer a sua contratação.
Para um caso como esse, de catálogo online, eu recomendo você contratar esse plano aqui, ó, o mais popular que é de R$9,99, tá, gente? Então aqui você já vai conseguir colocar aí esse seu catálogo online aí, certo? Então você pode escolher aqui, você consegue colocar, o seu cliente consegue colocar até três sites.
Então vamos imaginar que ele queira o catálogo, ele queira, por exemplo, um site depois, né? Enfim, a a dentro dessa hospedagem ele já vai conseguir fazer todo esse processo. E se é para você esse catálogo online, eu recomendaria a partir do plano premium.
Agora, se você quer uma hospedagem mais robusta, mais profissional ainda, a hospedagem business inclusive é a recomendada. Aqui eu tenho a cloud startup, só que eu tenho outros projetos dentro aqui da minha hospedagem, tá bom? Então eu recomendo você começar a partir do plano premium, tá?
Se você falar: "Não, Daniel, eu prefiro começar numa hospedagem um pouco mais robusta". Então, essa hospedagem business vai te atender perfeitamente. Se você perceber aqui, ó, você consegue colocar até 50 sites dentro dessa hospedagem business, que é a hospedagem recomendada, enquanto na premium você consegue colocar apenas três sites.
Mas vamos imaginar que o seu cliente fala: "Não, eu quero o custo mais acessível aí. " Então esse daqui vai ser mais interessante, tá? Então, coloca aqui escolher plano e aqui você vai definir qual o período que o cliente ele vai querer contratar ou você vai querer contratar.
E eu recomendo para você pegar o excelente preço, pegar o de 48 meses, ou seja, durante 4 anos você vai estar pagando basicamente aí R$9,99 por mês. Mas eu vou te dar o cupom de desconto aqui. Você vai digitar aqui, ó, Daniel Martins, tudo junto, e você vai clicar em aplicar.
Quando você clica em aplicar, olha só, o desconto foi concedido e tava R$9,99 por mês, agora você vai estar pagando R$,99 por mês. Só que aqui, gente, é só para você ter uma ideia de quanto que isso custaria para você por mês, porque no momento do pagamento você vai pagar 431,57 logo no momento ali do pagamento. Você consegue inclusive parcelar em até 12 vezes no cartão, só que você vai pagar de uma vez isso daí, tá?
Vamos imaginar que você parcelou em até 12 vezes. Depois você não vai ter mais cobrança de nenhuma. Depois que você realizou ali o pagamento, a Hinger não vai te cobrar mais nada durante todo esse período de 4 anos.
Sem contar que você vai ganhar um domínio grátis. Aqui tá vendo aqui embaixo, ó. Domínio grátis por um ano mais 3 meses grátis de utilização da hospedagem.
Então, além dos 4 anos que você pagou, você vai est utilizando mais 3 meses. Olha que bacana, totalizando aí 51 meses. Então, o próximo passo aqui, gente, agora vamos direto ao ponto.
Uma vez que você já entendeu como contrata uma hospedagem profissional, então você vai vir aqui, ó. Ah, vamos lá no Gemini, gente. Ó, no Gemini, o que que eu vou fazer?
Eu vou deixar um prompt aí. Esse prompt vai te ajudar a criar algo muito parecido com esse aqui, tá bom? muito parecido.
Eu vou mostrar como que você faz as edições também desse catálogo online. Ah, um detalhe importante, a gente vai utilizar o Gemini para poder criar esse catálogo aqui interativo no Gemini. Já tô aqui no Gemini, como vocês podem ver, vou colocar o Prompt, eu vou deixar o Prompt aqui na descrição do vídeo, tá, gente?
É, ou num link aí, tá gente? Eu não sei como que vai ficar esse prompt dentro da descrição do vídeo. Às vezes não tem espaço suficiente para deixar isso na descrição.
Então eu deixo no link ali no Google Docs. É só você clicar e ali vai abrir o o todo o prompt dentro de um Word ali do Google, tá bom? Então vamos lá.
Vou colocar agora esse prompt. Olha só gente, o prompt tá dizendo o seguinte, ó. Aja como desenvolvedor front endior especialista.
Bem completo, gente, ó. Preciso que você crie um arquivo único ou single page application contendo HTML, CSS, JavaScript ao catálogo digital de eletrônicos premium chamado. Então vamos imaginar que você vai criar pra sua empresa.
Você vai precisar mudar aqui algumas informações. Por exemplo, aqui você pode colocar catálogo digital aí do segmento que você atua chamado. Aí aqui você coloque coloca o nome da sua empresa.
Beleza? Aqui tá dizendo, ó, código deve ser totalmente funcional, responsível, esteticamente premium. Siga estritamente as especificações abaixo.
Então, tem todas as informações. É importante você validar cada informação para ver se faz sentido pro nicho de mercado que você tá atuando. As cores, ó.
Se você quiser colocar as cores que você utiliza dentro do seu negócio aí dentro da paleta de cores da sua empresa, então você pode colocar aqui, ó, as cores que você quer que esse aplicativo, ou melhor, esse catálogo seja gerado para você. Beleza? E aí, o efeito vidro, isso aqui é bem bacana.
eh, elementos cards com design limpo, né? Então, tem muita estrutura aqui que você pode deixar do jeito que tá, mas as cores, olha aqui, a barra de categoria aqui, você pode mudar as as barras de categorias, que é justamente essa daqui, ó. Tá vendo aqui, ó?
Todos. Smartphone, notebooks, áudio, gamer, acessórios. Então, a gente volta para cá e aqui você pode mudar, tá vendo?
Você pode colocar as categorias do seu do seus produtos, tá bom? Então você pode colocar tudo certinho aqui, lista de produtos, cards com imagem de produto, título a partir de, olha que legal, e botão ver detalhes, tá vendo? E aí funcionalidade JavaScript, né?
Então você vai vendo cada detalhe e aqui, ó, que legal, ó. Upell, ó, checkbox para adicionar serviços ou acessórios, garantia estendida de 1 ano, 150. Então tudo, todas essas informações você pode mudar e personalizar de acordo com o seu negócio.
Dito isso, gente, só pra gente ganhar tempo aqui, ó, vamos clicar agora aqui, ó, para poder gerar esse código HTML que a gente quer para poder a gente ver o resultado. Vamos ver o que que vai gerar. É provável que gere algo muito parecido, se não igual, muito parecido com esse daqui, tá bom?
Então, vamos aguardar aqui e eu já volto com você. Perfeito, gente. Olha, olha aqui, ó.
já gerou o código HTML de forma completa. Agora a gente vai ver o resultado que saiu, mas aqui a gente já consegue ter um vislumbre do que que está por dentro aqui desse código, ó. Television, né?
A story. Então, tudo isso aqui você consegue mudar, certo? Então você consegue mudar todas essas informações aqui.
Se você quiser mudar depois de gerado o código, você pode ir mudando. Eu vou mostrar basicamente como que você pode fazer essas alterações. Eu vou copiar esse código aqui, vou minimizar aqui e vou abrir um editor de texto.
Você que trabalha com Windows, pode abrir o bloco de notas e simplesmente copia esse código que eu vou mostrar para você aqui, ó. Legal. Vou clicar aqui novo documento.
Vou vir aqui em formatar. No meu caso, como é MAC, eu preciso formatar isso aqui e converter para texto simples, tá bom? Para limpar toda essa área aqui que eu vou colar.
Eh, esse código HTML, tá bom? E você que trabalha com bloco de notas, é só você copiar aqui dentro do bloco de notas e já vai dar super certo. E aí você vem aqui e salva em uma pasta.
E quando você for salvar, você precisa fazer isso que eu vou fazer agora, ó. index. HTML.
Quando você for subir paraa sua hospedagem, é importante estar dessa forma aqui, tá bom? Eu vou até abrir, gente, eu vou abrir uma outra pasta aqui dentro, porque como eu já tenho um arquivo index. HTML dentro dessa pasta.
Então ele vai pedir para eu sobrepor. Então eu vou fazer o seguinte, eu vou colocar aqui, ó, pasta tutorial, beleza? Vou criar essa outra pasta e eu vou colocar esse índex HTML dentro dessa pasta aqui.
Salvei. Usar HTML. Beleza?
Ó, tá vendo? Quando você for salvar, você tem que sempre clicar ali. Eu acabei passando batido, mas sempre clica usar HTML.
Beleza? Então, depois que eu fiz isso, eu vou vir aqui, ó. Tá vendo aqui, ó?
Pata, que eu cliquei pata. Deixa eu só mudar aqui. Renomear.
É pasta aqui, ó. Pronto, perfeito. Agora eu vou clicar aqui, ó, index.
HTML. E bingo. Gente, se liga só no resultado que gerou aqui pra gente, ó.
Tá vendo? Ó o menu super certinho. Se eu for abrir isso aqui numa, como fala, num celular, vou clicar aqui em inspecionar só pra gente ver como que ficaria, ó.
Olha só, gente, que lindo que ficaria, ó. Tá vendo, ó? Ó o menu aqui, ó, se movimentando.
Toda a estrutura aqui do catálogo, ó. Vou clicar aqui em todos pra gente ver todo o catálogo. Olha aqui, ó.
Que bacana, gente. Inclusive, já trouxe um WhatsApp aqui, ó, que já tava configurado. Tem algumas imagens aqui que não apareceu, mas eu vou mostrar para você como que você faz para fazer aparecer essa imagem, tá?
Mas vamos lá, ó. Aqui tá tudo completo, ó. Tá funcionando o menu.
Legal, né? E pra celular ficou bem bacana. É dessa forma que o cliente vai abrir quando ele visualizar o seu produto, né?
O produto do seu cliente aí através do catálogo online. Ó, vou clicar aqui no mais. Aqui tem as características, tá vendo, ó?
Tudo isso daqui, gente, você consegue preencher para ficar de forma completa, ó. Tá vendo, Ó, tá tudo funcionando. Os preços ali, ó.
Tá vendo, ó? Quando eu adiciono mais um item aqui do catálogo, ó, os valores vão aumentando. Se eu clicar em adicionar, ele já vem aqui a sacola.
Tá vendo, ó? Tá completo isso daqui, ó. Deixa eu fechar agora aqui, ó.
Só pra gente ver ele de forma completa. E aí, ó, tá dessa forma, ó. Aqui no computador se vê assim, mas no no celular você vai ver produto a produto e também com o mesmo visual.
Aqui tem uma lupa aqui também que funciona, né? Deixa eu digitar aqui, ó. Mac, por exemplo, ó, MacBook já trouxe aqui, ó, iPhone.
Ó, iPhone. Olha que legal, já trouxe aqui. Legal, né?
Então, ele traz tudo que tem referência ao que eu digitar aqui. Então, o campo de pesquisa também tá funcionando. E aí, gente, vamos pra parte prática.
Agora eu vou subir esse essa estrutura para uma hospedagem gratuita que é Netlify, tá? Eu tenho um cadastro aqui para fins de teste. Eu vou colocar aqui, eu vou fazer o login rapidinho, ó.
Bem simples, tá? Vou deixar o link na descrição do vídeo para você. Um detalhe, tá, gente?
Eh, você quando você fizer o seu cadastro aqui na Netlify, você tem um limite aqui para utilizar. Se você entrar aqui no use building aqui, ó, por exemplo, eu não usei ainda nada, eu já tinha usado no mês passado, mas aí todo mês ele vai zerando. E aqui você tem 300 créditos aqui.
Esses créditos aqui, gente, eu vou te falar, se usa rapidinho, tá? É muito rápido. Eu vou criar um aqui, você vai ver mais ou menos.
Às vezes ele demora um pouco para atualizar, mas vamos ver se já a gente já vai conseguir ter um um vislumbre de quanto que ele vai cobrar de créditos do que eu vou utilizar agora, tá? Então vou vir aqui em projetos, beleza? Vou clicar agora em browse to upload.
Por quê? Porque eu vou subir aquele meu projeto. Eu vou procurar a minha pasta, ó, tutorial.
Pasta tutorial. Tá vendo, ó? Vou simplesmente clicar aqui em cima dela e vou fazer o upload.
Ou seja, eu tenho que subir toda a pasta aqui para dentro. Ó, ele já tá fazendo aqui. Vamos aguardar.
Beleza. Ó, foi rapidinho, ó. Já fez aqui o upload e aqui já tem um link, ó.
Se eu clicar nesse link, já vai abrir o meu projeto, ó. Se você perceber aqui, ó, tem todo esse nome estranho, mas se você quiser mudar, você pode colocar aqui o nome, ó, catálogo, ó. Colocar aqui catálogo ele [música] eletro.
Vou colocar catálogo eléro de eletrônicos, tá? Vou clicar aqui, ó, atualizar o nome. E aí o nome ele vai ficar mais bonitinho, né?
Vai ficar dessa forma aqui, ó. Vou clicar aqui, ó, finish later. E aqui eu já tenho o nome do meu catálogo.
E já dentro aqui de um domínio gratuito. Vamos ver quanto que consumiu. Não sei se já vai aparecer aqui o nível de consumo, tá gente?
Vamos dar uma olhada aqui pra gente ter a ideia. Vamos ver. Use ainda não atualizou aqui, ó.
Mas logo logo ele vai atualizar para eu ter ideia de quanto que eu já gastei, tá? Mas ele vai gastar já uma quantidade aqui razoável, tá gente? Por isso que qualquer alteração que você for fazer, se você for fazendo, ele vai consumindo rapidinho.
Ah, o seu, aqui, ó, deixa eu fechar aqui. Ele vai consumindo rapidinho o seu, o seu crédito ali de 300 créditos que se tem por mês. E olha só, o problema, como eu falei inicialmente, quando você coloca, vai usando os créditos e quando zera os seus créditos, esse site aqui ele vai sair do ar, não vai funcionar mais durante aquele mês, depois no próximo mês, ele volta.
Então, se o cliente tiver bastante acesso, isso pode comprometer o o seu trabalho, inclusive a confiança que você criou junto ao cliente. Ele vai falar: "Poxa, o meu catálogo tá fora do ar. O que que aconteceu, Daniel?
" E aí você vai ter que explicar tudo isso daí. Por isso que eu recomendo você contratar a Hostinger, que você não vai ter nenhum tipo de problema nesse sentido, tá? Então agora eu vou mostrar para você como que você sobe esse catálogo dentro da Hostinger de uma forma muito rápida, tá bom?
Então vamos lá. Bom, gente, eu já tô aqui na hospedagoser. Esse aqui é o HPNel da Hosinger.
Quando você contrata a Hosinger, você já cai nessa tela aqui que é o HPNel, é a parte onde você vai criar os seus projetos. Então vou clicar aqui em sites, tá vendo? Olha como é simples, tá?
É assim que você vai fazer pro seu cliente ou pro seu negócio. Eu vou clicar aqui em adicionar site. Eu vou clicar aqui, ó, site php html.
E agora você vai clicar aqui, ó. Se você já tiver contratado a hospedagem da Hostinger, você já vai conseguir ter o seu domínio personalizado ou domínio pro seu cliente. Então é só você vincular ao domínio aí do seu cliente.
Então vou clicar aqui, ó, usar domínio temporário. Agora tá iniciando a configuração. Vamos aguardar aqui que é rapidinho.
Beleza? Ó, já caiu nessa tela. Agora o que que eu vou fazer?
Vou entrar aqui, gente. Gerenciador de arquivo. Super simples, tá?
Vamos lá. Vem comigo que você vai compreender a íntegra como que a gente vai fazer esse processo. Ó, tá pensando aqui.
Eu vou entrar nessa pasta aqui, ó. Public HTML. Eu vou deletar esse default PHP.
É importante você deletar esse arquivo. E agora eu vou subir um novo arquivo, gente. Ó, arquivo.
Já tô na pasta aqui, ó. Pasta tutorial. Você vai abrir de novo e você vai subir apenas esse arquivo aqui, ó, index.
html. Vou clicar em abrir. O arquivo já tá aqui.
E agora quando eu entro aqui no meu link, aqui no meu domínio, no caso, esse aqui é o domínio temporário, mas aqui você que contratou a sua hospedagem na Ring, você tem direito a um domínio gratuito. Então aqui vai tá o seu domínio gratuito. Você vai clicar aqui e aí já vai abrir aqui para você.
Tá vendo, ó? Tudo certinho, gente. Olha que bacana.
Ah, Daniel, mas eu preciso fazer algumas atualizações aí, ó. Por exemplo, tem uma imagem aqui que eu preciso mudar, ou melhor, eu quero mudar as imagens. Como que eu faço?
Então, é simples, ó. Tá vendo aqui, Já vamos até usar um exemplo aqui, ó, de uma imagem de um produto que não tá aparecendo, ó, se JBL Pulse 5. Eu vou colocar, gente, uma imagem de um MacBook que eu tenho, não tenho JBL, mas só para você entender como que funciona essa mudança, tá?
Então vamos lá, ó. Eu já tô aqui dentro, é da Hostinger. O que que eu vou fazer?
Eu vou subir uma imagem para cá, que é justamente como se fosse a imagem desse catálogo aqui, tá bom? Que eu vou colocar aqui. Então, primeiro você tem que subir a imagem, ó.
Vou clicar aqui, vou abrir arquivo, eu vou dar uma, vou voltar aqui. Eu vou clicar novamente aqui em tutorial, porque eu vou pegar justamente essa imagem aqui, ó, Macbook, MacBook, né? No caso, eu vou pegar essa imagem só para ilustrar, tá?
E eu vou colocar dentro daquele item lá, daquele produto JBL. Então, tá aqui, certo? O que que você vai precisar fazer?
Você vai precisar pegar o nome desse arquivo, no caso, MacBook. jpeg. Eu vou clicar com o botão direito, eu vou clicar em renomear e apareceu aqui completo.
Eu vou dar um contrl C, certo? Vou fechar. E agora eu vou abrir o meu arquivo.
Tá vendo, ó? Vou clicar aqui nesse arquivo, clica com o botão direito e você vai clicar em editar. E aqui dentro de editar, o que que você vai fazer?
Como o produto que eu quero mudar aqui é esse JBL Pulse 5, então vou digitar aqui, ó. Vou dar primeiro o contrl F e vou digitar aqui, ó, JBL. Olha, legal, já apareceu aqui para mim, ó, JBL Pulse 5.
Tá vendo, Tem a categoria, tudo certinho, ó. Se eu quiser mudar, ah, quero colocar, Daniel, o produto da minha loja. Então, aqui você muda a descrição, coloca o produto da sua loja.
A categoria você pode mudar por meio desse campo, tá vendo que tá áudio? Aqui você pode colocar a categoria que você queira mudar. E aqui no price é o preço.
Então, aqui você vai colocar o preço desse produto que você quer substituir. E aqui, ó, tem toda o a descrição, ó. Você pode mudar toda essa descrição e colocar descrição do seu produto.
E aqui é a imagem do produto, que é a imagem que a gente vai trocar. Ó, essa imagem falhou aqui no no processo. Então eu vou deletar todo esse link aqui da UNSPASH, né?
Vou deletar entre aspas. Você mantém as aspas, tá vendo, ó? Mantive as aspas e só vou colocar o nome daquela imagem que é MacBook.
jpeg. Isso aqui é só para você compreender e todas as outras mudanças você vai fazendo. É só você ir lendo, você vai conseguindo fazer todas as modificações que você necessita.
Ah, Daniel, quero vincular o meu WhatsApp. Aqui é só você identificar o campo de WhatsApp. Ó, vamos colocar aqui, ó, Whats, ó, WhatsApp, certo?
Aí você vai procurando aqui, tá, gente? Não tem muito mistério esse processo. Olha aqui, gente, ó.
Coloquei aqui, ó. Fui apertando enter aqui até achar o WhatsApp, ó. Tá vendo aqui, ó?
Onde tá o a pont? Aqui você vai colocar o seu número de WhatsApp. Beleza?
Você vai tirar esse daqui e você coloca o seu número aqui, tudo seguido assim, sem espaço. E aí, gente, depois que você fez as modificações, você simplesmente vai clicar aqui em salvar, ó. Tá vendo o disquetezinho aqui?
Salvar. Salvou. Aí eu venho aqui, dou enter e vamos ver se mudou.
Olha aqui, ó. Tá vendo o JBL Pulse 5? Ó, mudou a imagem.
Tá vendo a imagem que eu coloquei, ó? Tá tudo aqui certinho, ó. Que bacana, né, gente?
Super simples. Olha aqui a descrição que a gente viu ali embaixo. Você pode mudar a descrição mudando pro seu produto.
E é assim que você sobe, tanto de forma gratuita como de forma paga. Só que eu acabei não mostrando como que você faz a mudança é de forma gratuita da imagem. Já vou mostrar agora aqui rapidinho.
Olha só, gente. Voltei aqui, ó, lá pra pro nosso processo gratuito. Tá vendo que aqui tá sem imagem?
Então aqui também é basicamente a mesma coisa. Deixa eu dar um enter para ver se já atualizou aqui, ó, para ver a quantidade que usou. Já usou 15 de crédito.
Perceba o seguinte, ó. A cada mudança que eu faço, já consome 15 de crédito. Então isso aqui vai consumir rapidinho, gente.
Sem contar que a os acessos que os clientes vão tendo no seu catálogo, isso também vai consumindo os seus créditos. Então toma cuidado, tá? Eu tô te mostrando como ilustração até para você já testar, para poder validar alguns catálogos, fechar com alguns clientes, mas é importante você conversar com o cliente a importância de criar a conta aqui na hospedagem da Hostigger, tá bom?
Depois que eu fiz isso, gente, agora o que que eu vou fazer aqui, ó? Vou voltar aqui paraos meus projetos, certo? Aqui meu catálogo, tá vendo?
Eu vou abrir aqui o meu catálogo. Meu catálogo tá aqui. Agora o que que eu preciso fazer?
Eu preciso voltar lá para aquela pasta que é justamente essa pasta aqui, ó. Eu vou pegar esse essa mesma imagem e vou arrastar. Vou arrastar, não vou copiar ela.
Vou jogar ela aqui para dentro dessa pasta. É importantíssimo você fazer isso. Outro detalhe, é importante você entrar nesse e nesse index.
html e fazer a mudança que a gente vai fazer agora. Eu vou renomear aqui, ó. Ou melhor, vou clicar em renomear só pra gente dar o contrl A e contrtrl C.
Copiar tudo que tá aqui, ó. Agora eu vou entrar nesse código. O código do meu já tá aberto aqui, ó.
Perfeito. Abri aqui dentro. Agora eu vou digitar JBL.
Beleza? apareceu aqui, ó, justamente aquele mesmo produto. Eu vou vir aqui nesse link aqui, tá vendo?
O link daquela imagem que deu erro. Eu vou vir aqui e vou apagar. E agora eu vou colocar esse MacBook.
jpeg, que é o nome daquela imagem. E agora eu vou vir aqui, vou salvar. Uma vez que eu já salvei, vou voltar agora aqui para dentro da Netlify e vou clicar agora aqui, ó, browse to upload.
Vou clicar aqui. Já tem a pasta aqui, né? Vou voltar aqui de novo.
Ou melhor, a pasta já tá aqui, ó. Só vou clicar aqui, ó. Fazer upload.
e ele já vai fazer upload dessa pasta já com essa atualização, tá bom? Porque a gente atualizou o código e colocou a imagem dentro da mesma pasta. Agora, quando eu abro o catálogo, vamos ver aqui o resultado.
Olha aqui, gente. Olha aqui, ó. Tá vendo, ó?
Aconteceu uma mudança simples assim. Mas volto a dizer, se você quer levar profissionalismo pro seu cliente para ele não ter nenhuma dor de cabeça com o número de acesso que ele vai ter nos catálogos, porque geralmente catálogo tem muito acesso. Então eu recomendo você contratar a sua hospedagem na Hosinger.
Eu vou deixar o link aqui na descrição do vídeo. É só você clicar e contratar a sua hospedagem e ou até mesmo a hospedagem pro seu cliente utilizando o meu cupom de desconto. Então esse vídeo vai ficar por aqui.
Um grande abraço e te vejo no próximo conteúdo. Até lá.
