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

Cubo - 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 Cubo da Nuvemshop.

Última atualização: 15/09/2022

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, entre em contato com uns dos 🛠️ Especialistas Nuvemshop para ele poder te ajudar. 


Códigos CSS para o Cubo

    Ocultar/Remover:

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

Para desktop/notebook 💻

.list-unstyled.list-inline.m-none {

display:none;

}

Delete

Para celular/smartphone 📱

body > nav > div > ul{display:none!important;

}

Delete
Delete

Ocultar as etiquetas de promoções

.label-primary{

display:none;

}

Delete

Ocultar a etiqueta de frete grátis

.label.label-secondary {

 display: none;

}

Delete

Ocultar a etiqueta "Sem estoque"

.js-stock-label.label.label-default {

     display: none;

}

Delete

Ocultar a opção "Ordenar por"

.form-group.mb-0 {

    display: none;

}

Delete

Remover o zoom das imagens

.mousetrap {

    display: none;

}

Delete

    Alterar:

.js-stock-label.label.label-default:after {

    visibility: visible;

    content: ""agotado"";

    background: black;

    padding: 10px 20px;

    letter-spacing: 1px;

    margin-right: -23%;

}

.js-stock-label.label.label-default {

    visibility: hidden;

}

Delete

Alterar o tamanho (aumentar) o logotipo

.logo-img {

    max-height: 70px;

}

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