Documentação do template
A baixo esta descrito como instalar esse template e como fazer as devidas configurações:
Template criado baseado numa versão do WordPress, com o Blogger.
VER DEMONSTRAÇÃO
O cálculo do frete é feito pelo PagSeguro e é mostrado automaticamente após a inserção do CEP do comprador, ele poderá optar pelos métodos de envio PAC ou Sedex ( envio mais rápido ).
Este template permite uma forma bastante simples de criação de uma loja virtual , mas não deve ser considerado como uma solução permanente pois o template não conta com:
Sendo assim , não recomendável para venda de grande quantidade de produtos ou caso se atinja um grande volume de vendas.
Seria uma primeira experiência para pessoas que não tem recursos financeiros para contratar alguma firma para criar uma loja virtual com todos os recursos ou pagar hospedagem em servidores, ou mesmo por falta de conhecimento técnico .
Instruções para utilização desse Template
Procure por class="item_thumb" nos modelos de postagem e coloque o link de sua imagem em src="SUA_IMAGEM.JPG"
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.
Existem Três modelos que dependem das características do seu produto :
Obs:
<td class="item_weight">100</td>
No exemplo acima o peso do produto por unidade é de 100 gramas.
Caso queira você pode criar um padrão de postagem para os novos posts já aparecerem com o tipo de produto desejado, depois é só você trocar o título, descrição, opções e peso de acordo com seu novo produto.
Veja como no Vídeo:
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 .
Vá em 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.
Vá em Modelo > Editar HTML > Prosseguir e procure por email: "sougrafica@gmail.com".
Clicando dentro da janela e utilizando as teclas Ctrl+F e digitando no campo de pesquisa a expressão se consegue mais facilmente encontrar o texto.
Onde está "sougrafica@gmail.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.
Como eu já tinha dito, para fazer estas alterações é aconselhável ter um mínimo de conhecimento em CSS, pois podem ocorrer distorções no layout.
https://blogger-profissional.blogspot.com/2020/02/formulario-de-contato-em-pagina-separada-blogger.html
Pesquise no Google Maps o endereço da sua Loja, que deseja exibir no seu site, Clique em compartilhar
Agora abra o Painel do blogger > Layout > Clique em editar "Mapa AQUI" e cole o código que você copiou. Se quiser pode Ajustar a largura no código Subistituindo width e height por width="100%" height="100%"
Esse e outros widgets podem ser encontrado em nossa loja Produto Digital Barato por apenas R$ 1,99 .
As fotos pode ser de qualquer tamanho mais aconselho que sejam todas do mesmo tamanho.
Basta Acessar o Painel do Blogger > Layout > Clique em Editar o Gadget de Slide e adicionar na lista o url da foto do seu slide.
Quando salvar, a foto já estará no seu blogger.
Caso haja alguma dúvida pode deixar nos comentários.
Acompanhe nosso trabalho em:
Vídeo Demonstrativo:
Template criado baseado numa versão do WordPress, com o Blogger.
Aparência do Template:
VER DEMONSTRAÇÃO
Frete
O cálculo do frete é feito pelo PagSeguro e é mostrado automaticamente após a inserção do CEP do comprador, ele poderá optar pelos métodos de envio PAC ou Sedex ( envio mais rápido ).
Considerações preliminares
Este template permite uma forma bastante simples de criação de uma loja virtual , mas não deve ser considerado como uma solução permanente pois o template não conta com:
- Envio automático de e-mails ( tais como : agradecimentos e confirmação de compra)
- Disponibilidade de download automático para pagamentos confirmados de produtos digitais
- Controle de estoque
- Layout responsivo ou flexível,que se ajusta a resolução de tela do comprador.
Sendo assim , não recomendável para venda de grande quantidade de produtos ou caso se atinja um grande volume de vendas.
Seria uma primeira experiência para pessoas que não tem recursos financeiros para contratar alguma firma para criar uma loja virtual com todos os recursos ou pagar hospedagem em servidores, ou mesmo por falta de conhecimento técnico .
Instruções para utilização desse Template
- Ter uma Conta Blogger (Gratuito)
- Ter uma conta no PagSeguro (Gratuito)
- Entender o mínimo de HTML e CSS para ajustar algumas cores.
- para venda de produtos físicos com cálculo de frete por peso é necessário configurar o item frete em sua conta do Pgseguro.
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 dos produtos podem ser de qualquer tamanho mais eu recomendo para se encaixar perfeitamente no template um tamanho de 290 x 300 ( pixels ).
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 do windows ou no código html do blogger.
<img border="0" class="item_thumb" src="SUA_IMAGEM.JPG" />
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 Três modelos que dependem das características do seu produto :
1° - Com Opções e com peso
| <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/AVvXsEgLBANcwHkG5nlpXGgfJKdAWEr98jb5bDlNqPFs8j-PBa4A92BoEHDKntLc239U36LgNA40BZgXBi8XqWfiJeeRBc35AotIYhDI6gnrwz2ETu7Ey29I5zbPOHVg9IWWFpyahkvbBeOsSx0/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.
2° - Sem opções e com Peso
<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/AVvXsEjmvahet-t3toMHxElwsXDgsCm8nhRu1yiadEl0dnLQGQMh3o0CzcGBi6INYIjpHzWr3ZnPv6ddlNtfxrjYRJZOuqeztQU3g1WRuCSis57vRHPlCPpe4DXD_kTpct_pIuIqYaXjD-7-oao/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> |
3° Sem opções e sem peso (Produtos digitais)
| <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/AVvXsEjmvahet-t3toMHxElwsXDgsCm8nhRu1yiadEl0dnLQGQMh3o0CzcGBi6INYIjpHzWr3ZnPv6ddlNtfxrjYRJZOuqeztQU3g1WRuCSis57vRHPlCPpe4DXD_kTpct_pIuIqYaXjD-7-oao/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> |
Caso queira você pode criar um padrão de postagem para os novos posts já aparecerem com o tipo de produto desejado, depois é só você trocar o título, descrição, opções e peso de acordo com seu novo produto.
Veja como no Vídeo:
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
Vá em 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 sua conta PagSeguro
Vá em Modelo > Editar HTML > Prosseguir e procure por email: "sougrafica@gmail.com".
Clicando dentro da janela e utilizando as teclas Ctrl+F e digitando no campo de pesquisa a expressão se consegue mais facilmente encontrar o texto.
Onde está "sougrafica@gmail.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.
Alteração de Fontes e Cores
Como eu já tinha dito, para fazer estas alterações é aconselhável ter um mínimo de conhecimento em CSS, pois podem ocorrer distorções no layout.
Adicionar formulário de Contato Separado
Você pode seguir os passos descritos nesse Post que fizemos no Blogger Profissional.https://blogger-profissional.blogspot.com/2020/02/formulario-de-contato-em-pagina-separada-blogger.html
Edição do Mapa
Editar Slide de Fotos
Esse e outros widgets podem ser encontrado em nossa loja Produto Digital Barato por apenas R$ 1,99 .
As fotos pode ser de qualquer tamanho mais aconselho que sejam todas do mesmo tamanho.
Basta Acessar o Painel do Blogger > Layout > Clique em Editar o Gadget de Slide e adicionar na lista o url da foto do seu slide.
Quando salvar, a foto já estará no seu blogger.
Caso haja alguma dúvida pode deixar nos comentários.
Acompanhe nosso trabalho em:
