---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/markenseiten-und-markenuebersicht-aufbauen"
locale: de
meta:
"og:title": "Academy Article"
---
[Zur Startseite](https://academy.laioutr.com/)
- [Storefront-Funktionen](https://academy.laioutr.com/bereiche/storefront-funktionen)
- [Produkte und Kategorien](https://academy.laioutr.com/leitfaeden/produkte-und-kategorien)
- [Markenseiten und Markenübersicht aufbauen](https://academy.laioutr.com/artikel/markenseiten-und-markenuebersicht-aufbauen)
# Markenseiten und Markenübersicht aufbauen
Die Markenübersicht listet alle Marken alphabetisch gruppiert mit Link zur jeweiligen Markenseite; die Markenseite zeigt einen Brand Hero mit Logo und Beschreibung, darunter alle Produkte der Marke mit Filter. Marken und Produktzuordnung kommen aus dem Commerce-Backend.
## Bevor du startest
- Tarif
- Laioutr-Commerce-Plan
- Rolle
- Editor oder Admin im Projekt
- Dauer
- 6 Min.
### Voraussetzungen
- Commerce-App installiert und verbunden
- Marken im Backend gepflegt und Produkten zugeordnet
Zuletzt geprüft am 15. Oktober 2026
Markenseiten helfen Kundinnen und Kunden, die gezielt nach einem Hersteller suchen. Laioutr UI bringt dafür zwei Seitenarten mit.
Die **Markenübersicht** nutzt den **Alphabetical Index**: Er sortiert alle Marken nach der Sprache des Markts, gruppiert sie nach Anfangsbuchstaben und zeigt jede Marke als Link, optional mit der Anzahl ihrer Produkte. Darüber kann ein Logo-Slider mit Top-Marken stehen, darunter ein freier Inhaltsbereich.
Die **Markenseite** beginnt mit dem **Brand Hero**: Hintergrundbild, Markenname, optionale Beschreibung und optionales Logo. Der Farbmodus (on-dark, on-light, plain) sorgt dafür, dass Text auf hellen und dunklen Bildern oder ganz ohne Bild lesbar bleibt. Darunter folgen Filter Bar, Product Listing Grid und Load More wie auf einer Kategorieseite, danach Platz für einen SEO-Text über die Marke.
Welche Marken existieren und welche Produkte zu einer Marke gehören, liefert die Commerce-App über Orchestr. Logos und Beschreibungen werden in Studio oder im Backend gepflegt, je nachdem, was die App bereitstellt.
## Schritt für Schritt
1. 1 ### Schritt 1: Markenübersicht öffnen
In **Studio** die Seite der Markenübersicht wählen oder eine neue Seite dafür anlegen.
2. 2 ### Schritt 2: Markenverzeichnis einfügen
Eine Section **Alphabetical Index** hinzufügen und eine Überschrift setzen. Optional darüber einen Logo-Slider mit Top-Marken einfügen.
3. 3 ### Schritt 3: Markenseite öffnen
Die Markenseite in der Seitenliste wählen und unter **Preview Data** eine Marke mit vielen Produkten auswählen.
4. 4 ### Schritt 4: Brand Hero gestalten
Den Brand Hero auswählen und Hintergrundbild, Beschreibung und Logo pflegen. Den Farbmodus passend zum Bild wählen: on-dark, on-light oder plain ohne Bild.
5. 5 ### Schritt 5: Produktliste und SEO-Text ergänzen
Unter dem Hero Filter Bar und Product Listing Grid prüfen. Unterhalb der Liste einen Textbereich mit Informationen über die Marke einfügen.
6. 6 ### Schritt 6: Speichern und veröffentlichen
Mit **Save** speichern und mit **Publish** veröffentlichen.
## Ergebnis prüfen
In der Storefront die Markenübersicht öffnen, eine Marke im Verzeichnis anklicken und prüfen, ob die Markenseite nur Produkte dieser Marke zeigt und Filter und Sortierung funktionieren.
## Häufige Fragen
Woher kommt die Liste der Marken?
Aus dem angebundenen Backend über die Commerce-App. Eine Marke erscheint nur, wenn sie dort gepflegt ist und die App Markendaten bereitstellt.
Wie werden Marken mit Zahlen oder Sonderzeichen einsortiert?
Das Verzeichnis sortiert nach der Sprache des Markts und gruppiert nach dem ersten Zeichen. Einträge, die nicht mit einem Buchstaben beginnen, landen in einer eigenen Gruppe außerhalb von A bis Z.
Kann jede Marke einen eigenen Text bekommen?
Ja. Beschreibung im Brand Hero und der SEO-Text unter der Produktliste lassen sich je Marke pflegen, sofern die Inhalte je Marke hinterlegt werden. Wo diese Inhalte liegen, hängt vom Projekt-Setup ab.
## Passend dazu
- [Produktlisten mit Filter und Sortierung einrichten](https://academy.laioutr.com/artikel/produktlisten-mit-filter-und-sortierung-einrichten)6 Min.
Eine Produktliste entsteht in Studio aus Product Listing Grid, Filter Bar und Sortierung; Produkte, Filter und Sortieroptionen liefert die angebundene Commerce-App über Orchestr. Welche Filter erscheinen, hängt davon ab, was das Backend bereitstellt.
- [Inhalts-Sections: Hero, Banner, Grids, Zitate, Logos und Promotion](https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos)8 Min.
Laioutr UI bringt fertige Inhalts-Sections wie Hero Slider, CTA-Banner, Card Grids, Testimonials, USP Banner, Logo Slider, Galerie und Promotion Banner mit. Redaktionen platzieren sie in Studio, füllen sie mit eigenen Inhalten und passen Größe, Ausrichtung und Hintergrund an.
- [Seiten und Varianten aus Seitentypen anlegen](https://academy.laioutr.com/artikel/seiten-und-varianten-aus-seitentypen-anlegen)6 Min.
Jede Seite in Studio basiert auf einem Seitentyp wie Home, Produktdetail oder Landing Page. Das Team wählt beim Anlegen den Typ, prüft Name und URL-Pfad und legt bei Bedarf weitere Varianten derselben Seite an.
- [SEO-Grundlagen vor dem Start](https://academy.laioutr.com/artikel/seo-grundlagen-vor-dem-start)10 Min.
Vor dem Live-Gang braucht jede wichtige Seite Meta-Titel, Beschreibung und den passenden Robots-Wert, die Organisation gehört in die strukturierten Daten, und alte URLs leiten auf neue weiter. Danach prüft das Team robots.txt, Sitemap und Rich Results auf der Live-Domain.
## [Produkte und Kategorien](https://academy.laioutr.com/leitfaeden/produkte-und-kategorien)
In diesem Leitfaden suchen
1. [Produktlisten mit Filter und Sortierung einrichten](https://academy.laioutr.com/artikel/produktlisten-mit-filter-und-sortierung-einrichten)6 Min.
2. [Produktdetailseite und Datenblatt gestalten](https://academy.laioutr.com/artikel/produktdetailseite-und-datenblatt-gestalten)7 Min.
3. [Produktkacheln und Produktslider einsetzen](https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen)5 Min.
4. [Markenseiten und Markenübersicht aufbauen](https://academy.laioutr.com/artikel/markenseiten-und-markenuebersicht-aufbauen)6 Min.
5. [Suche und Suchergebnisseite einrichten](https://academy.laioutr.com/artikel/suche-und-suchergebnisseite-einrichten)6 Min.
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "de",
"name": "Default",
"url": "https://academy.laioutr.com/",
"workTranslation": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/artikel/markenseiten-und-markenuebersicht-aufbauen#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/artikel/markenseiten-und-markenuebersicht-aufbauen",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/artikel/markenseiten-und-markenuebersicht-aufbauen#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/artikel/markenseiten-und-markenuebersicht-aufbauen#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/artikel/markenseiten-und-markenuebersicht-aufbauen#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/artikel/markenseiten-und-markenuebersicht-aufbauen#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/artikel/markenseiten-und-markenuebersicht-aufbauen"
]
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/markenseiten-und-markenuebersicht-aufbauen#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/",
"position": 1
},
{
"@type": "ListItem",
"name": "Storefront-Funktionen",
"item": "https://academy.laioutr.com/bereiche/storefront-funktionen",
"position": 2
},
{
"@type": "ListItem",
"name": "Produkte und Kategorien",
"item": "https://academy.laioutr.com/leitfaeden/produkte-und-kategorien",
"position": 3
},
{
"@type": "ListItem",
"name": "Markenseiten und Markenübersicht aufbauen",
"item": "https://academy.laioutr.com/artikel/markenseiten-und-markenuebersicht-aufbauen",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/markenseiten-und-markenuebersicht-aufbauen#/schema/question/1",
"@type": "Question",
"inLanguage": "de",
"name": "Woher kommt die Liste der Marken?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Aus dem angebundenen Backend über die Commerce-App. Eine Marke erscheint nur, wenn sie dort gepflegt ist und die App Markendaten bereitstellt.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/markenseiten-und-markenuebersicht-aufbauen#/schema/question/2",
"@type": "Question",
"inLanguage": "de",
"name": "Wie werden Marken mit Zahlen oder Sonderzeichen einsortiert?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Das Verzeichnis sortiert nach der Sprache des Markts und gruppiert nach dem ersten Zeichen. Einträge, die nicht mit einem Buchstaben beginnen, landen in einer eigenen Gruppe außerhalb von A bis Z.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/markenseiten-und-markenuebersicht-aufbauen#/schema/question/3",
"@type": "Question",
"inLanguage": "de",
"name": "Kann jede Marke einen eigenen Text bekommen?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Ja. Beschreibung im Brand Hero und der SEO-Text unter der Produktliste lassen sich je Marke pflegen, sofern die Inhalte je Marke hinterlegt werden. Wo diese Inhalte liegen, hängt vom Projekt-Setup ab.
"
}
}
]
}
```