Painel > Marketing > Ofertas periódicas 

# HTML
{% if page == 'principal' %}
	{% set oferta = store.periodicOffers() %}
	{% if oferta.id %}
	<div class="block promo" style="background-color: {{ oferta.cor_fundo }}; color: {{ oferta.cor_texto }}">
		<div class="central">
			<div class="d-none d-md-block">
				<h2 class="first">{{ oferta.texto1 }}</h2>
				{% if oferta.texto2 %}
					<h3 class="second">{{ oferta.texto2 }}</h3>
				{% endif %}
				{% if oferta.botao_url %}
					<a href="{{ oferta.botao_url }}" class="botao" style="background-color: {{ oferta.botao_cor_fundo }}; color: {{ oferta.botao_cor_texto }};">{{ oferta.botao_texto }}</a>
				{% endif %}
			</div>
			<div class="d-block d-md-none">
				{% if oferta.botao_url %}
					<a href="{{ botao.botao_url }}" class="text-white">
						<h2 class="first">{{ oferta.texto1_mb }}</h2>
						{% if oferta.texto2_mb %}
						<h3 class="second">{{ oferta.texto2_mb }}</h3>
						{% endif %}
					</a>
				{% else %}
					<h2 class="first">{{ oferta.texto1_mb }}</h2>
					{% if oferta.texto2_mb %}
						<h3 class="second">{{ oferta.texto2_mb }}</h3>
					{% endif %}
				{% endif %}
			</div>
			{% if oferta.countdown %}
			<span class="countdown d-inline-block px-2 py-1 bg-danger rounded" data-countdown="{{ oferta.data_fim }} 23:59:59" data-pretext="Acaba em" data-postext=" "></span>
			{% endif %}
		</div>
	</div>
	{% endif %}
{% endif %}

// CSS
.promo{
	background-color: #FFF;
	color: #000;
	text-align: center;
	padding: 10px;
	transition: all .25s;
	margin-top: 0;
	&.disable{
		margin-top: -200px;
	}
	.first,
	.second,
	.botao{
		display: inline-block;
		margin: 0 10px;
		vertical-align: middle;
	}
	.botao{
		background-color: #000;
		color: #FFF;
		padding: 10px 26px;
		font-size: 15px;
		letter-spacing: 0.12em;
		&:active{
			opacity: 0.7;
		}
	}
}