# Popular Categories

<figure><img src="https://2423552505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX4JkZvOCSAYjkvfpZuQ3%2Fuploads%2FBBRaR9FdieZlaS0WGNua%2Fimage.png?alt=media&#x26;token=c2820e3b-baef-4bfd-bb79-5d4d20eca9d1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
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.
{% endhint %}

To show **Popular Categories** on Home page, In the Page Builder -> Go to **Widgets** -> drag and drop **HTML block** into specified sections.

<figure><img src="https://2423552505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX4JkZvOCSAYjkvfpZuQ3%2Fuploads%2FUZPFhwNrinB7WkJBLga0%2Fimage.png?alt=media&#x26;token=6459663d-9727-4dcd-82a8-a4a73200d878" alt=""><figcaption></figcaption></figure>

In field **HTML block**:

<figure><img src="https://2423552505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX4JkZvOCSAYjkvfpZuQ3%2Fuploads%2FRQbfaCmEawbvF1mGaAOJ%2Fimage.png?alt=media&#x26;token=29d787b7-c2ce-4ad0-9757-77aa6194b66b" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
When you are happy with your changes, don't forget click **Save HTML** and **Publish** to repackage the edited theme.
{% endhint %}

After that, input sample content below:

```html
<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.

{% embed url="<https://codepen.io/HaloThemes/pen/RwqrpQR>" %}

{% hint style="info" %}
Please click the "Run Pen" button to be used
{% endhint %}