Featured Categories

To show Featured 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="featuredCates" data-halo-load="animation">
<div class="container">
<div class="featuredCates--heading pos-relative text-center halo-fadeInUp" data-halo-animate="1">
<h3 class="page-heading">Featured Categories</h3>
<a href="#" class="halo-link" aria-label="Browse All">Browse All</a>
</div>
<div class="c-3">
<div class="featuredCates--carousel" data-row="1" data-halo-load="init-carousel">
<div class="item">
<article class="featuredCates--card halo-fadeInUp" data-halo-animate="1">
<figure class="featuredCates--figure">
<img class="featuredCates--image"
src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-featured-1.jpg"
alt="Headlights">
</figure>
<div class="featuredCates--body">
<h4 class="title">Headlights</h4>
<div class="description">
<p>Full beam headlights</p>
<svg>
<title>Headlights</title>
<desc>Headlights</desc>
<use xlink:href="#icon-chevron-right" />
</svg>
</div>
</div>
<a href="#" aria-label="Headlights"></a>
</article>
<article class="featuredCates--card halo-fadeInUp" data-halo-animate="1">
<figure class="featuredCates--figure">
<img class="featuredCates--image"
src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-featured-2.jpg"
alt="Body Kits">
</figure>
<div class="featuredCates--body">
<h4 class="title">Body Kits</h4>
<div class="description">
<p>Looking for car, truck, and SUV</p>
<svg>
<title>Body Kits</title>
<desc>Body Kits</desc>
<use xlink:href="#icon-chevron-right" />
</svg>
</div>
</div>
<a href="#" aria-label="Body Kits"></a>
</article>
</div>
<div class="item">
<article class="featuredCates--card halo-fadeInUp" data-halo-animate="2">
<figure class="featuredCates--figure">
<img class="featuredCates--image"
src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-featured-3.jpg"
alt="Brakes">
</figure>
<div class="featuredCates--body">
<h4 class="title">Brakes</h4>
<div class="description">
<p>Just lightly press the brake</p>
<svg>
<title>Brakes</title>
<desc>Brakes</desc>
<use xlink:href="#icon-chevron-right" />
</svg>
</div>
</div>
<a href="#" aria-label="Brakes"></a>
</article>
<article class="featuredCates--card halo-fadeInUp" data-halo-animate="2">
<figure class="featuredCates--figure">
<img class="featuredCates--image"
src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-featured-4.jpg"
alt="Wheels & Rims">
</figure>
<div class="featuredCates--body">
<h4 class="title">Wheels & Rims</h4>
<div class="description">
<p>Energy saving</p>
<svg>
<title>Wheels & Rims</title>
<desc>Wheels & Rims</desc>
<use xlink:href="#icon-chevron-right" />
</svg>
</div>
</div>
<a href="#" aria-label="Wheels & Rims"></a>
</article>
</div>
<div class="item">
<article class="featuredCates--card halo-fadeInUp" data-halo-animate="3">
<figure class="featuredCates--figure">
<img class="featuredCates--image"
src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-featured-5.jpg"
alt="Seat Covers">
</figure>
<div class="featuredCates--body">
<h4 class="title">Seat Covers</h4>
<div class="description">
<p>High-grade waterproof</p>
<svg>
<title>Seat Covers</title>
<desc>Seat Covers</desc>
<use xlink:href="#icon-chevron-right" />
</svg>
</div>
</div>
<a href="#" aria-label="Seat Covers"></a>
</article>
<article class="featuredCates--card halo-fadeInUp" data-halo-animate="3">
<figure class="featuredCates--figure">
<img class="featuredCates--image"
src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-featured-6.jpg"
alt="Tail Lights">
</figure>
<div class="featuredCates--body">
<h4 class="title">Tail Lights</h4>
<div class="description">
<p>Very bright in the night</p>
<svg>
<title>Tail Lights</title>
<desc>Tail Lights</desc>
<use xlink:href="#icon-chevron-right" />
</svg>
</div>
</div>
<a href="#" aria-label="Tail Lights"></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