Diese Seite bietet eine umfassende Übersicht über die sofort verfügbaren CMS-Komponenten in der Storefront-Anwendung für Ihren gewählten Anbieter (Contentful oder Storyblok). Diese Komponenten sind als flexible Bausteine konzipiert und ermöglichen es Ihnen, dynamische und ansprechende Inhaltsseiten ohne das Schreiben von Code zu erstellen.

Kern-Inhaltsprimitive

Dies sind die grundlegendsten, atomaren Komponenten zur Erstellung einfacher Inhalte.

Text

Zweck: Die einfachste Möglichkeit, eine Textzeichenkette hinzuzufügen. Sie können wählen, ob der Text als Absatz oder als Überschrift dargestellt werden soll, um eine klare typografische Hierarchie zu schaffen.
Konfigurierbare Eigenschaften: Content (Text), Text type (Dropdown).
Anwendungsbeispiel: Diese Komponente ist die Grundlage für alle textbasierten Inhalte, von Produktbeschreibungen bis hin zu Überschriften.

Beispiele

Text, Typ Paragraph (Standard)

Text, Typ h1

Text, Typ h2

Text, Typ h3

Text, Typ h4

Link

Zweck: Ein einfacher, anklickbarer Link, der Benutzer zu anderen Seiten oder externen Websites leitet.
Konfigurierbare Eigenschaften: URL (Text), Open in a new tab (yes/no), Content (Text/Image).
Anwendungsbeispiel: Kann als eigenständiger Link oder eingebettet in andere Komponenten verwendet werden.

Beispiele

Dies ist ein Bildlink (öffnet im gleichen Tab)

Dies ist ein Textlink (öffnet in einem neuen Tab)

Bild

Zweck: Ein eigenständiges Bild anzeigen. Diese Komponente ist auf Performance ausgelegt und unterstützt responsive Bilder und verschiedene Seitenverhältnisse von Haus aus.
Konfigurierbare Eigenschaften: Image Desktop (Asset), Image Mobile (Asset), Alt Text (Text), Aspect Ratio Desktop / Aspect Ratio Mobile (Dropdown).
Anwendungsbeispiel: Verwendung für Produktfotos, Banner oder redaktionelle Inhalte.

Beispiele

Dies ist ein Bild mit dem Seitenverhältnis "Original"

Dies ist ein Bild mit dem Seitenverhältnis "1:1"

Dies ist ein Bild mit dem Seitenverhältnis "16:9"

Dies ist ein Bild mit dem Seitenverhältnis "4:3"

Video

Zweck: Ein Video einbetten. Diese Komponente handhabt automatisch die Wiedergabe und responsive Vorschau-Bilder (Preview Images) für eine reibungslose Benutzererfahrung.
Konfigurierbare Eigenschaften: Video (Asset), Preview Image Desktop / Preview Image Mobile (Asset), Aspect Ratio, Autoplay, Muted, Loop, Show Controls (toggles).
Anwendungsbeispiel: Produkte in Aktion zeigen oder ein Hero-Video auf einer Landingpage hinzufügen.

Beispiele

Dies ist ein Video mit dem Seitenverhältnis "16:9", Autoplay, stummgeschaltet, in Schleife, ohne Anzeige der Steuerelemente

Dies ist ein Video mit dem Seitenverhältnis "1:1", kein Autoplay, stummgeschaltet, nicht in Schleife, mit Anzeige der Steuerelemente

Dies ist ein Video mit dem Seitenverhältnis "4:3", kein Autoplay, nicht stummgeschaltet, in Schleife, mit Anzeige der Steuerelemente

Layout- und Strukturkomponenten

Diese Bausteine dienen zur Anordnung Ihrer Inhalte auf einer Seite.

Sektion

Zweck: Ein vielseitiger Container zum Gruppieren anderer Komponenten. Es ist die primäre Methode zur Definition unterschiedlicher, vollflächiger Inhaltszeilen mit einzigartigem Styling.
Konfigurierbare Eigenschaften: Background Color (Hex-Code), Background Image Desktop / Background Image Mobile (Asset), Padding (Dropdown), Content (Referenzfeld für verschachtelte Komponenten).
Anwendungsbeispiel: Verwenden Sie es, um eine neue Zeile für ein Aktionsbanner oder einen Hero-Bereich mit spezifischem Hintergrund zu erstellen.

Beispiele

Sektion mit einer Hintergrundfarbe, einem zweispaltigen Raster mit einem Bild auf der linken Seite und einer Überschrift, Beschreibung und einem CTA-Button auf der rechten Seite.

Fürs echte Leben gemacht

Komfort und Style, die mit jeder deiner Bewegungen mithalten.

Jetzt entdecken

Sektion mit einem Hintergrundbild, einer Beschreibung und einem CTA-Button auf der linken Seite.

Mehr über die neue Kollektion erfahren ->

Neue Kollektion

Raster

Zweck: Komponenten in einem responsiven, mehrspaltigen Layout anordnen. Dies ermöglicht die Erstellung strukturierter Inhaltsbereiche wie einer Produktgalerie oder einer Reihe von Teasern.
Konfigurierbare Eigenschaften: Number of columns for desktop (bis zu 6) / Number of columns for mobile (bis zu 3), Gap size between columns on desktop / Gap size between columns on mobile (Dropdown), Gap size between rows on desktop / Gap size between rows on mobile (Dropdown), Column content (Referenzfeld für verschachtelte Komponenten).
Anwendungsbeispiel: Verwenden Sie ein 3-spaltiges Raster, um drei Teaser-Karten nebeneinander auf einem Desktop anzuzeigen.

Beispiele

Entdecke eine neue Taschen-Kollektion

Mehr erfahren

Entdecke eine neue Sneaker-Kollektion

Mehr erfahren

Entdecke eine neue Hemden-Kollektion

Mehr erfahren

Entdecke eine neue Caps-Kollektion

Mehr erfahren

Trennlinie

Zweck: Die vertikale Distanz zwischen Komponenten steuern. Es kann auch verwendet werden, um eine einfache visuelle Trennlinie hinzuzufügen.
Konfigurierbare Eigenschaften: Height (Dropdown), Show Line (Toggle).
Anwendungsbeispiel: Fügen Sie einen Abstandshalter zwischen einem Hero-Banner und einem Produktraster ein, um die visuelle Hierarchie zu verbessern.

Beispiele

Trennlinie, klein, keine Linie

Trennlinie, mittel, mit Linie

Trennlinie, groß, mit Linie

Rich Content

Diese Komponenten bauen auf den Primitiven auf, um reichhaltigere Inhalte darzustellen.

Rich Text

Zweck: Ein leistungsstarker Texteditor, der eine breite Palette von Formatierungen unterstützt, von einfachen Fettungen und Listen bis hin zum Einbetten von Bildern und Links innerhalb des Textes selbst.
Konfigurierbare Eigenschaften: Content (Rich Text Editor Feld).
Anwendungsbeispiel:
- Fett
- Kursiv
- Unterstrichen
- Link
- Ungeordnete Liste
  - Punkt
  - Punkt
  - Punkt

Geordnete Liste
1. Punkt
2. Punkt
  1. Punkt

E-Commerce-Spezifische & Merchandising-Komponenten

Diese Komponenten stellen eine direkte Verbindung zu Ihrem Produktkatalog her und unterstützen das Merchandising Ihres Shops.

Slider

Zweck: Ein vielseitiges Karussell, das jede andere Inhaltskomponente als Slides enthalten kann. Sie können es verwenden, um Karussells mit Bildern, Promotionen oder Teasern zu erstellen.
Konfigurierbare Eigenschaften: Content (Referenzfeld), Show Navigation Arrows (Toggle), Show Pagination Indicators (Toggle).
Anwendungsbeispiel: Erstellen Sie ein vollflächiges Bilderkarussell auf der Startseite mit benutzerdefinierten Bannern.

Beispiele

Festival Ready

JETZT ENTDECKEN

Streetwear Essentials

JETZT ENTDECKEN

Zurück zu den Basics

JETZT ENTDECKEN

Interaktive & Aktionsorientierte Komponenten

Button

Zweck: Ein eigenständiger, anklickbarer Button, der Benutzer zu einer bestimmten Aktion oder Seite führt.
Konfigurierbare Eigenschaften: Text (Text), Style (Dropdown), URL (Text), OpenInNewTab (Toggle).
Anwendungsbeispiel: Ein "Jetzt Shoppen"-Button auf einem Aktionsbanner.

Beispiele

Primary button Secondary button Outline button Accent button

Akkordeon & Akkordeon-Element

Zweck: Organisiert Inhalte in erweiterbaren/einklappbaren Abschnitten, ideal für FAQs, Produktdetails oder immer dann, wenn vertikaler Platz gespart werden soll.
Konfigurierbare Eigenschaften: Das Akkordeon hat einen Titel (Text) und ein Array von Akkordeon-Element-Referenzen. Das Akkordeon-Element hat einen Titel (Text) und verschachtelten Inhalt (Referenzfeld für andere Komponenten).
Anwendungsbeispiel: Ein FAQ-Bereich auf einer Produktseite, um die Seite übersichtlich zu halten.

FAQ (Akkordeon-Beispiel)

Versand & Lieferung

Wie lange dauert die Lieferung meiner Bestellung? Wir bieten verschiedene Versandoptionen an. Unser Standardversand dauert in der Regel 3–5 Werktage. Wenn Sie es eilig haben, können Sie beim Checkout den Expressversand für eine Lieferung innerhalb von 1–2 Werktagen wählen.
Bieten Sie kostenlosen Versand an? Ja, das tun wir! Alle Bestellungen über 75 € qualifizieren sich für den kostenlosen Standardversand.
Wohin liefern Sie? Wir liefern derzeit in alle Länder innerhalb der Europäischen Union. Eine vollständige Liste der Versandkosten und voraussichtlichen Lieferzeiten finden Sie auf unserer Seite Versandinformationen.

Rückgabe & Umtausch

Wie lauten Ihre Rückgaberichtlinien? Wir möchten, dass Sie Ihren Kauf lieben. Falls Sie nicht zufrieden sind, können Sie ungetragene und ungewaschene Artikel innerhalb von 30 Tagen nach Lieferung zurückgeben. Alle Rücksendungen sind kostenlos.
Wie sende ich einen Artikel zurück? Sie können eine Rücksendung über unser Online-Portal veranlassen. Melden Sie sich einfach in Ihrem Konto an, suchen Sie Ihre Bestellung und folgen Sie den Schritten, um ein Rücksendeetikett zu generieren.
Kann ich einen Artikel gegen eine andere Größe oder Farbe umtauschen? Ja! Der einfachste Weg, einen Artikel umzutauschen, besteht darin, das Originalprodukt zurückzusenden und eine neue Bestellung für die gewünschte Größe oder Farbe aufzugeben. Dadurch wird sichergestellt, dass Sie Ihren neuen Artikel so schnell wie möglich erhalten.

Produkte & Größen

Wie finde ich meine Größe? Eine detaillierte Größentabelle finden Sie auf jeder Produktseite, die Ihnen hilft, die perfekte Passform zu finden. Sie enthält Maße unserer Produkte sowohl in Zentimetern als auch in Zoll.
Aus welchen Materialien besteht Ihre Kleidung? Wir legen Wert auf Qualität und Nachhaltigkeit. Die Materialien für jeden Artikel sowie Pflegehinweise sind in der Produktbeschreibung auf der jeweiligen Seite aufgeführt.
Bieten Sie Übergrößen an? Ja, das tun wir! Wir glauben an inklusive Größen für alle Körperformen. Sie können unseren Größenfilter auf jeder Produktkategorieseite verwenden, um alle verfügbaren Größen zu finden.

Product Slider