Se tiver uma loja virtual incorporada no seu script de HTML e gostaria de lhe aplicar estilos, recomendamos que adicione ao seu espaço web a folha de estilos de CSS. Isso permite-lhe alterar estilos de fonte, cores e outros aspetos.
Pode transferir o ficheiro CSS na sua página de Vitrina na administração da loja virtual. Se já tem um ficheiro CSS, pode escolher os estilos em baixo e adicioná-los ao seu ficheiro existente.
Onde devo colocar o ficheiro CSS?
Recomendamos que coloque o ficheiro CSS na mesma pasta em que se encontra o ficheiro HTML com a sua loja virtual. No ficheiro HTML tem de colocar um link para o ficheiro CSS.
O link para o seu CSS deverá ser feito do seguinte modo:
<link rel="stylesheet" type="text/css" href="shopfront-embed-style.css">
Substitua shopfront-embed-style.css pelo nome do seu ficheiro CSS, se atribuiu um nome diferente. Deverá colocar o link imediatamente após o head-tag, mas antes do fecho /head-tag.
Parâmetros de estilo
Pode alterar os seguintes parâmetros:
- Família de fontes
- Cor da fonte
- Cor de preenchimento
- Menus verticais
- Limites
- Cores de foco
- Etiqueta de promoção
- Loja virtual na versão móvel
Família de fontes
Com a família de fontes pode alterar a fonte principal que é utilizada na sua loja virtual. A primeira fonte é a fonte que será apresentada. As outras fontes são fontes de reserva para o caso de não ser possível obter a primeira.
Exemplo:
font-family: "Times New Roman",Times,serif;
Cor da fonte
Por defeito, a cor da fonte é definida como sendo a mesma para textos, links, indicações do cursor do rato e mais. Se pretender alterar a cor, basta alterar o código HEX.
Se pretender definir uma cor diferente, por exemplo quando posiciona o rato sobre um link, retire o parâmetro da lista e atribua-lhe o seu próprio código de cor HEX.
Exemplo:
.onecom-webshop-main,
.onecomwebshop-main a.link,
.onecomwebshop-main a.link:link,
.onecomwebshop-main a.link:visited,
.onecomwebshop-main a.link:hover,
.onecomwebshop-main a.link:active,
.onecomwebshop-main input,
.onecomwebshop-main select,
.onecomwebshop-main .text-color {
color: #363636;
}
Cor de preenchimento
As cores de preenchimento afetam os fundos dos seus ícones na loja. Mude as cores através das definições abaixo.
Cor dos ícones SVG
A cor de preenchimento será aplicada a ícones SVG na loja virtual, por exemplo, o ícone do carrinho de compras. Pode mudar a cor, alterando o código HEX.
Exemplo:
.onecom-webshop-main .text-color svg {
fill: #363636;
}
Cor de fundo (loja virtual)
Esta definição vai definir a cor de fundo de toda a sua loja virtual. Poderá alterar a cor através da mudança do código HEX.
Exemplo:
.onecom-webshop-main {
background-color: #fdfdfd
}
Menus verticais
O seu seletor de categoria, assim como a ordenação de produtos, são menus verticais.
Cor de fundo (menu vertical)
Isto determina a cor do fundo vertical. Basta alterar o código HEX no código para uma cor da sua preferência.
Exemplo:
.onecomwebshop-main .bg-color {
background-color: #ffffff !important;
}
Cor do contorno (menu vertical)
A cor escolhida aqui irá determinar a cor do seu menu vertical. Basta alterar os códigos HEX e RGBA no código, para as cores da sua preferência.
Exemplo:
.onecomwebshop-main .border-color {
border-color: rgba(0,0,0,0.5) !important;
}
Cor do texto (menu vertical)
Esta definição determina a cor do texto que é utilizado nos menus verticais. Pode alterar a cor alterando o código de cor HEX.
Exemplo:
.onecomwebshop-main .category-text {
color: #000000 !important;
}
Selecione o valor (lista pendente)
Esta definição determina a cor do texto de itens selecionados numa lista pendente. Poderá alterar a cor através da mudança do código de cor HEX.
Exemplo:
.onecom-webshop-main .selected-text {
color: #000000 !important;
}
Cor sensível à passagem do rato (menu vertical)
As duas configurações que se seguem decidem a cor da fonte sensível à Passagem do Rato, assim como a cor de fundo. Basta alterar os códigos HEX e RGBA no código, para as cores da sua preferência.
Exemplo:
.onecomwebshop-main .bg-light-focus:hover {
color: #000 !important;
background-color: rgba(99,170,219,0.5) !important;
}
Limites
Cor do limite do botão Voltar
Estas definições determinam a cor do limite do seu botão voltar, do botão de "regressar à loja" e quando segue para o checkout. Altere o código HEX para a cor da sua preferência.
Exemplo:
.onecomwebshop-main .border-fcolor {
border-color: #363636 !important;
}
Limite usado à volta de outros pormenores
Durante o processo de checkout poderá verificar uma caixa com um resumo dos artigos que estão a ser comprados. Com esta definição pode alterar a cor do limite desta caixa. Basta alterar o código RGBA para uma cor da sua preferência. O texto na caixa é sempre preto.
Exemplo:
.onecomwebshop-main .border-light-font-color {
border-color: rgba(54,54,54,0.5) !important;
}
Limite do cabeçalho
Com esta definição pode alterar a cor do destaque dos cabeçalhos, por exemplo, na página de checkout. Basta alterar o código HEX para uma cor da sua preferência.
.onecomwebshop-main .border-light-color {
border-color: #363636 !important;
}
Limite inferior
Esta definição coloca uma linha abaixo dos itens na página de finalização de compra. Para mudar a cor basta alterar a cor HEX para a pretendida.
Exemplo:
.onecom-webshop-main .product-item {
border-color: rgba(54,54,54,0.2) !important;
}
Cores de foco
As cores de foco são usadas para preços, o ícone do carrinho de compras e controlos deslizantes em dispositivos móveis. Basta alterar o código HEX para uma cor da sua preferência.
Exemplo:
.onecomwebshop-main .focus, .onecomwebshop-main .mobile-slider a {
color: #63aadb !important;
}
.onecomwebshop-main .focus svg{
fill: #63aadb !important;
}
Cores de foco ao sobrepor o cursor
Estas são as mesmas configurações referidas anteriormente, mas para o seu comportamento ao sobrepor o cursor. Altere as cores RGBA para a cor que gostaria que aparecesse ao sobrepor o cursor.
Exemplo:
.onecomwebshop-main .bg-extra-light-focus:hover {
background-color: rgba(99,170,219,0.1) !important;
}
Etiqueta de promoção
Nestas definições, poderá determinar a cor do texto e de fundo da etiqueta de promoção. Poderá adicionar uma etiqueta de promoção para garantir destaque aos seus produtos. Verifique também os nossos guias de como promover os seus produtos.
Exemplo:
.onecom-webshop-main .product-label {
background-color: #63aadb !important;
color: white !important;
}
Loja virtual na versão móvel
Se pretende alterar a aparência da sua loja virtual nos dispositivos móveis, pode adicionar a sua própria meta tag "viewport" à seção head do ficheiro HTML com a sua loja virtual.
Se não detetarmos uma meta tag, adicionaremos automaticamente a seguinte meta tag para uma experiência móvel perfeita:
meta name="viewport" content="width=320, initial-scale=1"
Artigo relacionados:
