Painel > Produtos > Marcas 

# HTML
{% set marcas = store.getBrands() %}
{% if marcas.items|length > 0 and marcas.showOnHomePage %}
<section id="marcas" class="block mb-3">
	<div class="central">
		<div class="itens owl-carousel owl-theme px-3">
			{% for marca in marcas.items %}
			<div class="item text-center bg-white p-2">
				<a href="{{ marca.marca_url }}">
					{% if marca.logo %}
					<img src="{{ marca.logo }}" alt="{{ marca.marca }}" />
					{% else %}
					<h6 class="marca">{{ marca.marca }}</h6>
					{% endif %}
				</a>
			</div>
			{% endfor %}
		</div>
	</div>
	<script>
		$(function(){
			$('#marcas .itens').owlCarousel({
				autoplay: true,
				autoplayTimeout: 2000,
				autoplayHoverPause: true,
				loop: $('#marcas .itens .item').length > 3 ? true : false,
				dots: true,
				nav: false,
				margin: 15,
				animateOut: 'bounceOutLeft',
				animateIn: 'bounceInRight',
				responsive: {
					0: {
						items: 1,
					},
					598: {
						items: 2,
					},
					800: {
						items: 3,
					},
					1024:{
						items: 4,
					}
				}
			});
		});
	</script>
</section>
{% endif %}

// CSS
#marcas{
	.item{
		width: 100%;
		height: 100px;
		overflow: hidden;
		border: solid 1px #F5F5F5;
		display: flex;
		
		a{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
		}
		
		img{
			max-width: 100%;
			max-height: 100%;
		}
		
		.marca{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			color: #444;
			font-size: 22px;
			line-height: 24px;
			padding: 10px;
		}
	}
}