Quando você acessa uma loja virtual o que você espera econtrar? Um produto com várias formas de pagamento, ou um prazo de entrega curto? O que mais você espera que uma loja virtual ofereça? Um design arrojado que permite que você navegue sem aquela poluição visual e que te direcione corretamente para aquilo que você deseja. Se você respondeu que é exatamente isso, PerasiDéias tem o diferencial de trazer para sua empresa seus clientes virtuais.

Neste artigo descrevemos como você pode definir um papel de parede na sua loja virtual, para que tenha  um visual diferenciado do padrão oferecido . Como você pode observar no exemplo a seguir:  http://www.hannoshop.com.br/blog.perasideias.exemplo, esta loja está com uma imagem de fundo personalizada especialmente para este POST. A Hannoshop é mais uma loja virtual do uolhost que a PerasiDeias personalizou.

Para começar é necessário ter a imagem que será definida como fundo. Sugiro primeiramente que o nome da figura que você irá criar não possua espaços, caracteres especiais e nem acentuação. Uma imagem de fundo pode ser definida de duas formas, uma imagem cíclica (imagens que colocadas uma ao lado da outra proporcionam a sensação que é uma imagem infinita Ex.: lojavirtual.perasideias.com.br) ou uma imagem com começo e fim definidos (Ex.: lojavirtual.perasideias.com). Eu estou comentando isso pois, para cada tipo de imagem nós teremos que diferenciar o código, mas não se preocupe pois as duas formas estão descritas logo abaixo.

Com a imagem pronta você precisa subir para o servidor (fazer upload) e para isso siga os passos definidos no POST
Personalização avançada da Loja Virtual – parte II. Com a imagem no servidor e o link em mãos, vamos inserir o código. Para isso sugiro que veja o POST sobre onde e como inserir o código, veja nesse artigo: Personalização avançada da Loja Virtual – parte I.

Como você deve ter lido no POST sobre a personalização avançada da Loja Virtual – parte I, nós devemos inserir nossos códigos apenas no campo “Scripts Diversos”, pois iremos trabalhar apenas com códigos CSS.

Abaixo seguem dois blocos de código CSS. Eles tem o objetivo de tornar transparente todos os blocos da loja exceto o cabeçalho. Uma observação importante é que esse código foi testado 100% com o tema temamoderno_default, caso esteja utilizando outro tema e tenha algum problema em aplicar esse código, deixe um comentário, que iremos responder 🙂

<style>

div.container {
background-color: transparent;
border-right: none;
border-left: none;
}

div.container div.outline-creator div.middle {
background-color: transparent;
}

body {
background-image: url(/media/images/papel_de_parede.jpg) !important;
background-repeat: repeat-y !important;
background-position: left top !important;
background-attachment: fixed;
}

</style>

Observe que os três blocos de códigos estão entre duas TAGs de HTML. Elas são obrigatórias! Além disso veja que existe um trecho de código em negrito (images/papel_de_parede.jpg) isso é exatamente o caminho completo com a pasta onde foi inserida a imagem, substitua e salve a página. Após isso acesse a sua loja e veja o resultado.

Um grande abraço para todos, e qualquer dúvida basta perguntar.
PerasiDeias

PERAS Tecnologia de Resultados Ltda. |

CNPJ: 11.692.681./0001-12