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

🌟 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

.m-bottom.text-center {    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

.js-max-installments-container.text-tertiary {    display: none;}

  • Ocultar a etiqueta de Frete grátis

.label-circle.label-primary.clear-both.m-bottom-quarter {    display: inline-table;}.label-primary {    display: none;}

  • Desabilitar o zoom das fotos dos produtos

.mousetrap {    display: none;}

  • Ocultar o carrinho de compras 

div#ls_cart_widget {    display: none;}

  • Ocultar a Newsletter do rodapé

div#newsletter {    display: none;}body > div.js-main-content.main-content > div.js-hide-footer-while-scrolling.footer.visible-when-content-ready.text-center-xs > div > div > div.span9.m-bottom > h6 {    display: none;}

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

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

  • Centralizar o menu principal

.desktop-nav {    display: block;    margin-left: auto;    margin-right: auto;    width: 789px;}

  • Alinhar o menu principal a direita

.desktop-nav {    text-align: right!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. 

Encontrou sua resposta?