Pequenas alterações podem ser feitas nos layouts padrão da Nuvemshop via CSS, uma linguagem de programação que define como os elementos que compõem uma página, um documento ou aplicação Web serão exibidos para quem visita o site. 

No painel de administração de sua loja, temos uma funcionalidade onde você pode incorporar códigos que apresentaremos nesse tutorial. Para saber como aplicá-los, consulte o tutorial Como editar o código CSS da minha loja?

Os códigos apresentados aqui funcionam somente para o layout Silent.

🌟 Importante: a Nuvemshop não faz customizações de layouts ou gera códigos CSS por encomenda. Apenas disponibilizamos essas opções para ajudar com pequenas alterações. Para outros códigos ou personalizações mais drásticas, entre em contato com um Especialista Nuvem.

  • Ocultar ícones das redes sociais das páginas dos produtos

.text-center.p-top-half.p-bottom-half.m-bottom.clear-both.border-bottom {    display: none;}

  • Ocultar as Categorias Principais da página inicial da versão para Desktop

.pills-container {    display: none;}

  • Ocultar as Categorias Principais da página inicial da versão para Mobile

.pills-container {    display: none;}

  • Ocultar as parcelas da página inicial e das categorias

.item-installments {    display: none;}

  • Ocultar as parcelas da página do produto

.product-installments {    display: none;}

  • Ocultar a etiqueta de Frete grátis

.item-label-shipping {    display: none;}

  • Desabilitar o zoom das fotos dos produtos

.mousetrap {    display: none;}

  • Ocultar o carrinho de compras 

#ls_cart_widget { display:none; }

  • Ocultar a Newsletter do rodapé

#container > div.js-main-content.main-content > div.footer.visible-when-content-ready.clear-both > div > div:nth-child(1) > div:nth-child(1) > p {    display: none;} #newsletter {    display: none;}

  • Ocultar as setas dos Banners rotativos da página inicial

.bx-controls-direction {    display: none;}

  • Aumentar o tamanho do logo

.logo-img-container img { max-width: 139%; vertical-align: middle; margin-top: 8px; max-height: 180px;}@media (max-width: 767px){.mobile-logo-home img { max-height: 60px!important; max-width: 80%!important;}}

  • Mudar para maiúscula a fonte dos títulos dos produtos

#prod-page .title h1, h1 {text-transform: uppercase!important;}

  • Mudar a porcentagem de desconto do preço promocional por "Oferta"

.item-label.item-label-offer:before {   content: "Oferta";    font-size: 15px;    color: #ffffff;    visibility: visible;}.item-label-offer {    color: #545252;    font-size: 0px;    padding-top: 9px;}


💡 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. 

Encontrou sua resposta?