---
title: "Design & Theme"
description: "Farben, Formen, Dark Mode und Layout Ihres Corporate Shops individuell anpassen"
category: "corporate"
tags: ["design", "theme", "farben", "layout", "darkmode"]
createdAt: "2026-04-01"
updatedAt: "2026-04-01"
canonical: "https://help.softwear-prints.com/articles/corporate/theme"
---

# Design & Theme

Das Design Ihres Corporate Shops laesst sich umfassend an Ihre Markenidentitaet anpassen. Von den Farben über die Formensprache bis hin zum Layout können Sie das Erscheinungsbild Ihres Shops vollständig individualisieren - ohne Programmierkenntnisse.

::admin-link{path="/settings/theme" label="Theme-Einstellungen öffnen"}
::

## Farben anpassen

Die Farbgestaltung ist das Herzsteuck Ihres Shop-Designs. softwear.prints verwendet ein Vierfarbsystem, mit dem Sie das gesamte Erscheinungsbild steuern:

### Primaerfarbe (Primary)

Die Primaerfarbe ist die Hauptfarbe Ihres Shops. Sie wird an den prominentesten Stellen verwendet:

- **Buttons** - Alle primären Aktionsbuttons (z.B. "In den Warenkorb", "Bestellen")
- **Links** - Textlinks und Navigationselemente
- **Akzente** - Hervorhebungen, aktive Zustaende, Fortschrittsanzeigen
- **Header-Elemente** - Je nach Layout auch Teile der Kopfzeile

So ändern Sie die Primaerfarbe:

1. Navigieren Sie zu **Einstellungen** > **Theme**
2. Klicken Sie auf das Farbfeld neben **Primaerfarbe**
3. Wählen Sie die gewünschte Farbe über den Farbwaehler oder geben Sie einen HEX-Wert ein (z.B. `#018937`)
4. Die Vorschau aktualisiert sich in Echtzeit
5. Klicken Sie auf **Speichern**

> **Tipp:** Verwenden Sie Ihre Unternehmens- oder Vereinsfarbe als Primaerfarbe, um einen hohen Wiedererkennungswert zu erzielen.

### Sekundaerfarbe (Secondary)

Die Sekundaerfarbe ergaenzt die Primaerfarbe und wird für untergeordnete Elemente verwendet:

- **Sekundaere Buttons** - Weniger prominente Aktionen (z.B. "Abbrechen", "Zurück")
- **Badges und Tags** - Kategorielabels, Statusanzeigen
- **Hover-Effekte** - Farbwechsel beim Ueberfahren mit der Maus
- **Trennlinien und Rahmen** - Strukturelemente im Layout

### Tertiaerfarbe (Tertiary)

Die Tertiaerfarbe dient als zusätzlicher Akzent für spezielle Bereiche:

- **Hinweisboxen** - Informationsbereiche und Tipps
- **Hintergrundakzente** - Dezente farbliche Hervorhebungen
- **Spezial-Elemente** - Saisonale Aktionen oder besondere Bereiche

### Hintergrundfarbe (Background)

Die Hintergrundfarbe bestimmt den Grundton Ihres gesamten Shops:

- **Seitenhintergrund** - Die Grundfarbe aller Seiten
- **Kartenflaechen** - Hintergrund von Produktkarten und Inhaltsbloecken
- **Kontrastbasis** - Bildet die Basis für Lesbarkeit und Kontraste

> **Wichtig:** Achten Sie darauf, dass zwischen Hintergrundfarbe und Textfarbe ein ausreichender Kontrast besteht. softwear.prints prueft dies automatisch und zeigt eine Warnung an, wenn der Kontrast zu gering ist.

### Farbauswahl - Empfehlungen

| Farbtyp | Empfehlung | Beispiel |
|---|---|---|
| Primaerfarbe | Kraeftige Unternehmensfarbe | `#018937` (Gruen) |
| Sekundaerfarbe | Komplementaer oder abgestuft | `#404040` (Dunkelgrau) |
| Tertiaerfarbe | Dezenter Akzent | `#f5f5f5` (Hellgrau) |
| Hintergrundfarbe | Heller, neutraler Ton | `#ffffff` (Weiss) |

## Formen (Shapes)

Die Formensprache beeinflusst, wie abgerundet oder eckig Elemente in Ihrem Shop dargestellt werden. Dies betrifft Buttons, Eingabefelder, Karten und Bilder.

### Abgerundet (Rounded)

- Buttons und Eingabefelder erhalten abgerundete Ecken
- Produktkarten und Bilder haben weiche Kanten
- Erzeugt ein modernes, freundliches Erscheinungsbild
- Empfohlen für die meisten Shops

### Eckig (Square)

- Alle Elemente werden mit scharfen, rechtwinkligen Ecken dargestellt
- Erzeugt ein technisches, professionelles Erscheinungsbild
- Besonders geeignet für Marken mit klarer, geometrischer Designsprache

So ändern Sie die Formensprache:

1. Navigieren Sie zu **Einstellungen** > **Theme**
2. Wählen Sie unter **Formen** die Option **Abgerundet** oder **Eckig**
3. Die Vorschau aktualisiert sich sofort
4. Klicken Sie auf **Speichern**

## Schatten (Shadows)

Schatten verleihen den Elementen Ihres Shops Tiefe und Struktur. Sie können Schatten ein- oder ausschalten:

- **Schatten aktiviert** - Produktkarten, Buttons und Bereiche erhalten dezente Schatten, die ihnen Tiefe verleihen. Erzeugt ein lebendiges, modernes Design.
- **Schatten deaktiviert** - Alle Elemente werden flach und ohne Schatten dargestellt. Erzeugt ein minimalistisches, cleanes Erscheinungsbild.

So ändern Sie die Schatteneinstellung:

1. Navigieren Sie zu **Einstellungen** > **Theme**
2. Schalten Sie den Regler bei **Schatten** ein oder aus
3. Prüfen Sie die Vorschau
4. Klicken Sie auf **Speichern**

## Dark Mode

Der Dark Mode bietet Ihren Kunden die Möglichkeit, den Shop in einem dunklen Farbschema anzuzeigen. Dies schont die Augen bei wenig Licht und reduziert den Energieverbrauch auf OLED-Bildschirmen.

### Dark Mode aktivieren

1. Navigieren Sie zu **Einstellungen** > **Theme**
2. Aktivieren Sie den Schalter **Dark Mode erlauben**
3. Klicken Sie auf **Speichern**

Wenn der Dark Mode aktiviert ist:

- Kunden können in der Shop-Navigation zwischen Hell- und Dunkel-Modus wechseln
- Die Farbpalette wird automatisch invertiert und angepasst
- Bilder und Logos bleiben unveraendert
- Ihre gewählten Primaer- und Sekundaerfarben werden beibehalten, aber für den dunklen Hintergrund optimiert

> **Hinweis:** Der Dark Mode ist eine Option für Ihre Kunden. Sie erzwingen damit nicht den dunklen Modus, sondern geben Ihren Kunden lediglich die Wahlmöglichkeit.

## Produktgalerie-Layout

Das Layout der Produktgalerie bestimmt, wie Ihre Produkte auf Übersichtsseiten und in Kategorien dargestellt werden:

### Standard-Layout

- Produkte werden in einem klassischen Raster mit großem Produktbild angezeigt
- Unter jedem Bild stehen Produktname, Preis und eine kurze Beschreibung
- Ideal für Shops mit wenigen, hochwertigen Produkten
- Produktbilder stehen im Vordergrund

### Grid-Layout

- Produkte werden in einem kompakteren Raster mit mehr Artikeln pro Zeile angezeigt
- Produktbilder sind kleiner, dafür werden mehr Produkte gleichzeitig sichtbar
- Ideal für Shops mit großem Sortiment
- Kunden können schneller durch das Angebot browsen

So ändern Sie das Galerie-Layout:

1. Navigieren Sie zu **Einstellungen** > **Theme**
2. Wählen Sie unter **Produktgalerie** das gewünschte Layout
3. Prüfen Sie die Vorschau
4. Klicken Sie auf **Speichern**

## Warenkorb-Position

Die Position des Warenkorbs beeinflusst das Einkaufserlebnis Ihrer Kunden. Sie haben drei Optionen:

### Rechts (Standard)

- Der Warenkorb oeffnet sich als Seitenpanel auf der rechten Seite
- Kunden können weitershoppen, während der Warenkorb sichtbar bleibt
- Empfohlen für die meisten Shops

### Links

- Der Warenkorb oeffnet sich als Seitenpanel auf der linken Seite
- Sinnvoll, wenn wichtige Navigationselemente oder Produktdetails auf der rechten Seite liegen

### Modal (Popup)

- Der Warenkorb oeffnet sich als zentriertes Popup-Fenster über dem gesamten Inhalt
- Der Hintergrund wird abgedunkelt
- Lenkt die volle Aufmerksamkeit auf den Warenkorb
- Geeignet für Shops, bei denen der Bestellvorgang besonders hervorgehoben werden soll

So ändern Sie die Warenkorb-Position:

1. Navigieren Sie zu **Einstellungen** > **Theme**
2. Wählen Sie unter **Warenkorb-Position** die gewünschte Option
3. Klicken Sie auf **Speichern**

## Vorschau und Live-Ansicht

Alle Theme-Änderungen werden nach dem Speichern sofort in Ihrem Shop wirksam. softwear.prints zeigt Ihnen in den Theme-Einstellungen eine Echtzeit-Vorschau, damit Sie das Ergebnis vor dem Speichern beurteilen können.

> **Tipp:** Öffnen Sie Ihren Shop in einem zweiten Browser-Tab, um nach dem Speichern direkt das Ergebnis im Livebetrieb zu prüfen.

## Häufige Fragen

### Können meine Kunden das Design ändern?

Nein, nur Administratoren können das Theme über den Corporate Admin ändern. Kunden sehen lediglich das von Ihnen konfigurierte Design. Die einzige Ausnahme ist der Dark Mode, wenn er aktiviert ist.

### Werden meine Farben bei einem Update überschrieben?

Nein, Ihre individuellen Theme-Einstellungen bleiben bei Plattform-Updates erhalten.

### Welche Farben eignen sich am besten?

Verwenden Sie Ihre Unternehmensfarben als Primaer- und Sekundaerfarbe. Achten Sie auf ausreichend Kontrast zwischen Text und Hintergrund. Im Zweifelsfall funktionieren kraeftige Primaerfarben auf weissem Hintergrund am besten.

## Weiter zu

- [Shop einrichten](/articles/corporate/setup) - Grundlegende Shop-Informationen konfigurieren
- [Startseite gestalten](/articles/corporate/homepage) - Hero-Bereiche und Banner für Ihre Startseite
- [Domain & Custom Domain](/articles/corporate/domain) - Eigene Domain einrichten
- [Shop-Einstellungen](/articles/corporate/shop-settings) - Erweiterte Optionen für Ihren Shop