Design & Farben

Passen Sie das Erscheinungsbild Ihres Shops mit individuellen Farben, Schriften und Ihrem Logo an — ohne Programmierkenntnisse.

Design-Einstellungen öffnen

1. Melden Sie sich im Admin-Bereich an.
2. Navigieren Sie zu Einstellungen → Design.
3. Alle Gestaltungsoptionen sind in Kategorien aufgeteilt.

Logo hochladen

Ihr Logo erscheint im Shop-Header und auf Rechnungen.

1. Klicken Sie unter Logo auf Bild auswählen.
2. Laden Sie eine Datei im Format PNG, SVG oder JPG hoch.
3. Empfohlene Größe: mindestens 400 × 120 px bei transparentem Hintergrund (PNG oder SVG).
4. Klicken Sie auf Speichern.

Hinweis: Für einen professionellen Auftritt empfehlen wir ein SVG-Logo, da es auf allen Bildschirmgrößen scharf dargestellt wird.

Farben anpassen

Sie können die Hauptfarben Ihres Shops frei wählen:

Farbe	Beschreibung
Primärfarbe	Buttons, Links und Akzente
Sekundärfarbe	Hover-Zustände und Hervorhebungen
Hintergrundfarbe	Seitenhintergrund
Textfarbe	Fließtext und Überschriften

So ändern Sie eine Farbe:

1. Klicken Sie auf das Farbfeld neben der gewünschten Einstellung.
2. Wählen Sie eine Farbe über den Farbwähler oder geben Sie einen Hex-Code ein (z. B. #2563EB).
3. Eine Vorschau wird sofort angezeigt.
4. Klicken Sie auf Speichern, um die Änderungen zu übernehmen.

Schriften auswählen

Wählen Sie aus einer Auswahl an Google-Schriften für Überschriften und Fließtext:

1. Öffnen Sie Schriften im Design-Bereich.
2. Wählen Sie unter Überschriften-Schrift und Text-Schrift je eine Schriftart aus.
3. Stellen Sie die Basisschriftgröße ein (Standard: 16 px).
4. Klicken Sie auf Speichern.

Tipp: Kombination aus einer serifenlosen Schrift für Text und einer ausdrucksstarken Schrift für Überschriften erzeugt einen professionellen Eindruck.

Header anpassen

Der Header ist der obere Bereich Ihres Shops mit Logo, Navigation und Warenkorb.

Header-Layout wählen

Unter Einstellungen → Design → Layout → Header Settings können Sie zwischen drei Header-Layouts wählen:

Layout	Beschreibung
Classic	Klassischer Header mit horizontaler Navigation und Kontaktdaten
Floating Pill	Moderner, schwebender Header mit abgerundeten Ecken und Glaseffekt
Top Bar + Navigation	Dunkle Infobar oben mit Schnellsuche und Kategorienavigation darunter

Weitere Header-Einstellungen

• Sticky Header: Header bleibt beim Scrollen sichtbar (ein/aus)
• Header-Rahmen: Untere Trennlinie ein- oder ausblenden
• Navigation: Menüpunkte werden automatisch aus Ihren Kategorien generiert

Änderungen am Header finden Sie unter Einstellungen → Design → Layout.

Footer anpassen

1. Öffnen Sie Einstellungen → Design → Footer.
2. Tragen Sie Ihre Kontaktinformationen ein.
3. Wählen Sie aus, welche Links im Footer erscheinen sollen (Impressum, Datenschutz, AGB).
4. Aktivieren oder deaktivieren Sie Social-Media-Icons.
5. Speichern Sie die Änderungen.

Favicon einrichten

Das Favicon ist das kleine Symbol, das im Browser-Tab erscheint.

1. Klicken Sie unter Favicon auf Bild auswählen.
2. Laden Sie eine quadratische PNG-Datei hoch (empfohlen: 512 × 512 px).
3. Das System erstellt automatisch alle benötigten Favicon-Größen.
4. Speichern Sie.

Design-Vorschau

Bevor Sie Änderungen veröffentlichen, können Sie eine Live-Vorschau aufrufen:

1. Klicken Sie oben rechts auf Vorschau.
2. Ein neues Browserfenster mit Ihrem Shop öffnet sich.
3. Alle Designänderungen sind sofort sichtbar — Kunden sehen diese erst nach dem Speichern.

Design zurücksetzen

Falls Sie mit Ihren Änderungen nicht zufrieden sind:

1. Klicken Sie auf Design zurücksetzen.
2. Bestätigen Sie den Dialog.
3. Alle Designeinstellungen werden auf die Standardwerte zurückgesetzt.

Achtung: Das Zurücksetzen ist nicht rückgängig zu machen. Notieren Sie sich wichtige Farbwerte, bevor Sie zurücksetzen.

Häufige Probleme

Problem	Lösung
Logo wird unscharf dargestellt	SVG oder höhere Auflösung (min. 400 × 120 px) verwenden
Farbe ändert sich nicht	Browsercache leeren (Strg+F5)
Schrift wird nicht geladen	Prüfen, ob Werbeblocker Google Fonts blockiert
Favicon erscheint nicht	Browser-Cache leeren; Änderung kann bis zu 24 Stunden dauern

Nächste Schritte

• Domain einrichten — Eigene Domain verbinden
• Inhalte & Seiten — Impressum und AGB anlegen
• Shop einrichten — Grundeinstellungen konfigurieren