Central de Atendimento Nuvem Configure sua loja Layout Personalização avançada Código CSS

Trend - Códigos CSS para customização do layout

Lista de códigos CSS para alterar ou ocultar alguns elementos (botões, textos, fundo dos elementos, etc) do seu layout Trend da Nuvemshop.

Última atualização: 16/02/2024

Ir para os códigos CSS ⏬

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:


Ocultar as opções de "Criar conta" e "Entrar"

div.col-sm-6.text-right {

    display: none;

}

Delete

Ocultar a newsletter

.row.home-widgets.m-top-double {

    display: none;

}"

Delete

Remover o efeito escuro dos banners aos passar o mouse por cima

.textbanner-image:after {

    background: none;

}

Delete

Ocultar setas do banner rotativo

.bx-controls {

    display: none;

}

Delete

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;

}

Delete

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;

}

Delete

Ocultar a opção de "Ordenar Por"

.row.category-controls.m-bottom-xs.p-bottom-half-xs {

    display: none;

}

Delete

Remover o zoom das imagens

.mousetrap {

    display: none;

}

Delete

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;

}

DeleteDelete

Ocultar a tag promocional na página dos produtos

.label-primary {

display: none;

}

Delete

Ocultar a etiqueta de frete grátis

.label.label-circle.label-primary-dark.label-overlap{

display:none;

}

Delete


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;

}

Delete

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%); }

}

Delete

Alterar o tamanho do banner rotativo para desktop (Computador/Notebook)

@media (min-width: 767px) { 

img.slide-img {

    width: 75%;

    margin-left: 150px;

}}

Delete

Alterar a posição do menu principal (centralizar)

a.desktop-nav-link {

    text-align: center!important;

}

Delete

Alterar o tamanho do logotipo

.logo-image img {

    max-height: 300px;

    max-width: 100%;

}

Delete

Alterar o tamanho (diminuir) das imagens na página do produto

img.thumb-image.lazyautosizes.blur-up.ls-is-cached.lazyloaded {

    width: 5vw!important;

}

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.

O artigo ajudou você?

Dê sua opinião sobre este artigo