Hostinger Criador de Sites: Como Mudar a Cor do Texto da Loja Online

Saiba como alterar a cor do texto nas seguintes áreas da sua loja online:

• Lista de produtos

  • Banners de barra

  • Botão “Adicionar ao carrinho”

  • Título do produto (individualmente)

  • Paginação (individualmente)

• Seção de produto único e/ou página de produto

  • Descrição do produto

  • Botão “Adicionar ao carrinho”

  • Título do produto (individualmente)

  • Legenda do produto (individualmente)

Cor da seção da lista de produtos

Clique na seção da lista de produtos, selecione Editar seção e altere a cor do texto na guia Estilo:

Alterar a cor do texto nas configurações de estilo afetará o título do produto, preço e botões de paginação. Se houver um preço de venda, o preço original será sempre um tom mais claro.

Cor dos banners de barra

Clique na seção da lista de produtos, selecione Editar seção e altere a cor da barra na guia Banners de barra:

OBSERVAÇÃO: Para adicionar uma barra, abra o editor de produtos na área de gerenciamento da loja

Cor do botão “Adicionar ao carrinho”

Clique na seção da lista de produtos, selecione Editar seção e altere a cor do botão na guia do Botão “Adicionar ao carrinho”:

Cor do título do produto

Copie o código abaixo, substitua o código HEX (inglês) pelo de sua preferência e cole-o no campo Código personalizado nas configurações de integração do seu site:

<style>
/*Product list: Product title*/
.product-list-item__title {
color: #FF0000 !important;
}
</style>

Cor da paginação

Copie o código abaixo, substitua os códigos HEX (inglês) pelo de sua preferência e cole-o no campo Código personalizado nas configurações de integração do seu site:

<style>
/*Product list: Pagination color*/
.pagination__button{
color: #FF0000 !important;
}
/*Product list: Current page number color*/
.pagination__trigger--current{
color: #00FF00 !important;
}
/*Product list: Pagination hover color*/
.pagination__button:hover, .pagination__button:active{
color: #0000FF !important;
}
</style>

Cor da seção de produto único e/ou página de produto

Clique na seção do produto, selecione Editar seção e altere a cor na guia Estilo:

• Cor do texto

• Cor das setas nas imagens do produto

• Cor das setas na galeria de produtos

• Cor de fundo da seção (ou definir fundo da imagem)

Alterar a cor do texto nas configurações de estilo afetará o título, subtítulo, preço, opções do produto e descrição do produto. Se houver um preço de venda, o preço original será sempre um tom mais claro.

Cor da descrição do produto

Na área de gerenciamento da loja, abra o produto em questão. Encontre o campo de descrição e altere a cor usando as ferramentas de edição de texto:

Cor do botão “Adicionar ao carrinho”

Clique na seção da lista de produtos, selecione Editar seção e altere a cor do botão na guia Botão:

Cor do título do produto

Copie o código abaixo, substitua o código HEX (inglês) pelo de sua preferência e cole-o no campo Código personalizado nas configurações de integração do seu site:

<style>
/*Single product: Product title*/
.block-product__title {
color: #FF0000 !important;
}
</style>

Cor da legenda do produto

Copie o código abaixo, substitua o código HEX (inglês) pelo de sua preferência e cole-o no campo Código personalizado nas configurações de integração do seu site:

<style>
/*Single product: Product title*/
.block-product__subtitle {
color: #FF0000 !important;
}
</style>