Personalizar barra do topo no tema Amazonas Nuvemshop

Em resposta ao comentário de um seguidor do meu canal, vou ensinar neste post a personalizar de forma mais avançada, a barra superior da loja Nuvemshop, especialmente o tema Amazonas, porém, o mesmo método pode ser replicado para qualquer tema, apenas alterando o seletor.

A pergunta do seguidor foi a seguinte:

Boa tarde Jackson, tenho uma dúvida: Tem alguma forma de colocar uma palavra em negrito em parte do texto que está na barra de anúncios? E existe uma forma para personalizar a cor desta barra, não encontrei nada que fale a respeito…desde já agradeço pela resposta!

Para responder essa pergunta dupla, vamos ter que responder com dois códigos, um CSS para personalizar as cores de fundo e texto da barra, e outro é um código Javascript, que será responsável em substituir o conteúdo padrão da barra por um texto redefinido com os negritos nas palavras desejadas.

Onde inserir o código?

Esses códigos devem ser inseridos, um abaixo do outro, diretamente no campo CONFIGURAÇÕES > CÓDIGOS EXTERNOS > CÓDIGO DE RASTREAMENTO.

<style>
/* Alterar cor do fundo e dos textos da barra superior */
.section-topbar {
    background-color: #94c41c;
    color: #FFFFFF;
    fill: #FFFFFF;
}

/* Alterar cor do link da barra superior */
.section-topbar a.link-contrast{
    color: #fff;
    fill: #fff;
}

/* Alterar cor e tamanho dos ícones da barra superior */
.section-topbar a.social-icon svg{
    color: #fff;
    fill: #fff;
    font-size: 1.2em;
}
</style>

<!-- Altera o conteúdo da barra superior -->
<script>
var containerSelectorTopBar = ".section-topbar > div > div > div.col.col-md-6.font-small.text-center";
var newContentTopBar = `
<a href="" title="Meu link XYZ">Meu conteúdo <strong>xyz</strong> personalizado</a>
`;
$(containerSelectorTopBar).html(newContentTopBar);
</script>

Ainda está com dúvida?

Se precisar de mais auxílio, basta chamar minha equipe na Planweb Interativa que preparamos tudo para você e auxiliamos nessa parte mais técnica.