Help Center
Changelog

Design & Theme

Farben, Formen, Dark Mode und Layout Ihres Corporate Shops individuell anpassen

5 Min. Lesezeit
designthemefarbenlayoutdarkmode

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.

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

FarbtypEmpfehlungBeispiel
PrimaerfarbeKraeftige Unternehmensfarbe#018937 (Gruen)
SekundaerfarbeKomplementaer oder abgestuft#404040 (Dunkelgrau)
TertiaerfarbeDezenter Akzent#f5f5f5 (Hellgrau)
HintergrundfarbeHeller, 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
  • Der Warenkorb oeffnet sich als Seitenpanel auf der linken Seite
  • Sinnvoll, wenn wichtige Navigationselemente oder Produktdetails auf der rechten Seite liegen
  • 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