Pequenas alterações podem ser realizadas por código CSS nos layouts da Nuvemshop, sendo possível mudar alguns elementos (cor, tamanho da fonte, etc) ou ocultar.
Para inserir esse código de CSS, você deve acessar o seu painel administrador Nuvemshop e seguir pelo caminho "Minha Nuvemshop > Layout > Personalizar seu layout atual > Edição de css avançada" a uma vez dentro, basta incorporar os códigos que apresentaremos nesse tutorial.
Caso tenha alguma dúvida de como usar esse campo, recomendamos consultar o tutorial 👉 Como inserir um código CSS na minha Nuvemshop?.
Success
A Nuvemshop não gera nenhum tipo de código em HTML ou CSS. Se você não possui conhecimento em CSS ou HTML e precisar alterar algum elemento de sua loja, entrar em contato com uns dos 🛠️ Especialistas Nuvemshop para ele poder te ajudar.
Códigos CSS para o Simple
Ocultar/Remover:
Ocultar os ícones das redes sociais das páginas dos produtos.
| .twitter{ display: none;}.google{ display: none;}.facebook{ display: none;}.js-desktop-pinterest-share{ display: none;} |
Ocultar as categorias principais
|
.pill{ display:none; } |
Ocultar a newsletter
|
#container > div.js-main-content.main-content > footer > div.footer > div > div > div:nth-child(3) > div:nth-child(2) { display:none; } |
Ocultar as opções de cadastro e login
Você deve ocultar a opção de cadastro em login tanto para o desktop como para o smartphone. Veja:
Para desktop/notebook 💻
|
/*WEB*/ .user-access { display:none; } |
Para celular/smartphone 📱
|
/*MOBILE*/ .mobile-accounts { display:none; } |
Ocultar as etiquetas de promoções
|
.label-primary{ display:none; } |
Alterar:
Banner informativo: alterar as cores dos ícones
|
.svg-icon-text { fill: #f1f100; } |
❗ Para escolher e obter o código da cor, consultar o tutorial 👉 Cores para usar no seu layout, por código CSS.
Barra de busca: alterar as cores do texto e fundo
Você pode alterar as cores do texto e fundo tanto para o desktop como para o smartphone. Veja:
Para desktop/notebook 💻
|
/*WEB*/ .js-search-input.header-input.form-control.form-control-xs { background-color: #F1F100; color: #ff0000; } |
Para celular/smartphone 📱
|
/*MOBILE*/ .js-search-input.header-input.p-left-half.form-control.form-control-xs { background-color: #F1F100; color: #ff0000; } |
❗ Para escolher e obter o código da cor, consultar o tutorial 👉 Cores para usar no seu layout, por código CSS.
Alterar a cor da barra de navegação
|
.js-desktop-nav.desktop-nav.hidden-phone.font-small{ background-color:#ff0000; } .desktop-nav-item { background-color: #ff0000; } |
❗ Para escolher e obter o código da cor, consultar o tutorial 👉 Cores para usar no seu layout, por código CSS.
Alterar o tamanho do logotipo
Alteração do tamanho para o logotipo deve ser feito tanto para o desktop como para o smartphone. Veja:
Para desktop/notebook 💻
|
.logo-img { height: 400px; } |
Para celular/smartphone 📱
|
.theme-wide .mobile-logo-home .logo-img { max-height: 90px; } |
❗ Para definir o tamanho do logotipo, basta alterar o número identificado com as letras 'px' antes de salvar as alterações. Por exemplo: 90px você pode alterar para 80px.
Alterar as cores do menu de navegação (Ínicio, produtos, contato, etc)
|
a.nav-list-link { color: #ff0000 !important; } |
❗ Para escolher e obter o código da cor, consultar o tutorial 👉 Cores para usar no seu layout, por código CSS.
Alterar a cor do botão de compra rápida
|
.btn.font-small-extra { background-color: #ff0000; color: #000000; } |
❗ Para escolher e obter o código da cor, consultar o tutorial 👉 Cores para usar no seu layout, por código CSS.
Alterar a cor de fundo do rodapé
|
.footer{ background-color: #ff0000; } |
❗ Para escolher e obter o código da cor, consultar o tutorial 👉 Cores para usar no seu layout, por código CSS.
Alterar a cor dos links do rodapé (Menu, Contato, etc)
|
.footer a{ color: #ff0000!important; } |
❗ Para escolher e obter o código da cor, consultar o tutorial 👉 Cores para usar no seu layout, por código CSS.
Alterar as cores dos títulos no rodapé (Navegação, contato, newsletter, etc)
|
.footer-title.font-body.text-uppercase { color: #ff0000; } |
❗ Para escolher e obter o código da cor, consultar o tutorial 👉 Cores para usar no seu layout, por código CSS.
Info
Alguns códigos demandam um conhecimento básico dessa linguagem de programação para funcionarem corretamente (cores, medidas, entre outros). Caso não goste do resultado do código aplicado, basta excluí-lo e salvar as alterações.