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?.
Importante
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 Trend
Ocultar/Remover:
Remover o efeito escuro dos banners aos passar o mouse por cima
|
.textbanner-image:after { background: none; } |
Ocultar o botão "Mostrar todos os produtos"
|
.text-center.p-left-half.p-right-half.full-width.d-inline-block.m-bottom.m-top { display: none; } |
Ocultar o filtro de variações na página de produtos
|
div#filters-column { display: none; } .body > div.js-main-content.main-content > div:nth-child(3) > div.row.m-top.m-top-none-xs > div.col-sm-2.visible-when-content-ready.hidden-xs > div:nth-child(2) { display: none; } .full-width-container { display: none; } |
Ocultar a opção de "Ordenar Por"
|
.row.category-controls.m-bottom-xs.p-bottom-half-xs { display: none; } |
Ocultar a opção de parcelamento
- Na lista de produtos
|
.installments { display: none; } |
- Na página do produto
|
.js-max-installments.installments.d-inline-block { display: none; } |
- No carrinho de compras
|
.js-installments-cart-total.font-body { display: none; } |
Ocultar a etiqueta de frete grátis
|
.label.label-circle.label-primary-dark.label-overlap{ display:none; } |
Alterar:
Alterar a legenda "Acompanhe sua compra" na página inicial
|
body > div.js-main-content.main-content > div.nav-head > div.js-notification.js-notification-status-page.notification.notification-secondary > div > a:nth-child(1):before { visibility: visible; content: "Acompanhe sua última compra aqui"; margin-left: 322px; font-weight: bold; } body > div.js-main-content.main-content > div.nav-head > div.js-notification.js-notification-status-page.notification.notification-secondary > div > a:nth-child(1) { visibility: hidden; } |
Alterar animação na barra de anúncios
|
.js-adbar.section-advertising { animation: moveText linear 14s -3s forwards infinite; } @Keyframes moveText { from { transform: translateX(100%); } to { transform: translateX(-150%); } } |
Alterar o tamanho do banner rotativo para desktop (Computador/Notebook)
|
@media (min-width: 767px) { img.slide-img { width: 75%; margin-left: 150px; }} |
Alterar a posição do menu principal (centralizar)
|
a.desktop-nav-link { text-align: center!important; } |
Alterar o tamanho (diminuir) das imagens na página do produto
|
img.thumb-image.lazyautosizes.blur-up.ls-is-cached.lazyloaded { width: 5vw!important; } |
Dica
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.