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" id="popularCates" data-halo-load="animation">
<div class="container ">
<div class="popularCates--heading pos-relative text-left halo-fadeInUp" data-halo-animate="0">
<h3 class="page-heading">More Departments</h3>
<a class="link" href="#">View More</a>
</div>
<div class="c-2">
<div class="item item-col-2">
<div class="item-child">
<article class="popularCates--card halo-fadeInUp" data-halo-animate="1">
<figure class="popularCates--figure">
<img class="popularCates--image"
src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-popular-category-1.jpg"
alt="Hand Tools">
</figure>
<div class="popularCates--body">
<h4 class="title">
<a href="#" aria-label="Hand Tools">Hand Tools</a>
</h4>
<p class="description">
Our product conceived on the jobsite and built to exceed the expectations of all trades.
</p>
<a href="button button--primary"></a>
</div>
<a href="#" aria-label="Hand Tools"></a>
</article>
</div>
<div class="item-child">
<article class="popularCates--card halo-fadeInUp" data-halo-animate="2">
<figure class="popularCates--figure">
<img class="popularCates--image"
src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-popular-category-2.jpg"
alt="Wood Drill">
</figure>
<div class="popularCates--body">
<h4 class="title">
<a href="#" aria-label="Wood Drill">Wood Drill</a>
</h4>
<p class="description">
We offers a full range of corded and cordless.
</p>
</div>
<a href="#" aria-label="Wood Drill"></a>
</article>
</div>
</div>
<div class="item">
<article class="popularCates--card halo-fadeInUp" data-halo-animate="3">
<figure class="popularCates--figure">
<img class="popularCates--image"
src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-popular-category-3.jpg"
alt="Shop The Range">
</figure>
<div class="popularCates--body">
<h4 class="title">
<a href="#" aria-label="Shop The Range">Shop The Range</a>
</h4>
<p class="description">
Grinders offer professional concrete and metalworking users a wide range of choices.
</p>
</div>
<a href="#" aria-label="Shop The Range"></a>
</article>
</div>
<div class="item p-t">
<article class="popularCates--card halo-fadeInUp" data-halo-animate="4">
<figure class="popularCates--figure">
<img class="popularCates--image"
src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-popular-category-4.jpg"
alt="Top Brands Tool">
</figure>
<div class="popularCates--body">
<h4 class="title">
<a href="#" aria-label="Top Brands Tool">Top Brands Tool</a>
</h4>
<p class="description">
Wide range of options so you can build the kit you need.
</p>
</div>
<a href="#" aria-label="Top Brands Tool"></a>
</article>
</div>
<div class="item item-col-2 p-t">
<div class="item-child">
<article class="popularCates--card halo-fadeInUp" data-halo-animate="5">
<figure class="popularCates--figure">
<img class="popularCates--image"
src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-popular-category-5.jpg"
alt="Power Tools">
</figure>
<div class="popularCates--body">
<h4 class="title">
<a href="#" aria-label="Power Tools">Power Tools</a>
</h4>
<p class="description">
Our power tools are made to live on the jobsite.
</p>
</div>
<a href="#" aria-label="Power Tools"></a>
</article>
</div>
<div class="item-child">
<article class="popularCates--card halo-fadeInUp" data-halo-animate="6">
<figure class="popularCates--figure">
<img class="popularCates--image"
src="https://cdn11.bigcommerce.com/s-c1k2lp2lqc/images/stencil/original/image-manager/halo-popular-category-6.jpg"
alt="#Accessories">
</figure>
<div class="popularCates--body">
<h4 class="title">
<a href="#" aria-label="#Accessories">#Accessories</a>
</h4>
<p class="description">
Put tough to the test, designed to meet and exceed your standards.
</p>
</div>
<a href="#" aria-label="#Accessories"></a>
</article>
</div>
</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