Popular Categories

To show Popular Categories 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 halo-bgGray" id="popularCates" data-halo-load="animation">
<div class="container ">
<div class="popularCates--heading pos-relative text-center halo-fadeInUp" data-halo-animate="0">
<h3 class="page-heading">More Departments</h3>
</div>
<div class="c-2">
<div class="item halo-fadeInUp" data-halo-animate="1">
<article class="popularCates--card">
<figure class="popularCates--figure">
<img class="popularCates--image"
src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-popular-category-1.jpg"
alt="Chevrolet">
</figure>
<div class="popularCates--body">
<h4 class="title">
<a href="#" aria-label="Chevrolet">Chevrolet</a>
</h4>
<p class="description">
Small SUV, big personality. Available in a variety of eye-catching styles, this ride draws all the right kind of attention.
</p>
</div>
<a href="#" aria-label="Chevrolet"></a>
</article>
</div>
<div class="item halo-fadeInUp" data-halo-animate="2">
<article class="popularCates--card">
<figure class="popularCates--figure">
<img class="popularCates--image"
src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-popular-category-2.jpg"
alt="Ford">
</figure>
<div class="popularCates--body">
<h4 class="title">
<a href="#" aria-label="Ford">Ford</a>
</h4>
<p class="description">
Go on an off-roading, outdoor adventure playground designed for all skill levels.
</p>
</div>
<a href="#" aria-label="Ford"></a>
</article>
</div>
<div class="item p-t halo-fadeInUp" data-halo-animate="3">
<article class="popularCates--card">
<figure class="popularCates--figure">
<img class="popularCates--image"
src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-popular-category-3.jpg"
alt="Hyundai">
</figure>
<div class="popularCates--body">
<h4 class="title">
<a href="#" aria-label="Hyundai">Hyundai</a>
</h4>
<p class="description">
It is available in both front-wheel and all-wheel drive configurations, with a choice of two engines.
</p>
</div>
<a href="#" aria-label="Hyundai"></a>
</article>
</div>
<div class="item p-t halo-fadeInUp" data-halo-animate="4">
<article class="popularCates--card">
<figure class="popularCates--figure">
<img class="popularCates--image"
src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-popular-category-4.jpg"
alt="Mercedes">
</figure>
<div class="popularCates--body">
<h4 class="title">
<a href="#" aria-label="Mercedes">Mercedes</a>
</h4>
<p class="description">
Embodying Mercedes's hallmark craftsmanship in every aspect for a truly luxurious experience.
</p>
</div>
<a href="#" aria-label="Mercedes"></a>
</article>
</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