Pixel (blog - blogger profissional)

Conversão Hotmart

Google ADS

Este site utiliza cookies

Quer aprender como fiz esse aviso? CLIQUE AQUI

Baixe nossos 3 ebooks

Aprenda a criar anúncios Online nas principais ferramentas de Marketing da Internet ...

3 E-book Grátis

3 E-book Grátis
3 E-book Grátis

Pesquisar

Artigos em Destaque

Grátis

Baixe 3 ebooks
Aprenda a criar anúncios Online nas principais ferramentas de Marketing da Internet ...

Template Loja Blogger PagSeguro - StoreCart v3 - Blogger Profissional

Em 2014 eu ainda estava apenas conhecendo o blogger e sua funções, mais foi nessa época que eu usei a primeira vez uma loja virtual com PagSeguro no blogger.

Então para relembrar essa época e mostrar para você leito que é possível criar uma loja PagSeguro com o blogger veja o Post Completo:

StoreCart v3

Em comparação com a Versão 2 várias modificações foram feitas:
  • Cálculo de Frete
  • Opções para cores
  • Opção para tamanhos
  • Os valores monetários com  nomenclatura brasileira
DEMONSTRAÇÃO

BAIXAR (Google Drive)
Veja a loja que eu criei com esse template depois de ser modificada por mim:

MINHA LOJA COM ESSE TEMA
(Adicionei um Menu mobile e mudei algumas cores)






  • Veja Algumas Fotos do Template



Frete


O frete é Calculado automaticamente pelo Pagseguro após o cliente colocar o CEP de entrega, Tudo automático base no peso do seu produto.

Para ver o Template funcionando Basta Clicar a cima em DEMONSTRAÇÃO ou CLIQUE AQUI

- Só não adicionei o e-mail de pagamento para evitar que pessoas desavisadas acabem comprando algum produto por engano e isso possa me gerar problemas com o Pagseguro.


BENEFÍCIOS


Com esse template você poderá cria uma loja virtual grátis no blogger, mais não deve ser uma decisão permanente pois o cliente não poderá fazer login na loja, você não poderá controlar seu estoque nesse sistema, não tem envio automático de e-mail, Não é responsivo nem Download de produtos Digitais


Seria uma primeira experiência para pessoas que não tem recursos financeiros para contratar algum designpara criar uma loja completa com recursos ilimitados

BAIXE GRATUITAMENTE ESSE TEMPLATE

------------

Pelo fato desse template ser grátis não darei suporte para modificação de cores, formatos, imagens e toda personalização esta por conta de que baixar.


Instruções para utilização do template StoreCart v3


Pré-requisitos  ( ambos gratuitos ) :

  • Conta  Blogger
  • Conta PagSeguro configurada como vendedor e verificada para venda de produtos físicos com cálculo de frete por peso é necessário configurar
  • O item frete em sua conta.


  • O valor de peso dos produtos tem de ser especificados em gramas e o PagSeguro calcula o frete com base em valores declarados ( acréscimo de 10% no valor do frete ) , que é uma garantia de ressarcimento do valor declarado do objeto em caso de extravio, roubo ou dano.



  • Imagens de produtos



As imagens tem tamanho de 290 x 300 ( pixels ).Juntamente com o template encontram-se 2 arquivos modelos para os editores de imagens Adobe Photoshop e GIMP ( gratuito ).
Para inserir suas próprias imagens de produtos faça o upload delas e depois   coloque o link nos modelos utilizando algum editor de texto ( sem formatação ) como o bloco de notas ( windows).

Procure por class="item_thumb" nos modelos de postagem e coloque o link de sua imagem em src="link_de_sua_imagem"

<img border="0" class="item_thumb" src="link_de_sua_imagem" />

 Note que para esta tag img é declarada uma class="item_thumb" ,sem esta class  não aparecerá posteriormente, na área do carrinho, o thumbnail do produto.


  •  Modelos de postagem


Existem vários modelos que dependem das características do produto , se tem opções( cores , tamanhos , etc.) ou não , se são produtos digitais (imagens,templates,programas) .

  • Exemplo de produto com opções

<table border="1" class="produto" style="width: 620px;">
<tbody>
<tr>
<th width="360"><img border="0" class="item_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0MuCIdL20vaJKFmtiH7wBtEAnw1SyH08LWwUo2PWnDDhyphenhyphenL6V15_CZHSU10uM548xocMO9KTZ8qMY2R6-3410IP_0rqrjV0UR0Iem0ByQcFqzTjWK5-ntRgJBjkN21U2x4qfp1dyxelMg/s1600/9.jpg" />
</th>
<td width="440"><span class="adjust_button">
<button class="item_add">
<i class="fa fa-shopping-cart" style="margin: 0 5px 0 0;"></i> Comprar</button>
</span>
</td>
</tr>
<tr><th><b>Nome do Item </b></th><td class="item_name">Colors</td></tr>
<tr><th><b>Preço</b></th>  <td class="item_price">R$9,90</td></tr>
<tr>
<th width="120">Quantidade</th>
<td><input class="item_Quantity" style="width: 40px;" type="text" value="1" /></td>
</tr>
<tr>
   <th width="120">Cor</th>
   <td><select class="item_option1">
   <option value="Branca"> Branca </option>
   <option value="Preta"> Preta </option>
   <option value="Vermelha"> Vermelha </option>
 </select>
  </td>
</tr>
<tr>
   <th width="120">Tamanho</th>
   <td><select class="item_option2">
   <option value="P"> P </option>
   <option value="M"> M </option>
   <option value="G"> G </option>
   <option value="GG"> GG </option>
  </select>
  </td>
</tr>
<tr><th><b>Peso (g)</b></th><td class="item_weight">100</td></tr>
<tr><th><b>Descrição</b></th>  <td class="item_Description">Camiseta em algodão 100%</td> </tr>
<tr><th><b>Quantidade em Estoque</b></th><td>50</td></tr>
<tr><th><b>Informações adicionais</b></th><td>Informações Adicionais</td></tr>
</tbody></table>
    Obs:  - Pode-se definir até 2 opções por produto.

              - O peso tem de ser especificado em gramas dentro da class "item_weight"

                  <td class="item_weight">100</td>
     
                 No exemplo acima o peso do produto por unidade é de 100 gramas.


  • Exemplo de produto sem opções


<table border="1" class="produto" style="width: 690px;"><tbody><tr>  <th width="360"><img border="0" class="item_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOmTYhzBqfpd3hyphenhyphenQF2n0FdU75n0EfRI04EqVwZq1V2Ol-5YtiHGsd-Y5Cc2w7xQp5IdATp5Xw-U6U-SSBRtiy1TYxpIQjk55V4Y-3Bwi08xbLNfl881L5ysUqKQPb4JD8LDNQha_zFWWQ/s1600/computer.jpg"/></th>  <td width="440"><span class="comprar"><button class="item_add"><i class="fa fa-shopping-cart" style="margin:0 5px  0 0;"></i> Comprar</button></span></td></tr><tr><th><b>Nome do Item </b></th>  <td class="item_name">Laptop Dell</td></tr><tr><th><b>Preço</b></th>  <td class="item_price">R$ 1500,00</td></tr><tr><th><b>Peso (g)</b></th>  <td class="item_weight">2000</td></tr><tr><th><b>Descrição</b></th>  <td class="item_Description">Notebook</td> </tr><tr>  <th><b>Quantidade em Estoque</b></th>  <td>Quantidade em Estoque!</td></tr><tr>  <th><b>Informações adicionais</b></th>  <td>Informações Adicionais</td></tr></tbody></table>

  • Exemplo de produto digitais ( sem peso )


<table border="1" class="produto" style="width: 690px;">
<tbody>
<tr>  <th width="360"><div class="separator" style="clear: both; text-align: center;">
<img border="0" class="item_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOmTYhzBqfpd3hyphenhyphenQF2n0FdU75n0EfRI04EqVwZq1V2Ol-5YtiHGsd-Y5Cc2w7xQp5IdATp5Xw-U6U-SSBRtiy1TYxpIQjk55V4Y-3Bwi08xbLNfl881L5ysUqKQPb4JD8LDNQha_zFWWQ/s1600/computer.jpg" /></div>
</th>  <td width="440"><span class="comprar"><button class="item_add"><i class="fa fa-shopping-cart" style="margin: 0 5px 0 0;"></i> Comprar</button></span></td></tr>
<tr>  <th><b>Nome do Item </b></th>  <td class="item_name">Laptop Dell</td></tr>
<tr>  <th><b>Preço</b></th>  <td class="item_price">R$ 1500,00</td> </tr>
<tr><th><b>Descrição</b></th>  <td class="item_Description">Notebook</td> </tr>
<tr>  <th><b>Informações adicionais</b></th>  <td>Informações Adicionais</td></tr>
</tbody></table>

  • Remover ou inserir itens nos modelos de postagem


Cada item ( Nome do item,Preço,quantidade,etc.) ou linha é  "enclausurado" pelas tags <tr> e </tr>.
Supondo que queremos remover o item "Descrição" como identificado na imagem acima.Para  isto é só procurar no modelo de postagem a palavra "Descrição" e identificar as tags mais próximas "tr".Neste caso o código html a ser removido seria :

<tr><th><b>Descrição</b></th><td class="item_Description">Camiseta em algodão 100%</td> </tr>

Seguindo este raciocínio , pode-se adicionar uma nova linha ,caso necessário,seguindo o seguinte código modelo :

<tr><th><b>Novo Item</b></th><td >Descrição Novo Item</td> </tr>

Note que o trecho  class="item_Description" foi retirado do código modelo acima para evitar possíveis conflitos com nomes de class utilizados pelo script que controla o carrinho de compras .

  • Configuração das postagens

Acesse o Painel do Blogger > Layout >  Blog Posts  >Editar .




 Coloque  9 em "Número de postagens na página principal" e desmarque opções como data,local,etc.., seguindo o exemplo como na imagem abaixo :




 Após desmarcar as opções de postagens como na imagem acima,clique em SALVAR.
 Instruções para inserção da conta PagSeguro no template.

Vá em Modelo > Editar HTML >Prosseguir e procure por  email: "seuemail@seuemail.com"  . Clicando dentro da janela e utilizando  as teclas Ctrl+F  e digitando  no campo de pesquisa  a expressão se consegue mais facilmente encontar o texto.

 simpleCart({
  checkout: {
    type: "PagSeguro",
    email: "seuemail@seuemail.com"
   }
 }); 

Onde está  "seuemail@seuemail.com" , coloque o e-mail de sua conta PagSeguro e clique em Salvar modelo.Com isto feito ,o template já está pronto para utilização.


  • Área do menu e carrinho

Procure dentro do código do template o seguinte trecho :

body, .body-fauxcolumn-outer{
 .
 .
 font:x-small Georgia Serif;
.
.
.
}

dentro do seletor ''body, .body-fauxcolumn-outer" se encontra ,entre várias outras, a propriedade font.Originalmente a fonte utilizada é a Georgia Serif.

  • Área dos posts.

Títulos dos posts.
Procure dentro do código do template o seguinte trecho :

.post h3 a {
    font: bold 12px Arial !important;
    margin-top: 10px;
}

Originalmente a fonte utilizada é a Arial.

  • Preços do produtos.


Código a ser procurado :

.simpleCart_shelfItem {
    border-collapse: collapse;
    font: 14px Arial;
}

  • Sidebar.

Títulos de widgets.

Código a ser procurado :

#sidebar-wrapper h2 {
    border-bottom: 1px dashed #d9d9d9;
    font: 16px Arial;
    padding-bottom: 10px;
}

  •  Conteúdo de widgets.


Código a ser procurado :

.widget-content {
    font: 14px Arial;
}

---------------------------------------------------------------------------------------

Este post acaba por aqui, espero ter te ajudado de alguma forma.

Acompanhe nosso Blog e veja as melhores dicas de como criar um Blogger Profissional, como criar gadgets e tudo que eu souber estarei postando para quem quiser saber.

Deixe seu comentário a baixo com seu feedback e idéias para novos conteúdos.
Até a próxima.

4 comentários:

Excelente!!
Parabéns!

Postado em:

Alex Flavio... muito legais seus bloggers... Principalmente o tema lunar... eu nunca tinha visto ele antes.

Postado em:

Top ... Estou utilizando no Meu Blog: https://www.webimpressao.com.br/

Postado em:

kingzekmusic

Postado em:

Postar um comentário

Deixe um comentário com seu Feedback sobre este Conteúdo.