---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/build-brand-pages-and-a-brand-overview"
locale: en
meta:
"og:title": "Academy Article"
---
[Go to home](https://academy.laioutr.com/en)
- [Storefront features](https://academy.laioutr.com/en/bereiche/storefront-features)
- [Products and categories](https://academy.laioutr.com/en/leitfaeden/products-and-categories)
- [Build brand pages and a brand overview](https://academy.laioutr.com/en/artikel/build-brand-pages-and-a-brand-overview)
# Build brand pages and a brand overview
The brand overview lists all brands grouped alphabetically with a link to each brand page; a brand page shows a Brand Hero with logo and description, followed by all products of the brand with filters. Brands and product assignment come from the commerce backend.
## Before you start
- Plan
- Laioutr Commerce plan
- Role
- Editor or Admin in the project
- Duration
- 6 min
### Prerequisites
- Commerce app installed and connected
- Brands maintained in the backend and assigned to products
Last reviewed on October 15, 2026
Brand pages help shoppers who look for a specific manufacturer. Laioutr UI provides two kinds of pages for this.
The **brand overview** uses the **Alphabetical Index**: it sorts all brands according to the market language, groups them by first letter and shows each brand as a link, optionally with its product count. A logo slider with top brands can sit above it, and a free content area below.
The **brand page** starts with the **Brand Hero**: background image, brand name, optional description and optional logo. The colour mode (on-dark, on-light, plain) keeps the text readable on light or dark images or without an image. Below follow the Filter Bar, Product Listing Grid and Load More as on a category page, then room for an SEO text about the brand.
Which brands exist and which products belong to a brand is delivered by the commerce app through Orchestr. Logos and descriptions are maintained in Studio or in the backend, depending on what the app provides.
## Step by step
1. 1 ### Step 1: Open the brand overview
In **Studio**, select the brand overview page or create a new page for it.
2. 2 ### Step 2: Insert the brand index
Add an **Alphabetical Index** section and set a heading. Optionally insert a logo slider with top brands above it.
3. 3 ### Step 3: Open the brand page
Select the brand page in the page list and choose a brand with many products under **Preview Data**.
4. 4 ### Step 4: Design the Brand Hero
Select the Brand Hero and set background image, description and logo. Choose the colour mode that fits the image: on-dark, on-light or plain without an image.
5. 5 ### Step 5: Add the product listing and SEO text
Check the Filter Bar and Product Listing Grid below the hero. Insert a text section with information about the brand below the listing.
6. 6 ### Step 6: Save and publish
Save with **Save** and publish with **Publish**.
## Check the result
Open the brand overview in the storefront, click a brand in the index and check that the brand page shows only products of that brand and that filters and sorting work.
## Frequently asked questions
Where does the list of brands come from?
From the connected backend through the commerce app. A brand only appears if it is maintained there and the app provides brand data.
How are brands with numbers or special characters sorted?
The index sorts according to the market language and groups by the first character. Entries that do not start with a letter end up in a separate group outside A to Z.
Can each brand get its own text?
Yes. The description in the Brand Hero and the SEO text below the listing can be maintained per brand, as long as the content is stored per brand. Where this content lives depends on the project setup.
## Related
- [Set up product listings with filters and sorting](https://academy.laioutr.com/en/artikel/set-up-product-listings-with-filters-and-sorting)6 min
A product listing is built in Studio from the Product Listing Grid, the Filter Bar and the sort selector; products, filters and sort options come from the connected commerce app through Orchestr. Which filters appear depends on what the backend provides.
- [Content sections: hero, banners, grids, quotes, logos and promotion](https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos)8 min
Laioutr UI ships ready-made content sections such as Hero Slider, CTA banners, card grids, testimonials, USP Banner, Logo Slider, gallery and Promotion Banner. Editors place them in Studio, fill them with their own content and adjust size, alignment and background.
- [Create pages and variants from page types](https://academy.laioutr.com/en/artikel/create-pages-and-variants-from-page-types)6 min
Every page in Studio is based on a page type such as Home, Product Detail or Landing Page. When adding a page, the team picks the type, checks name and URL path, and adds further variants of the same page when needed.
- [SEO basics before launch](https://academy.laioutr.com/en/artikel/seo-basics-before-launch)10 min
Before going live, every important page needs a meta title, a description and the right robots value, the organisation belongs in the structured data, and old URLs redirect to new ones. The team then checks robots.txt, sitemap and rich results on the live domain.
## [Products and categories](https://academy.laioutr.com/en/leitfaeden/products-and-categories)
Search this guide
1. [Set up product listings with filters and sorting](https://academy.laioutr.com/en/artikel/set-up-product-listings-with-filters-and-sorting)6 min
2. [Design the product detail page and spec sheet](https://academy.laioutr.com/en/artikel/design-the-product-detail-page-and-spec-sheet)7 min
3. [Use product tiles and product sliders](https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders)5 min
4. [Build brand pages and a brand overview](https://academy.laioutr.com/en/artikel/build-brand-pages-and-a-brand-overview)6 min
5. [Set up search and the search results page](https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page)6 min
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "en",
"name": "Default",
"url": "https://academy.laioutr.com/",
"translationOfWork": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/build-brand-pages-and-a-brand-overview#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/en/artikel/build-brand-pages-and-a-brand-overview",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/artikel/build-brand-pages-and-a-brand-overview#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/artikel/build-brand-pages-and-a-brand-overview#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/artikel/build-brand-pages-and-a-brand-overview#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/artikel/build-brand-pages-and-a-brand-overview#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/artikel/build-brand-pages-and-a-brand-overview"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/build-brand-pages-and-a-brand-overview#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/en",
"position": 1
},
{
"@type": "ListItem",
"name": "Storefront features",
"item": "https://academy.laioutr.com/en/bereiche/storefront-features",
"position": 2
},
{
"@type": "ListItem",
"name": "Products and categories",
"item": "https://academy.laioutr.com/en/leitfaeden/products-and-categories",
"position": 3
},
{
"@type": "ListItem",
"name": "Build brand pages and a brand overview",
"item": "https://academy.laioutr.com/en/artikel/build-brand-pages-and-a-brand-overview",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/build-brand-pages-and-a-brand-overview#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "Where does the list of brands come from?",
"acceptedAnswer": {
"@type": "Answer",
"text": "From the connected backend through the commerce app. A brand only appears if it is maintained there and the app provides brand data.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/build-brand-pages-and-a-brand-overview#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "How are brands with numbers or special characters sorted?",
"acceptedAnswer": {
"@type": "Answer",
"text": "The index sorts according to the market language and groups by the first character. Entries that do not start with a letter end up in a separate group outside A to Z.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/build-brand-pages-and-a-brand-overview#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "Can each brand get its own text?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. The description in the Brand Hero and the SEO text below the listing can be maintained per brand, as long as the content is stored per brand. Where this content lives depends on the project setup.
"
}
}
]
}
```