Brands Block

To show Brands Block on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.

In field HTML block:

After that, input sample content below:
<div class="halo-block halo-home-section" id="topBrands" data-halo-load="animation">
<div class="container">
<div class="topBrands--heading pos-relative text-left halo-fadeInUp" data-halo-animate="0">
<h3 class="page-heading">We Carry Top Brands</h3>
<a class="link" href="#">View More</a>
</div>
<div class="topBrands--carousel pos-relative c-6" data-col="8" data-row="2" data-halo-load="init-carousel">
<div class="item halo-fadeInUp" data-halo-animate="1">
<a href="#" class="topBrands--item" aria-label="Brand 1">
<img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-1.jpg" alt="Brand 1"/>
</a>
</div>
<div class="item halo-fadeInUp" data-halo-animate="1">
<a href="#" class="topBrands--item" aria-label="Brand 2">
<img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-9.jpg" alt="Brand 2"/>
</a>
</div>
<div class="item halo-fadeInUp" data-halo-animate="2">
<a href="#" class="topBrands--item" aria-label="Brand 3">
<img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-2.jpg" alt="Brand 3"/>
</a>
</div>
<div class="item halo-fadeInUp" data-halo-animate="2">
<a href="#" class="topBrands--item" aria-label="Brand 4">
<img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-10.jpg" alt="Brand 4"/>
</a>
</div>
<div class="item halo-fadeInUp" data-halo-animate="3">
<a href="#" class="topBrands--item" aria-label="Brand 5">
<img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-3.jpg" alt="Brand 5"/>
</a>
</div>
<div class="item halo-fadeInUp" data-halo-animate="3">
<a href="#" class="topBrands--item" aria-label="Brand 6">
<img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-11.jpg" alt="Brand 6"/>
</a>
</div>
<div class="item halo-fadeInUp" data-halo-animate="4">
<a href="#" class="topBrands--item" aria-label="Brand 7">
<img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-4.jpg" alt="Brand 7"/>
</a>
</div>
<div class="item halo-fadeInUp" data-halo-animate="4">
<a href="#" class="topBrands--item" aria-label="Brand 8">
<img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-12.jpg" alt="Brand 8"/>
</a>
</div>
<div class="item halo-fadeInUp" data-halo-animate="5">
<a href="#" class="topBrands--item" aria-label="Brand 9">
<img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-5.jpg" alt="Brand 9"/>
</a>
</div>
<div class="item halo-fadeInUp" data-halo-animate="5">
<a href="#" class="topBrands--item" aria-label="Brand 10">
<img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-13.jpg" alt="Brand 10"/>
</a>
</div>
<div class="item halo-fadeInUp" data-halo-animate="6">
<a href="#" class="topBrands--item" aria-label="Brand 11">
<img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-6.jpg" alt="Brand 11"/>
</a>
</div>
<div class="item halo-fadeInUp" data-halo-animate="6">
<a href="#" class="topBrands--item" aria-label="Brand 12">
<img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-14.jpg" alt="Brand 12"/>
</a>
</div>
<div class="item halo-fadeInUp" data-halo-animate="7">
<a href="#" class="topBrands--item" aria-label="Brand 13">
<img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-7.jpg" alt="Brand 13"/>
</a>
</div>
<div class="item halo-fadeInUp" data-halo-animate="7">
<a href="#" class="topBrands--item" aria-label="Brand 14">
<img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-15.jpg" alt="Brand 14"/>
</a>
</div>
<div class="item halo-fadeInUp" data-halo-animate="8">
<a href="#" class="topBrands--item" aria-label="Brand 15">
<img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-8.jpg" alt="Brand 15"/>
</a>
</div>
<div class="item halo-fadeInUp" data-halo-animate="8">
<a href="#" class="topBrands--item" aria-label="Brand 16">
<img src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-brand-16.jpg" alt="Brand 16"/>
</a>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
Last updated