> 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-tools/popular-categories.md).

# Popular Categories

<figure><img src="/files/rQxPpCswjw3mtPO4hk5m" 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="/files/uy8fp5luK4hSOXFCDQ1d" alt=""><figcaption></figcaption></figure>

In field **HTML block**:

<figure><img src="/files/ie3L7C2XLBBfY18c1Cpv" 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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://halosoft.gitbook.io/spark-documentation/home-tools/popular-categories.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.