> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/spark-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/spark-documentation/home-automotive/popular-categories.md).

# Popular Categories

<figure><img src="https://2423552505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX4JkZvOCSAYjkvfpZuQ3%2Fuploads%2FNcm6MFrzEGqoTLTnmarh%2Fimage.png?alt=media&amp;token=2ebaffee-8699-462c-885c-2bc0a3849896" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
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.
{% 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%2FqcGzSsjJkeoOy92mKnQ7%2Fimage.png?alt=media&amp;token=8c2d86ed-4cf6-432d-9efd-e5753fcbf39f" 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%2FO2go3sC3THe6jaF9IFte%2Fimage.png?alt=media&amp;token=512c2085-2cef-4162-b694-43baf5fb4395" 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="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.

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

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