Batendo de novo na mesma tecla, que “é possível sim desenvolver projetos profissionais com o Blogger”, trouxe aqui um template que permite a criação de uma loja virtual, com carrinho de compras, página e galerias de produtos, e tudo isso sem sair do blogspot.

Trata-se do template Blogger Store, veja a demonstração e saiba como usá-lo.

Demo | Download

Publicando um produto

Modelo de Postagem

Depois de instalar o template, vá até as configurações, no painel do Blogger, e na guia Postagens e Comentários, procure por Modelo de postagem, clique em adicionar e cole o código abaixo:
<div class=”item_image”>
<img border=”0″ class=”item_thumb” src=”product_image.jpg” />
<span class=”item_price”>$00.00</span>
</div>
<div class=”item_Description”>
Descriptions…
</div>

Publicar produto

Crie uma nova postagem, e em modo edição de html, cole o código abaixo:
<div class=”item_image”>
<img border=”0″ class=”item_thumb” src=”http://example.com/product_image.jpg” />

<span class=”item_price”>$00.00</span>

</div>

Altere a url da imagem pela do produto desejado, o tamanho recomendado é 140×140.
Substitua o $00.00 pelo preço do seu produto.

Agora cole o código a seguir logo abaixo:
<div class=”item_Description”>
Digite aqui a descrição do produto
</div>

Lembre-se de descrever o produto no código acima.

Visualize a postagem, se estiver tudo certo cilique em publicar.

Como personalizar este template?

Definindo carrinho de compras:

No template em edição, procure pelo código abaixo, e realize as substituições necessárias:

<Script type = ‘text / javascript ” >
//<![ CDATA [
/ * CONFIGURAÇÃO CART SIMPLES
>>>>>>>>>>>>>>>>>>>>>>>>*/
simpleCart.email = ‘[email protected]’ ;
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.cartHeaders = [ ‘name’ , ‘thumb_image’ , ‘Quantity_input’ , ‘incremento’ , ‘diminuir’ , ‘Total’ ];
//]]>
</ Script>

Substituições:

simpleCart.email
Digite seu email

simpleCart.checkoutTo
Escolha entre Paypal e GoogleCheckout, são os métodos de pagamento aplicáveis.

simpleCart.currency
Escolha da moeda (real, dólar, euro…)

Menu do topo

Procure por <ul id=’top-nav’> e altere os # pelos links desejado, e os títulos correspondentes, como Home, About, Contact, que também podem ser alterados, excluídos, adicionar outros, etc.

Menu DropDown

Procure por <ul class=’nav’>
<li><a class=’current’ href=’/’>Home</a></li>

e faça as modificações desejadas (links e texto) no código que se segue.

Menu Social

Procure pelo código abaixo
<ul id=’top_social’>
<li class=’social_facebook’>
<a href=’#’ tooltip=’facebook’><span>facebook</span></a></li>
<li class=’social_twitter’>
<a href=’#’ tooltip=’twitter’><span>twitter</span></a></li>
<li class=’social_linkedin’>
<a href=’#’ tooltip=’linkedin’><span>linkedin</span></a></li>
<li class=’social_rss’>
<a href=’#’ tooltip=’linkedin’><span>linkedin</span></a></li>
</ul>

e altere os # pelos links de seus perfis nas redes sociais

O esquema de cores do layout pode ser realizado pelo Design Modelo do Blogger

Considerações finais

O template Blogger Store é excelente para quem quer criar uma loja virtual, vender infoprodutos, revender, ou até criar uma loja virtual com produtos vindos de programas de afiliados, pode ser lucrativo, não? Abraços, e espero que alcance o sucesso esperado com sua loja.

Neemias Martins

Estudante de Iniciação Científica em Matemática, músico tecladista, e blogueiro que tem se dedicado à partilhar seus conhecimentos. Gosta muito de tecnologia e design. Você me encontra também no...

Participe da conversa

51 Comentários

Comentários

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

    1. E TAMBÉM NÃO EXPLICA COMO COLOCAR OS SLIDES DAS FOTOS DOS PRODUTOS QUE FICAM PASSANDO…SE PUDER ME EXPLICAR AGRADEÇO DESDE JÁ…

  1. Sou artesã e tenho interesse em fazer uma loja no meu blog, só que estou tendo dificuldades pois preciso saber como faço pra incluir cálculo de frete na loja.Já tenho o moip, lá tem como fazer carrinho de compras mas não tem como fazer cálculo de frete. Tem alguma forma de fazer isso no blog?

  2. Neemias Martins,
    Peço permissão para postar esta dica para ajudar seus leitores.

    No meu blog tem um código para loja virtual para blogger com as seguintes características :

    – Opções de pagamentos com paypal e pagseguro.

    – Moeda em real.

    – Comentários usando facebook

    – Compartilhamento nas redes sociais

    – Slide (apresentação dos produtos)

    Link para o código :

    http://templateselojas.blogspot.com.br/2013/03/loja-virtual-gratis-blogger-loja-baby.html

  3. Montei este blog ano passado para vender minhas coisas, mas já não gosto mai s do nome e queria mudar. Achei ótimo post que li agora. Mas como fazer no meu blog? Os códigos parecem ser complicados. Outra coisa, onde vou para saber o link do meu twitter linkedin? Tenho no Tumblr:) vou abrir no Orkut e no Myspace. Tenho perfil e 2 páginas no face. Uma de pinturas especiais onde pretendo montar apostilas ou Ebook para minhas técnicas que desenvolvi e são mais de 70 efeitos. Tenho câncer e não posso mais trabalhar pesado. A outra abri sábado para por os artesanatos com preço já que não posso por no perfil. Vou montar ou álbuns amanhã. Preciso de público e só entrando em todas as redes sociais posso fazer isso. Só que meu linkedin é de dependência química. Acho que não tem muito a ver. Queria sim como compartilhar no Tumblr, Myspace e linkedin do blog de dependência que tenho. Mas os botões são muito complicados de instalar. Não tem como ser automático? O twitter é que me dá o link da postagem pois também não sei como achar. Se me der a dica. Mas por enquanto acho importante o blog vitrine. Tem como montar álbuns tipo: colares, Bauer, MDF, marmorização, outras técnicas? É o menu que preciso com sub categorias. Mas queria assim, simples e instalar. Não tenho pronta entrega, só encomendas. Tenho câncer e o tratamento me impede de gastar para fazer estoque. Para vender os cursos como fazer para ter um download dos arquivos ou vou ter que mandar por email? Contato, como funciona? Veja quantas perguntas tenho para você. Pense no que é mais importante agora. Mudar o template, álbuns, descrição,medidas e cálculo de frete. Também o pagamento. Agradeço uma breve resposta. Vou salvar esta mensagem no marcador para encontrar depois. Abraços. César

  4. Neemias Martins, me ajude ai por favor!!!
    Olá meu amigo,Muito boa tarde!
    Eu instalei,postei,editei… deu tudo certo
    Más o Problema e na hora da compra, o valor so fica em USD (Dólar) ja fiz de tudo más não consigo colocar em BRL (Real), Ja subistituir vairas vezes no editar HTML más não da!
    Se vcs puderem me ajudar eu iria adorar!
    MUITO OBRIGADO PELO POST!

  5. Gente, alguém sabe como fazer controle de estoque?
    Exemplo: tenho apenas 1 produto x e caso alguém compre ele, apareça a mensagem esgotado

  6. Olá!

    Tenho um blogger e nele configurei um Blogger-Store (loja virtual).

    Para inserir um produto, crio uma postagem, mas quando configuro um link de um programa de afiliados, ele nao funciona, ele é ignorado.

    Tem idéia do que possa estar acontecendo?
    Obrigada

  7. ai blz Neemias Martins parabéns pelo tutorial ai mais eu não estou conseguido add os produtos fiz como vc falou ali mais não da certo não, tem como vc fazer uma video aula explicando como faz pra add os produtos desde de ja obrigado

  8. Olá, eu faço tudo certo, publico, mas quando vou testar clicando em comprar: no carrinho de compras aumenta o número de itens mas o preço continua em zero. Tem como arrumar isso?

  9. Neemias Martins, me ajude ai por favor!!!

    Olá meu amigo,Muito boa tarde!
    Eu instalei,postei,editei… deu tudo certo
    Más o Problema e na hora da compra, o valor so fica em USD (Dólar) (http://www.uolsoftwares.com) ja fiz de tudo más não consigo colocar em BRL (Real), J subistituir vairas vezes no editar HTML más não da!
    Se vcs puderem me ajudar eu iria adorar!
    MUITO OBRIGADO PELO POST!

  10. Olá meu amigo,Muito boa tarde!
    Eu instalei,postei,editei… deu tudo certo
    Más o Problema e na hora da compra, o valor so fica em USD (Dólar) (http://www.uolsoftwares.com) ja fiz de tudo más não consigo colocar em BRL (Real), J subistituir vairas vezes no editar HTML más não da!
    Se vcs puderem me ajudar eu iria adorar!
    MUITO OBRIGADO PELO POST!

  11. OLá Neemias bom dia!Seu tutorial é excelente mas este template é muito difícil pra configurá-lo, pois ainda não consegui postar corretamente os meus produtos.Seria possível você fazer uma vídeo tutorial explicando como postar os produtos?Se puder ficarei muito grato.Maurício.

  12. Olá. adorei a postagem. Mas instalei tudo certinho e meu carrinho não mostra os valores, somente a quantidade de itens. Não sei mais o que fazer. Alguém poderia me ajudar?

  13. Muito interessante o post. Indico também outra opção para criar uma loja virtual no Blogger: o Simple Cart, script gratuito. Eu, inclusive, consegui fazer algumas modificações para ele funcionar com o PagSeguro. Veja aqui.