---
description: Updated on February 17, 2022  Bluesky Team
---

# Category Thumbnail

### Overview

Blueskytechco Page Builder provides a lot of functions for creating content by dragging-and-dropping pre-built controls.\
One of them is Category Thumbnail Module. It is also a module for displaying categories, but this makes it available in many different templates, with many different customizations. The following information will guide you how to work with Page Builder - Category Thumbnail.

### Introduction to PageBuilder - [Category Thumbnail](../../frequently-asked-questions/categories/magento-2.-how-to-set-the-category-thumbnail-image)

Learn how you can create [**Category Thumbnail**](../../frequently-asked-questions/categories/magento-2.-how-to-set-the-category-thumbnail-image) with PageBuilder :

{% embed url="https://youtu.be/XhcBqR0DM80" %}



### How to Configure

#### 1. Appearance

![](https://blueskytechmage.com/kalles/pub/documentation/images/ADCategoryThumbnailAppearance.png)

There are two appearance types: Grid/List and Carousel. Select **Grid/List** if you want to show categories by Grid or List, select **Carousel** if you want to show categories by Carousel.

![](https://blueskytechmage.com/kalles/pub/documentation/images/AppearanceType.png)

* **Carousel**

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FsP3RJW3wnuuv8NpOSEfq%2Fcate-thumb.jpg?alt=media\&token=ce384f81-2715-4b8e-a6cb-84001254a08d)



*   **Grid/List**



![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2F0u9z3S5rJmXHpe8XAojz%2Fthumb-grid.jpg?alt=media\&token=54493b0f-1cdb-41ff-9d09-d018f2235d17)

#### a. Grid/List

*   There are 6 Grid or List templates of category thumbnail.



![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2Fcg9SBqvmYKfgAXcWutPN%2FcateThumbTemplateGrid.png?alt=media\&token=808bbdb4-5ac8-4193-a995-7d0872c07255)

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FByrsC6ff07GGLWAhplCy%2FcateThumbSetting.png?alt=media\&token=a6178ffb-7bce-4d37-9855-04d3568351af)

* In the **Categories** field: Add the Categories which you want to show in Category Thumbnail. \*
* In the **Title** field: Specify title you want to display on the frontend. You can leave it blank if necessary.
* In the **Short description** field: Specify short description you want to display on the frontend. You can leave it blank if necessary.
* In the **Space Between Item** field: Setup Space between Collections.

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FHz5It4SvhgeyswINRanv%2FcateThumbSpaceBetween.png?alt=media\&token=198ca65e-dd50-4f5b-816f-c0ed7cfbd629)

*   In the **Image Hover Effects** field: Specify CSS Image Hover Effects.



![](https://blueskytechmage.com/kalles/pub/documentation/images/cateThumbHover.png)

#### b. Carousel

* There are 5 Carousel templates of category thumbnail.

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FaZWo89aOCq2K0VRUec40%2FcateThumbTemplateCarousel.png?alt=media\&token=1992c9d8-737e-4d43-acde-ab15b48825e7)

![](https://blueskytechmage.com/kalles/pub/documentation/images/cateThumbSetting.png)

* In the **Categories** field: Add the Categories which you want to show in Category Thumbnail. \*
* In the **Title** field: Specify title you want to display on the frontend. You can leave it blank if necessary.
* In the **Short description** field: Specify short description you want to display on the frontend. You can leave it blank if necessary.
* In the **Image Hover Effects** field: Specify CSS Image Hover Effects.

![](https://blueskytechmage.com/kalles/pub/documentation/images/cateThumbHover.png)

* In the **Width Images** field: Please specify width attributes for images you want to display on the frontend. You can leave it blank if use default.
* In the **Height Images** field: Please specify height attributes for images you want to display on the frontend. You can leave it blank if use default.

Copyright © 2022 [Blueskytechco.com](https://blueskytechco.com/). All Rights Reserved.
