Início
> Blogger Profissional
> curso blogger
> curso blogspot
> curso de blogger
> Loja pagseguro blogger
> loja virtual
> Pagseguro no blogger
> StoreCart v3
> template blogger pagseguro
> Templates
> templates blogger
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
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;">Obs: - Pode-se definir até 2 opções por produto.
<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>
- 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!
Alex Flavio... muito legais seus bloggers... Principalmente o tema lunar... eu nunca tinha visto ele antes.
Top ... Estou utilizando no Meu Blog: https://www.webimpressao.com.br/
kingzekmusic
Postar um comentário
Deixe um comentário com seu Feedback sobre este Conteúdo.