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?.
Códigos CSS para o Focus
Ocultar/Remover:
Ocultar as opções de "Criar conta" e "Entrar"
ul.list-unstyled.list-inline.m-none { display: none; } |
Ocultar a newsletter
.js-hide-footer-while-scrolling.container.visible-when-content-ready { display: none; } |
Ocultar o logotipo do Newsletter
#news-popup > div > div > div > div > div:nth-child(1) > div.text-center.m-top-half.m-bottom-half { display: none; } |
Ocultar a opção de "Ordenar Por"
.col-xs-7.col-sm-7.text-right.text-left-xs { display: none; } |
Ocultar o botão de "Adicionar ao carrinho"
input.js-addtocart.js-prod-submit-form.btn.btn-primary.btn-block.m-top.m-bottom.d-inline-block.cart { display: none; } |
Ocultar ícones das redes sociais na página do produto
.social-widgets.text-secondary.text-center.p-top-half.p-bottom-half.m-top { display: none; } |
Ocultar a opção de parcelamento
- Na lista de produtos
.js-max-installments-container { display: none; } |
- Na página do produto
.js-max-installments-container.installments { display: none; } |
Ocultar a etiqueta promocional da página dos produtos
.labels-floating.m-right { display: none; } |
Ocultar a etiqueta de "Sem estoque"
.js-stock-label.label.label-small.label-dark { display: none; } |
Alterar:
Alterar o formato dos ícones das Redes Sociais para redondo
.social-networks a { font-size: 1.8em; border-radius: 50%; width: 50px; height: 50px; } |
Alterar a cor da fonte do menu principal
.desktop-nav-link { color: red; } |
Delete
Alterar o tamanho do texto do menu principal
.desktop-nav-link { font-size: 20px; } |
❗ Se não gostar do tamanho, basta substituir o número 20 por qualquer outro número até chegar no tamanho que deseja.
Delete
Alterar a lenda de "Sem estoque" por outra
.js-stock-label.label.label-small.label-dark:before { visibility: visible; content: "Esgotado"; box-shadow: 0px 3px rgba(0, 0, 0, 0.3); background: #e2e4ed; display: flex; justify-content: center; align-items: center; height: 50px; padding: 5px; margin-bottom: 8px; text-align: center; } .js-stock-label.label.label-small.label-dark { visibility: hidden; } |
Delete