# Popular Categories 1

<figure><img src="https://2423552505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX4JkZvOCSAYjkvfpZuQ3%2Fuploads%2FRUkOEjbbWq8pidwcxssa%2Fimage.png?alt=media&#x26;token=1ee06624-5658-4554-b31c-a45fd91b49f4" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Recommended Banner Size: **380x320px** and 7**90x320px**. 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 1** 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%2FhN3D30QTsCStXx9VjZ40%2Fimage.png?alt=media&#x26;token=baa9019e-f611-48d3-9335-1a3fafd647ff" 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%2FbIRxp65dhSxHzamxF0z2%2Fimage.png?alt=media&#x26;token=c200c38a-8d09-43b5-a95f-3ee5859c2508" 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 halo-bgGray" id="popularCates" data-halo-load="animation">
    <div class="container ">
        <div class="c-2">
            <div class="item w-30">
                <article class="popularCates--card halo-fadeInUp" data-halo-animate="1">
                    <figure class="popularCates--figure">
                        <img class="popularCates--image"
                            src="https://cdn11.bigcommerce.com/s-4pwi31bh7d/images/stencil/original/image-manager/halo-popular-category-1.jpg"
                            alt="Hand Tools">
                    </figure>
                    <div class="popularCates--body">
                        <div class="content-wrapper">
                            <h4 class="title">
                                <a href="#">Powerful Off-Road</a>
                            </h4>
                            <p class="description">
                                Discount Upto 50% From HJC
                            </p>
                        </div>
                        <a class="button button--primary" href="#" aria-label="Shop Now"><span>Shop Now</span></a>
                    </div>
                </article>
            </div>
            <div class="item w-30">
                <article class="popularCates--card halo-fadeInUp" data-halo-animate="2">
                    <figure class="popularCates--figure">
                        <img class="popularCates--image"
                            src="https://cdn11.bigcommerce.com/s-4pwi31bh7d/images/stencil/original/image-manager/halo-popular-category-2.jpg"
                            alt="Classic Style">
                    </figure>
                    <div class="popularCates--body">
                        <div class="content-wrapper">
                            <h4 class="title">
                                <a href="#">Classic Style</a>
                            </h4>
                            <p class="description">
                                Discover Top 10 Classical Brands 
                            </p>
                        </div>
                        <a class="button button--primary" href="#" aria-label="Shop Now"><span>Shop Now</span></a>
                    </div>
                </article>
            </div>
            <div class="item w-30">
                <article class="popularCates--card halo-fadeInUp" data-halo-animate="3">
                    <figure class="popularCates--figure">
                        <img class="popularCates--image"
                            src="https://cdn11.bigcommerce.com/s-4pwi31bh7d/images/stencil/original/image-manager/halo-popular-category-3.jpg"
                            alt="Custom Gears">
                    </figure>
                    <div class="popularCates--body">
                        <div class="content-wrapper">
                            <h4 class="title">
                                <a href="#">Custom Gears</a>
                            </h4>
                            <p class="description">
                                Discover Best Deals For Bikers
                            </p>
                        </div>
                        <a class="button button--primary" href="#" aria-label="Shop Now"><span>Shop Now</span></a>
                    </div>
                </article>
            </div>
            <div class="item p-t w-70">
                <article class="popularCates--card halo-fadeInUp" data-halo-animate="4">
                    <figure class="popularCates--figure">
                        <img class="popularCates--image"
                            src="https://cdn11.bigcommerce.com/s-4pwi31bh7d/images/stencil/original/image-manager/halo-popular-category-4.jpg"
                            alt="Full Gears Ninja H2">
                    </figure>
                    <div class="popularCates--body">
                        <div class="content-wrapper">
                            <h4 class="title">
                                <a href="#">Full Gears Ninja H2</a>
                            </h4>
                            <p class="description">
                                Gears for 2022 Best Hypersport Bike
                            </p>
                        </div>
                        <a class="button button--primary" href="#" aria-label="Shop Now"><span>Shop Now</span></a>
                    </div>
                </article>
            </div>
            <div class="item p-t w-30">
                <article class="popularCates--card halo-fadeInUp" data-halo-animate="5">
                    <figure class="popularCates--figure">
                        <img class="popularCates--image"
                            src="https://cdn11.bigcommerce.com/s-4pwi31bh7d/images/stencil/original/image-manager/halo-popular-category-5.jpg"
                            alt="Recreation">
                    </figure>
                    <div class="popularCates--body">
                        <div class="content-wrapper">
                            <h4 class="title">
                                <a href="#">Recreation</a>
                            </h4>
                            <p class="description">
                                Update Lastest Version
                            </p>
                        </div>
                        <a class="button button--primary" href="#" aria-label="Shop Now"><span>Shop Now</span></a>
                    </div>
                </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.

{% embed url="https://codepen.io/HaloThemes/pen/ExOPwKj" %}

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