Olá pessoal neste tutorial vou mostrar como podemos melhorar a aparência da “TAG” de promoção da loja!

Ao colocar um produto em promoção (veja como fazer neste link) será exibido uma “TAG” logo acima no canto direito da imagem do produto como mostra a imagem abaixo:

Isso já ai ajudar a destacar seus produtos com oferta dos demais, porém o formato é padrão e não tem opção para mudar o formato, mas podemos fazer um ajuste de código avançado para melhorar e ficar assim:

Para isso vamos fazer duas configurações, primeiro vamos no menu de Configurações > Opções da Loja e depois na aba de Usabilidade aqui vamos no campo de “Texto para produtos em promoção” e vamos adicionar uma TAG de HTML, dentro dela poderá colocar o texto que desejar, mas ideal que seja um texto pequeno afinal vai ser bem menor o espaço, então coloque assim:

<i>TEXTO</i>

Ai poderá substituir TEXTO por OFF por exemplo

Salve e agora vamos mudar o estilo da TAG, vá no menu de Customização > Personalizar e na aba de Avançado, cole no final do código de CSS Personalizado a seguinte instrução:

/*
* ALTERA O FORMATO DA TAG DE PRODUTO EM PROMOÇÃO
* Fica no formato de circulo
* ATENÇÃO: para que funcione habilite no menu de Configurações > Opções da Loja "Texto para produtos em promoção:"
* e coloque o seguinte código na descrição: OFF
*/
.product-label-special{
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	text-align: center;
	text-shadow: none;
}
	.product-label-special span{
		float: none;
		display: block;
		font-size: 14px;
		text-shadow: none;
		font-weight: bold;
	}

	.product-label-special span i{
		display: block;
		font-style: inherit;
		font-weight: normal;
		font-size: 11px;
	}

Agora salve e pronto, as TAGS serão modificar de horizontal para um circulo mais com mais estilo, lembrando para trocar a cor da TAG ainda na tela de Customização, vá na aba de cores e layout clique sobre “promoções” e na janela que vai abrir altere a cor nos campos de Cor do texto “Promoção” e Cor de fundo da “Promoção”.

Espero ter ajudado, até próxima!