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 layouts Simple.

🌟 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

.twitter{    display: none;}.google{    display: none;}.facebook{    display: none;}.js-desktop-pinterest-share{    display: none;}

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

.span2.left-col.hidden-phone.visible-when-content-ready{    display: none;}

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

.horizontal-container ul, .horizontal-products-scroller {    display: none;}

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

.item-installments {    display: none;}

  • Ocultar as parcelas da página do produto

.installments {    display: none;}

  • Ocultar a etiqueta de Frete grátis

.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 > footer > div.footer.visible-when-content-ready > div > div:nth-child(2) > div:nth-child(3) > div.col-foot.hidden-phone > h4{    display: none;}.newsletter-footer.js-newsletter-footer.p-relative {    display: none;}

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

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

  • Inverter as cores da etiqueta "Sem estoque"

.out-of-stock-product {background: rgb(0, 0, 0);color: #fff;font-weight: bold;}

  • Em produtos com preço promocional, substituir a porcentagem pela palavra "Oferta"

.item-label.item-label-offer.product-label.label-offer:before { content: "Sale"; visibility: visible; position: absolute; text-align: center; letter-spacing: 0.5px; display: block; left: 14px;}.item-label.item-label-offer.product-label.label-offer span { visibility: hidden; width: 0; height: 0; font-size: 11px;}

  • Em produtos com preço promocional, ocultar a etiqueta com a porcentagem do desconto

.label-offer {
    display: none;
}

  • Adicionar uma imagem na "Página em Construção"

.password-container.text-center.m-auto:after {    display: block;    width: 100%;    content: " ";    background-image: url("http://d26lpennugtm8s.cloudfront.net/stores/204/099/rte/fondo-de-viaje-con-maleta-de-acuarela_23-2147597483.jpg");    background-origin: content-box;    background-size: contain;    background-repeat: no-repeat;    min-height: 140px;    background-position: center;}.password-container.password-icon.text-center.svg-icon-text { display: none }

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