Saiu do blog do UOLHost e aperfeiçoado por nós veja os textos em azul! 🙂

A Loja Virtual do UOL HOST oferece vários templates que ajudam a combinar a comunicação visual da sua loja com a marca da empresa. Com eles você já pode montar rapidamente uma loja sofisticada e atraente.

Mas existem outros recursos que podem ser utilizados para personificar ainda mais o visual da loja. Estes recursos serão descritos passo a passo em uma sequência de artigos que você poderá aplicar para tornar o seu negócio ainda mais atrativo. Basicamente, as técnicas que serão descritas podem se resumir em duas “ferramentas” (linguagens): CSS e JavaScript.

Para começarmos a colocar a mão na massa, o primeiro passo é acessar a área administrativa da loja. Existem duas formas, a primeira é acessar o painel de controle do UOL HOST através do site www.uolhost.com.br e efetuar o acesso através do seu e-mail e senha.

Primeiro passo para efetuar o login

Primeiro passo para efetuar o login

Selecione a opção “Painel de Controle” referente ao seu plano de Loja Virtual:

Segundo passo para efetuar o login

Segundo passo para efetuar o login

No painel técnico da sua Loja Virtual você encontra o login para o acessar a parte administrativa da loja e o botão de acesso (“Administrar Loja”):

Terceiro passo para acessar o login da Loja Virtual

Terceiro passo para acessar o login da Loja Virtual

Nota: se você acabou de contratar a loja, você verá uma tela para a ativação do PagSeguro. Após ativá-lo, ela se parecerá como a de cima.

Ao clicar no botão “Administrar Loja” uma nova página é aberta solicitando o usuário e a senha de acesso à área administrativa da Loja Virtual:

Quarto passo, efetuar o login na Loja Virtual

Quarto passo, efetuar o login na Loja Virtual

A outra forma de acesso é digitar o endereço da sua loja seguido por “/admin” (exemplo: http://www.enderecodaminhaloja.com.br/admin). Você já abre a área administrativa sem precisar passar pelos todos os passos anteriores.

Para iniciar a customização, no painel de controle administrativo da loja passe o mouse sobre o menu “Sistema” e clique em “Configuração da Loja”. Em seguida clique no menu lateral “Design” conforme a figura a seguir:

Área administrativa da loja

Área administrativa da loja

Observe na tela de configuração da opção Design o subtítulo Rodapé. Essa área possui o campo “HTML Diversos” que será o elemento muito utilizado para inserir os códigos de CSS e JavaScript a serem descritos nos próximos artigos. Todas as informações deste campo são automaticamente inseridas no final de todas as páginas da loja. Caso queira fazer um teste, insira um texto no campo “HTML Diversos” e clique em “Salvar Config”. Em seguida acesse qualquer página da loja (exceto a área administrativa) e observe no final da página o texto que colocou no campo “HTML Diversos”.

O detalhe que queremos ressaltar é que agora existe um outro campo chamado “Scripts Diversos” na Sessão “Cabeçalho HTML” nesta área é o local onde deve ser inserido qualquer código CSS, dessa forma a loja não sofrerá o efeito de carregar duas vezes. A primeira com layout antigo e a segunda com as modificações.

A Loja do UOLHost esta em constante melhoria o que permite a nós desenvolvedores aperfeiçoarmos cada vez mais nosso trabalho. Fique ligado nas novidades! Veja o novo campo abaixo: 🙂

Área administrativa da loja

Nos próximos artigos vamos inserir diversos códigos neste campo e ver o resultado de cada um.

Abraços
PerasiDeias