Design-Vorlagen

Mit Design-Vorlagen können Sie schnell ein professionell gestaltetes Theme auf Ihren Shop anwenden — oder Ihre eigenen Designeinstellungen als wiederverwendbare Vorlage speichern.

Überblick

Design-Vorlagen enthalten eine vollständige Konfiguration von Farben, Schriften und Layout-Einstellungen. Sie helfen Ihnen, ohne lange Konfiguration einen professionellen Look zu erreichen oder zwischen verschiedenen Design-Richtungen schnell zu wechseln.

Was in Vorlagen enthalten ist:

Primär-, Sekundär- und Akzentfarben
Text-, Hintergrund- und Border-Farben
Header- und Footer-Farben
Schriftfamilien (Body und Überschriften)
Layout-Optionen (Breite, Abstände, Eckenradius)
Button-Stile und Animation-Einstellungen

Was NICHT in Vorlagen enthalten ist:

Logos und Favicons (bleiben bei jedem Wechsel erhalten)
Benutzerdefinierte Schriftdateien

Templates-Galerie öffnen

Melden Sie sich im Admin-Bereich an.
Navigieren Sie zu Einstellungen → Design.
Klicken Sie oben auf den Button Templates (Vorlagensymbol).
Die Galerie zeigt alle verfügbaren Vorlagen als Karten.

Vorlage anwenden

Öffnen Sie die Templates-Galerie (siehe oben).
Durchsuchen Sie die Vorlagen nach Kategorie:
- Minimal — Clean und reduziert
- Luxury — Elegant und hochwertig
- Organic — Natürlich und warmherzig
- Modern — Zeitgenössisch und dynamisch
- Artisan — Handwerklich und authentisch
- E-commerce — Konversionsorientiert
- Custom — Benutzerdefinierte Vorlagen
Klicken Sie auf die gewünschte Vorlage, um Details zu sehen:
- Vorschaubild zeigt den visuellen Eindruck
- Beschreibung erklärt die Designrichtung
- Features (Badges) zeigen besondere Eigenschaften
Klicken Sie auf Apply (oder Premium, falls es eine Premium-Vorlage ist).
Ein Bestätigungsdialog erscheint mit dem Text:

"This will replace your current theme settings (colors, fonts, layout). Your logo and favicon will be preserved."
Klicken Sie auf Apply Template zur Bestätigung.
Die Vorlage wird angewendet — Ihre bisherigen Designeinstellungen werden ersetzt.
Überprüfen Sie die Vorschau, um das neue Design zu sehen.

Nach Anwenden einer Vorlage

Nach dem Anwenden können Sie einzelne Einstellungen anpassen:

Klicken Sie auf die Reiter Farben, Typografie, Layout usw.
Bearbeiten Sie einzelne Werte.
Klicken Sie auf Save Changes, um zu speichern.

Eigene Vorlage erstellen

Sie können Ihre aktuellen Theme-Einstellungen als Vorlage speichern, um sie später zu renutzen oder mit anderen zu teilen.

Hinweis: Nur der Eigentümer (Owner-Rolle) kann Vorlagen erstellen.

Vorlage speichern

Stellen Sie Ihre Farben, Schriften und Layout-Einstellungen nach Wunsch ein.
Klicken Sie auf den Button Save as Template.
Ein Dialog öffnet sich mit folgenden Feldern:

Feld	Beschreibung	Erforderlich
Template name	Ein aussagekräftiger Name (z. B. „Warm Artisan")	Ja
Description	Beschreiben Sie die Designrichtung und Stimmung (max. 500 Zeichen)	Nein
Category	Wählen Sie eine Kategorie, um die Vorlage zu organisieren	Ja
Thumbnail URL	Link zu einem Vorschaubild (z. B. Screenshot)	Nein

Füllen Sie Name und Kategorie aus.
Optional: Beschreibung und Thumbnail-URL hinzufügen.
Klicken Sie auf Save Template.

Die Vorlage wird gespeichert und steht sofort zur Verfügung — für Sie und andere Benutzer desselben Shops.

Vorlagen-Kategorien

Wählen Sie eine passende Kategorie, um die Vorlage zu organisieren:

Kategorie	Einsatz
Minimal	Klares, sauberes Design mit Fokus auf Inhalte
Luxury	Hochwertig, elegant, Premium-Anmutung
Organic	Natürliche Farben, warmherzig, nachhaltig anmutend
Modern	Zeitgenössisch, mutig, dynamisch
Artisan	Handwerklich, authentisch, traditionell
E-commerce	Konversionsorientiert, CTA-fokussiert
Custom	Projektspezifisch, Sonderfälle

Thumbnail hinzufügen (Optional)

Ein Thumbnail macht die Vorlage erkennbarer in der Galerie. Laden Sie ein Vorschaubild hoch:

Erstellen Sie einen Screenshot Ihres Shops mit dem neuen Design (empfohlen: mindestens 800 × 600 px).
Laden Sie das Bild in die Medienbibliothek oder zu einem Server hoch.
Kopieren Sie die URL des Bildes.
Fügen Sie die URL in das Feld Thumbnail URL ein.

Tipp: Verwenden Sie konsistente Bildgrößen für alle Thumbnails (z. B. 4:3 Seitenverhältnis).

Premium-Vorlagen

Einige Vorlagen sind mit Premium gekennzeichnet — diese erfordern ein höheres Plan-Level.

Was ist der Unterschied?

Standard-Vorlagen sind in allen Plan-Stufen verfügbar
Premium-Vorlagen enthalten erweiterte Designs und sind in höheren Plans enthalten

Premium-Vorlage verwenden:

Klicken Sie auf die Premium-Vorlage — der Button zeigt Premium.
Sie werden zur Plan-Upgrade-Seite geleitet.
Upgraden Sie Ihren Plan.
Die Vorlage steht Ihnen dann zur Verfügung.

Häufige Probleme

Problem	Lösung
Vorlage wird nicht angewendet	Browser-Cache leeren (Strg+F5) und erneut versuchen
Farben sehen anders aus als in der Vorschau	Überprüfen Sie, ob Sie benutzerdefinierte CSS haben, die die Vorlagen-Farben überschreiben
Vorlage speichert nicht	Stellen Sie sicher, dass Name und Kategorie ausgefüllt sind; probieren Sie einen anderen Browser
Thumbnail wird nicht angezeigt	Überprüfen Sie, dass die Bild-URL erreichbar ist und das Format unterstützt wird (JPG, PNG, WebP)
Gelöschte Vorlage erscheint noch	Browser-Cache leeren und die Galerie neu laden
Schriften werden in der Vorlage nicht geladen	Benutzerdefinierte Schriftdateien werden nicht in Vorlagen übertragen — laden Sie diese in der neuen Umgebung neu hoch

Best Practices

Vorlage benennen

Verwenden Sie klare, beschreibende Namen:

✅ Gut: „Warm Artisan with Cream Accents"
❌ Schlecht: „Design 1" oder „Test"

Beschreibung schreiben

Erklären Sie in der Beschreibung die Design-Philosophie:

Zielgruppe (z. B. „Für Premium-Möbel")
Stimmung (z. B. „Warm, handwerklich, nachhaltig")
Besonderheiten (z. B. „Großzügige Weißräume, große Bilder")

Vorlage vorbereiten

Bevor Sie eine Vorlage speichern:

Testen Sie alle Farben in hellen und dunklen UI-Elementen
Prüfen Sie Kontrast und Lesbarkeit
Überprüfen Sie Schriften auf allen Seiten (Homepage, Produktseiten, Blog)
Testen Sie auf mobile Endgeräten

Mehrere Vorlagen für A/B-Tests

Sie können mehrere Vorlagen erstellen, um verschiedene Designs zu testen:

Erstellen Sie zwei Vorlagen (z. B. „Minimal A/B" und „Luxury A/B")
Wechseln Sie zwischen ihnen, um Konversionsraten zu vergleichen
Behalten Sie die bessere Vorlage bei

Nächste Schritte

Design & Farben — Individuelle Farben und Schriften anpassen
Schriften — Custom Fonts hochladen
Section-Editor — Seitenlayouts mit Sektionen gestalten