> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-7-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/ella-7-documentation/sections-and-blocks/product-list-category.md).

# Product list: Category

The Product list: Category section shows a category list next to a product carousel. Customers pick a category to switch the products without leaving the page.

Layout settings match Custom Section (alignment, width, height, background, overlay, padding). Unique content comes from the default blocks.

### There are 2 ways to add a Section to your store

#### 1. Add a pre-made section from our demo?

Read the instructions here

#### 2. Add the Product list: Category section manually?

* From your Shopify admin, go to Online Store -> Themes.
* Find the theme that you want to edit, and then click Customize.
* In the Templates -> Add section -> choose **Product list: Category**.

### Product list: Category - Settings Guide

#### Layout & size

| Setting       | Type   | Default    | Description                                           | Visibility            |
| ------------- | ------ | ---------- | ----------------------------------------------------- | --------------------- |
| Alignment     | Select | Center     | Horizontal alignment of section content.              | Always                |
| Position      | Select | Center     | Vertical alignment of section content.                | Always                |
| Gap           | Range  | 12px       | Space between child blocks (0–100px).                 | Always                |
| Width         | Select | Page width | Page width / Full width / Custom.                     | Always                |
| Page width    | Range  | 1570px     | Custom container width (1000–2000px).                 | When width is Custom  |
| Height        | Select | Auto       | Auto / Small / Medium / Large / Full screen / Custom. | Always                |
| Custom height | Range  | 50%        | Custom section height.                                | When height is Custom |

#### Appearance & padding

Same as Custom Section: color scheme, background image/video, overlay, borders, and padding. See Custom Section for the full table.

### Default blocks

The preset includes:

1. **Image** — optional side image (about 31% width on desktop).
2. **Group: Basic**
   * **Product grid** — carousel of products from the selected collection (default 3 products, 3 columns, arrows).
3. **Categories list** — category items that switch the product grid.
   * Category item (repeat)
   * Category view all

To customize:

* Select a collection on the Product grid block.
* Add or edit Category items (title, collection, image).
* Reorder Image / Product grid / Categories list to change the layout.

### Need More Help?

If you experience any difficulties or require extra support with your Ella theme, feel free to contact our support team through our Ticket System — we’ll get back to you within 24 hours.

Simply scan the QR code below to join our Facebook community and stay updated with the latest news, tips, and announcements.

Join HaloThemes Community