Recommended Banner Size: 585x250px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
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:
When you are happy with your changes, don't forget click Save HTML and Publish to repackage the edited theme.
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.
