Popular Categories

Recommended Banner Size: 370x270px and 770x270px. 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" 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.

Please click the "Run Pen" button to be used