> For the complete documentation index, see [llms.txt](https://knowledge.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://knowledge.themeware.design/knowledge-base/introduction/adapting-the-design-of-the-category-page.md).

# Adapting the design of the category page

Category pages (listing pages) show your products in a listing. ThemeWare® gives you extensive options to adapt their design, from the number of columns to the content of every product box.

## Step 1: Select the layout type

The layout type of the product boxes is defined in the Shopping Experience of the category page.

1. Open the administration of your shop
2. Switch via the main navigation to "**Content**" => "**Shopping Experiences**"
3. Open the layout of your category page (layout type "**Listing page**")
4. Select the element "**Product listing**"
5. Select the "**Layout type**" of the product boxes:
   * "**Standard**"
   * "**Big image**"
   * "**Minimal content**"
6. Save the layout

{% hint style="info" %}
**Note**: The selected layout type defines which ThemeWare® configuration block applies to the product boxes.
{% endhint %}

## Step 2: Define the number of columns

1. Switch via the main navigation to the "**theme administration**" ("Content" => "Themes")
   * **Note**: In the Shopware Cloud you will find the "Themes" area directly in the main navigation.
2. Now click on your ThemeWare® theme to start editing
3. Switch to the tab "**Listing pages**"
4. Open the block that matches your layout type:
   * "**Layout (Layout type 'Standard')**"
   * "**Layout (Layout type 'Big image')**"
   * "**Layout (Layout type 'Minimal content')**"
5. In the section "**Columns per row**" you define the number of products per row for every viewport
6. In the section "**Columns per row (with Sidebar)**" you do the same for pages with a sidebar

## Step 3: Adapt the product box

* Tab "**Listing pages**" => Block "**Product box**"

In the section "**Basic configuration**" you will find among others:

* "**Layout type**": "Border colour (default)" or "Drop shadow"
* "**Hover effect**"
* "**Text alignment**"
* "**Compact product box**"

In the section "**Content**" you define which information is displayed, for example "**Show product description**", "**Show manufacturer**", "**Show product number**", "**Show variant characteristics**", "**Show price unit**" or "**Show list price**".

The sections "**Colour configuration**" and "**Typography**" contain the colours and fonts of the product box.

## Step 4: Configure the product badges

* Tab "**Listing pages**" => Block "**Product badges (in the product box)**"

## Step 5: Save and check

1. Save the theme configuration
2. Switch to the storefront and reload the page

***

## Further information

* Introduction: [Understanding Shopping Experiences](/knowledge-base/introduction/understanding-shopping-experiences.md)
* Introduction: [Configuring the shop navigation](/knowledge-base/introduction/configuring-the-shop-navigation.md)