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

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

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

Última atualização: 20/07/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 Idea

    Ocultar:

Ocultar ícone de carrinho

.js-modal-open.js-toggle-cart.js-fullscreen-modal-open.utilities-item {

display:none;

}

Delete

Ocultar opção "Minha conta" (Login)

.nav-secondary{ 

display:none;

}

Delete

Ocultar etiqueta de promoção

.label.label-accent {

    display:none;

}

Delete

Ocultar ícones das redes sociais na página dos produtos

.social-share.mt-3 {

display:none;

}

Delete

    Alterar:

Banner informativo: alterar a cor de fundo e do texto

.section-informative-banners {

      background-color: #000000;

      color: #ffffff;

}


❗ Para escolher e obter o código da cor, consultar o tutorial 👉 Cores para usar no seu layout, por código CSS. Lembrando que Background-color é a cor de fundo e Color é a cor dos textos.

Banner informativo: alterar a cor dos ícones

.svg-icon-text {

    fill: #ffffff;

}


❗ Para escolher e obter o código da cor, consultar o tutorial 👉 Cores para usar no seu layout, por código CSS
Delete

Alterar o tamanho do logotipo

.logo-img {

max-height: 450px;

}


❗ Você pode alterar o valor para qualquer uma que seja abaixo de 450px.
Delete

Alterar a cor da barra de busca e texto

.js-search-input.form-control.search-input{    

   border-color: #ff0000;

    color: #ff0000;

}


❗ Para escolher e obter o código da cor, consultar o tutorial 👉 Cores para usar no seu layout, por código CSS.


Alterar o tamanho da fonte do número de parcelas na página inicial

.js-max-installments {

font-size: 20px;

}


❗ Para definir o tamanho da fonte, basta alterar o número identificado com as letras 'px' antes de salvar as alterações. Por exemplo: 20px você pode alterar para 30px.
Delete

Alterar a cor da barra de busca e seu texto

.js-search-input.form-control.search-input{    

    background: #000000;

    color: #ffffff;

}


❗ Para escolher e obter o código da cor, consultar o tutorial 👉 Cores para usar no seu layout, por código CSS.
Delete

Alterar a cor de fundo e o texto da tag de "Esgotado"

.label.label-default {

        background-color: #f1f100;

        color: #000000;

}


❗ Para escolher e obter o código da cor, consultar o tutorial 👉 Cores para usar no seu layout, por código CSS.
Delete

Alterar a cor de fundo e o texto da tag de "Promoção" (% off)

.label.label-accent {

    background: #f11f11;

    color: #000000;

}


❗ Para escolher e obter o código da cor, consultar o tutorial 👉 Cores para usar no seu layout, por código CSS.
Delete

Alterar a cor da lupa da barra de busca

body > div > header > div.container-fluid > div > div:nth-child(1) > div > div > div > div > form > div > button > svg {

fill:#ff0000;

}


❗ Para definir o tamanho do logotipo, basta alterar o número identificado com as letras 'px' antes de salvar as alterações. Por exemplo: 20px você pode alterar para 30px.
Delete

Alterar a cor do botão compra rápida (sacolinha de compra)

.item-buy-open {

    background: #000000;

}


❗ Para escolher e obter o código da cor, consultar o tutorial 👉 Cores para usar no seu layout, por código CSS.
Delete

Alterar a cor do botão "Finalizar compra" no carrinho

.btn-primary {

    background-color: #000000;

     color: #ff0000;

}


❗ Para escolher e obter o código da cor, consultar o tutorial 👉 Cores para usar no seu layout, por código CSS.
Delete


Delete

Success

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