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, entre em contato com uns dos 🛠️ Especialistas Nuvemshop para ele poder te ajudar.
Códigos CSS para o Atlántico
Ocultar/Remover:
Ocultar os ícones das redes sociais das páginas dos produtos.
|
.social-share { display: none; } |
Ocultar as opções de "Criar conta" e "Entrar"
|
body > div.sidebar-content.sidebar-content-transparent > div > div > div.nav-secondary.pt-3.pb-md-5 > ul.nav-account.row { display: none; } |
Ocultar a etiqueta de promoção na página do produto
|
#single-product > div > div.section-single-product.row.no-gutters.mb-md-4 > div.col-md-7 > div.js-swiper-product.product-detail-slider.swiper-container > div.labels.labels-top.labels-top-more { display: none; } |
Ocultar a etiqueta "Sem estoque"
|
.label.label-default { display: none; } .js-stock-label.label.label-default { display: none; } |
Ocultar o parcelamento
- Na lista de produtos
|
.js-max-installments-container.js-max-installments.item-installments.font-small { display: none; } |
- Na página do produto
|
.js-max-installments-container.js-max-installments { display: none; } |
- Na legenda dos produtos no resultado de pesquisa
|
#nav-search > div.modal-body.mt-0 > div > ul > li:nth-child(1) > a > div.search-suggest-text.col > p:nth-child(2) > span { display: none; } |
- No carrinho de compras
|
.js-installments-cart-total.mt-1 { display: none; } |
- No pop-up dos meios de pagamento
|
#installment_mercadopago_ > div > div:nth-child(2) > div:nth-child(1) > div.font-medium.mb-1 { display: none; } #installment_mercadopago_ > div > div:nth-child(2) > div:nth-child(2) > div.font-medium.mb-1 { display: none; } |
Ocultar o botão "Adicionar ao carrinho"
|
.mb-4 { display: none; } .form-group.js-quantity { display: none; } .item-actions { display: none; } |
Ocultar a opção "Ordenar por"
|
body > div.main-content > section.category-body.px-2.px-md-3 > div > div.category-controls { display: none; } |
Ocultar o botão "Mostrar todos os produtos"
|
body > div.main-content > section.section-featured-home.px-2.px-md-3 > div > div > div.col-md-4 > a { display: none!important; } |
Ocultar o filtro de variações na página de produtos
|
body > div.main-content > section.category-body.px-2.px-md-3 > div > div.category-controls { display: none; } |
Ocultar as setas do banner rotativo
|
body > div.main-content > section:nth-child(2) > div > div > div > div.js-swiper-home-control.js-swiper-home-pagination.swiper-pagination.swiper-pagination-bullets.swiper-pagination-white.swiper-pagination-clickable { display: none!important; } |
Alterar:
Alterar o tamanho do logotipo
|
.logo-img { max-height: 450px; } |
❗ 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.
DeleteAlterar o espaço (aumentar) entre os ícones do menu principal
|
.nav-list .nav-list-link { padding: 16px 0; } |
❗ Se não gostar do tamanho, basta substituir o número 16 por qualquer outro número até chegar no tamanho que deseja.
Delete
Alterar o tamanho (aumentar) a fonte do menu principal
|
@media (min-width: 768px) .nav-list > li > .nav-list-link { font-size: 25px; } |
❗ Se não gostar do tamanho, basta substituir o número 25 por qualquer outro número até chegar no tamanho que deseja.
Delete
Alterar a cor da fonte do menu principal
|
a.nav-list-link { color: red; } |
❗ Para escolher e obter o código da cor, consultar o tutorial 👉 Cores para usar no seu layout, por código CSS.
Delete
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.