como criar um blogger de loja virutal

Neste tutorial, iremos explicar como criar uma loja virtual no Blogger. Você poderá visualizar uma demonstração da loja virtual no seguinte link: Demo da Loja Virtual.

Em primeiro lugar, será necessário criar um blog (caso ainda não o tenha feito).

Em seguida, será necessário aplicar o template “commerce”, capaz de exibir os seus produtos, o botão “comprar” e o carrinho de compras.

Para isso, recomendamos a download do template “Blogger Store“. Extraia todos os arquivos compactados no formato ZIP para uma pasta (poderá usar o programa Winrar, ou Winzip para descompactar os arquivos).

Agora, entre na sua conta Blogger e aceda ao menu Modelo (layout). Clique no botão “Efetuar cópia de segurança / Restaurar” – “Escolher arquivo” – selecione o arquivo “Blogger Store.xml” que extraiu e clique no botão “Carregar”.

Verifique o template foi carregado corretamente.

Personalizar carrinho de compras

Agora será necessário configurar e personalizar o seu template (incluindo traduzir os menus). Em primeiro lugar, aceda ao menu “Modelo” – “Editar HTML” e procure o seguinte bloco de código:

<script type='text/javascript'>

//<![CDATA[

/* SIMPLE CART SETTING

>>>>>>>>>>>>>>>>>>>>>>>>*/

simpleCart.email = 'seu_email@serviço.com';

simpleCart.checkoutTo = PayPal;

simpleCart.currency = EUR;

simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment',  'decrement','Total'];

//]]>

</script>

No parâmetro “simpleCart.email”, adicione o seu email.

Em seguida, defina qual o serviço que irá utilizar para receber os seus pagamentos (PayPal ou Google Checkout), alterando o parâmetro “simpleCart.checkoutTo”.

Por fim, defina a moeda que irá utilizar nos pagamentos, alterando o parâmetro “simpleCart.currency”.

Personalizar o Template

Os menus do template encontram-se em inglês, para os traduzir basta alterar o texto contido dentro do código a href. Por exemplo:

<a href="link.html">texto do menu</a>

Procure o seguinte código dentro do seu template, e proceda às alterações que ache necessárias:

Menu Superior:

<ul id='top-nav'>

<li><a href='#'>Home</a></li>

<li><a href='#'>Category</a>

....

....

<li><a href='#'>About</a></li>

</ul>

Menu suspenso:

<ul class='nav'>

<li><a class='current' href='/'>Home</a></li>

<li><a href='#'>Product Category</a>

....

....

<li><a href='#'>How To Use ?</a></li>

<li><a href='#'>Get it !</a></li>

</ul>

Redes sociais (canto superior direito)

<ul id='top_social'>

<li class='social_facebook'>

<a href='link do seu perfil' tooltip='facebook'>

.....

.....

<a href='#' tooltip='linkedin'><span>linkedin</span></a></li>

</ul>

Publicar produtos

Agora, aceda ao Menu “Definições” – “Mensagens e comentários” – “Modelo de mensagem” – “Adicionar”.

Digite o seguinte código:

<div class="item_image">

<img border="0" class="item_thumb" src="imagem do produto.jpg" />

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

</div>

<div class="item_Description">

Descrição do produto vendido...

</div>

Agora, basta aceder ao Menu “Postagens” – “Mensagem nova”, e adicione toda a informação solicitada (imagem do produto, preço, descrição).

Alternativas:

Se achou este método muito complicado, poderá utilizar o serviço de lojas virtuais Wix. O serviço é muito simples de usar, usa domínio próprio, e não necessita de programação.