Início›Configure sua loja›Layout›Personalização avançada›Código CSS

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

Última atualização: 24/02/2025

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 "Loja online > 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 Focus

    Ocultar/Remover:

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

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

    display: none;

}

Delete

Ocultar a newsletter

.js-hide-footer-while-scrolling.container.visible-when-content-ready {

    display: none;

}

Delete

Ocultar o logotipo do Newsletter

#news-popup > div > div > div > div > div:nth-child(1) > div.text-center.m-top-half.m-bottom-half {

    display: none;

}

Delete

Ocultar setas do banner rotativo

.bx-controls.bx-has-controls-direction {

    display: none;

}

Delete

Ocultar o botão "Mostrar todos os produtos"

.col-xs-12.text-center {

    display: none;

}

Delete

Ocultar o filtro de variações na lista de produtos

.col-md-2 {

    display: none;

}

Delete

Ocultar a opção de "Ordenar Por"

.col-xs-7.col-sm-7.text-right.text-left-xs {

    display: none;

}

Delete

Ocultar o carrinho de compras

li.cart-summary {

    display: none;

}

Delete

Ocultar o botão de "Adicionar ao carrinho"

input.js-addtocart.js-prod-submit-form.btn.btn-primary.btn-block.m-top.m-bottom.d-inline-block.cart {

    display: none;

}

Delete

Ocultar ícones das redes sociais na página do produto

.social-widgets.text-secondary.text-center.p-top-half.p-bottom-half.m-top {

    display: none;

}

Delete

Ocultar a seção "Produtos recentes / Relacionados"

.container.m-top {

   display: none;

}

Delete

Remover o zoom das imagens

.mousetrap {

    display: none;

}

Delete

Ocultar a opção de parcelamento 

  • Na lista de produtos

.js-max-installments-container {

    display: none;

}


  • Na página do produto

.js-max-installments-container.installments {

    display: none;

}

DeleteDelete

Ocultar a etiqueta promocional da página dos produtos

.labels-floating.m-right {

    display: none;

}

Delete

Ocultar a etiqueta de frete grátis

.label-secondary {  display: none;}

Delete

Ocultar a etiqueta de "Sem estoque"

.js-stock-label.label.label-small.label-dark {

    display: none;

}

Delete


Alterar:

Alterar o formato dos ícones das Redes Sociais para redondo

.social-networks a {

    font-size: 1.8em;

    border-radius: 50%;

    width: 50px;

    height: 50px;

}

Delete

Alterar a cor da fonte do menu principal

.desktop-nav-link {

    color: red;

}

❗ 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 texto do menu principal

.desktop-nav-link {

    font-size: 20px;

}


❗ Se não gostar do tamanho, basta substituir o número 20 por qualquer outro número até chegar no tamanho que deseja. 
Delete

Alterar o tamanho do logotipo

.logo-img {

    max-height: 100px;

}

Delete

Alterar a lenda de "Sem estoque" por outra 

.js-stock-label.label.label-small.label-dark:before {

    visibility: visible;

    content: "Esgotado";

    box-shadow: 0px 3px rgba(0, 0, 0, 0.3);

    background: #e2e4ed;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 50px;

    padding: 5px;

    margin-bottom: 8px;

    text-align: center;

}

.js-stock-label.label.label-small.label-dark {

    visibility: hidden;

}

❗ Para alterar a legenda, basta substituir a palavra "Esgotado" por outra de sua escolha.
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.