Design

Im Design-Tab gestaltest du das visuelle Erscheinungsbild deines Shops - von Produktkarten über das Layout bis zu Badges.

Design-Vorlagen

Shop-Design auswählen

Was es macht: Öffnet die Galerie mit vorgefertigten Design-Vorlagen.

So findest du es: Design > Shop-Design auswählen

Verfügbare Kategorien:

Kategorie	Beschreibung
Alle	Alle verfügbaren Vorlagen
Marktplatz	Dichte Layouts, schneller Kauf (Amazon-Stil)
Boutique	Elegante, bildorientierte Designs
Luxus	Premium-Look mit viel Weissraum
Minimal	Schlichte, aufgeräumte Designs

Vorlage anwenden

1. Tippe auf Shop-Design auswählen
2. Wähle eine Kategorie oder “Alle”
3. Sieh dir die Vorschau der Vorlagen an
4. Tippe auf eine Vorlage
5. Bestätige mit Anwenden

---

Produktkarten-Stil

Karten-Stil

Was es macht: Der visuelle Stil der Produktkarten.

So findest du es: Design > Produktkarten-Stil > Karten-Stil

Optionen:

Stil	Beschreibung
Erhoht (Schatten)	Karten mit Schatten, schweben über dem Hintergrund
Umrandet	Karten mit Rahmen, kein Schatten
Flach	Keine Hervorhebung, minimales Design

---

Eckenrundung

Was es macht: Wie rund die Ecken der Produktkarten sind.

So findest du es: Design > Produktkarten-Stil > Eckenrundung

Optionen:

Wert	Beschreibung
Keine	Eckige Karten
Klein	Leicht abgerundet
Mittel	Standard-Rundung
Gross	Stark abgerundet
Vollständig	Sehr runde Ecken

---

Schattenstärke

Was es macht: Intensität des Schattens bei erhohten Karten.

So findest du es: Design > Produktkarten-Stil > Schattenstärke

Optionen:

Wert	Wirkung
0	Kein Schatten
1-5	Zunehmende Schatten-Intensität

Nur bei erhohtem Stil

Diese Einstellung ist nur bei “Erhoht (Schatten)” als Karten-Stil wirksam.

---

Bild-Einstellungen

Seitenverhaltnis

Was es macht: Das Verhaltnis von Breite zu Hohe bei Produktbildern.

So findest du es: Design > Bild-Einstellungen > Seitenverhaltnis

Optionen:

Format	Verhaltnis	Ideal für
Quadratisch	1:1	Instagram-Stil, einheitlicher Look
Hochformat	3:4	Mode, Porträts
Querformat	4:3	Elektronik, breite Produkte
Original	Variabel	Gemischte Produkte

---

Hover-Effekt

Was es macht: Animation beim Überfahren mit der Maus (Desktop).

So findest du es: Design > Bild-Einstellungen > Hover-Effekt

Optionen:

Effekt	Beschreibung
Keiner	Keine Animation
Zoom	Bild vergrößert sich leicht
Overlay	Dunkles Overlay erscheint
Anheben	Karte hebt sich an

---

Karten-Inhalt

Schnell-Hinzufügen Position

Was es macht: Wo der “In den Warenkorb”-Button auf der Produktkarte erscheint.

So findest du es: Design > Karten-Inhalt > Schnell-Hinzufügen Position

Optionen:

Position	Beschreibung
Deaktiviert	Kein Quick-Add auf Karten
Unten	Button unter dem Produktinfo
Overlay	Button über dem Bild (bei Hover)
Ecke	Kleiner Button in der Ecke

---

Text-Ausrichtung

Was es macht: Ausrichtung von Produktname und Preis.

So findest du es: Design > Karten-Inhalt > Text-Ausrichtung

Optionen:

Ausrichtung	Wirkung
Links	Text linksbundig
Zentriert	Text zentriert
Rechts	Text rechtsbundig

---

Bewertung in Karte anzeigen

Was es macht: Zeigt Sterne-Bewertung direkt auf der Produktkarte.

So findest du es: Design > Karten-Inhalt > Bewertung in Karte anzeigen

Optionen:

Einstellung	Wirkung
An	Sterne erscheinen auf der Karte
Aus	Bewertung nur auf Produktseite

---

Farb-Swatches anzeigen

Was es macht: Zeigt verfügbare Farben als kleine Kreise auf der Karte.

So findest du es: Design > Karten-Inhalt > Farb-Swatches anzeigen

Optionen:

Einstellung	Wirkung
An	Farbpunkte erscheinen bei Produkten mit Farbvarianten
Aus	Keine Farbanzeige auf Karten

---

Marke in Karte anzeigen

Was es macht: Zeigt den Markennamen auf der Produktkarte.

So findest du es: Design > Karten-Inhalt > Marke in Karte anzeigen

Optionen:

Einstellung	Wirkung
An	Markenname erscheint über/unter Produktname
Aus	Keine Markenanzeige auf Karten

---

Seiten-Layout

Kategorie-Header anzeigen

Was es macht: Zeigt einen Header für Kategorieseiten.

So findest du es: Design > Seiten-Layout > Kategorie-Header anzeigen

Optionen:

Einstellung	Wirkung
An	Kategorie-Header mit Name/Bild erscheint
Aus	Direkter Start der Produktliste

---

Header-Stil

Was es macht: Der Stil des Kategorie-Headers.

So findest du es: Design > Seiten-Layout > Header-Stil

Optionen:

Stil	Beschreibung
Minimal	Nur Kategoriename
Banner	Name mit Hintergrundbild
Hero	Grosses Bild mit überlagertem Text

---

Breadcrumbs anzeigen

Was es macht: Zeigt den Navigationspfad (z.B. Shop > Kategorie > Produkt).

So findest du es: Design > Seiten-Layout > Breadcrumbs anzeigen

Optionen:

Einstellung	Wirkung
An	Breadcrumb-Navigation erscheint
Aus	Keine Breadcrumbs

---

Sortier-Dropdown anzeigen

Was es macht: Ermöglicht das Sortieren der Produktliste.

So findest du es: Design > Seiten-Layout > Sortier-Dropdown anzeigen

Optionen:

Einstellung	Wirkung
An	Dropdown für “Sortieren nach” erscheint
Aus	Keine Sortier-Option

---

Ansicht-Umschalter anzeigen

Was es macht: Button zum Wechseln zwischen Grid- und Listenansicht.

So findest du es: Design > Seiten-Layout > Ansicht-Umschalter anzeigen

Optionen:

Einstellung	Wirkung
An	Grid/Liste Umschalter erscheint
Aus	Nur eine Ansicht verfügbar

---

Produktanzahl anzeigen

Was es macht: Zeigt die Gesamtzahl der Produkte.

So findest du es: Design > Seiten-Layout > Produktanzahl anzeigen

Optionen:

Einstellung	Wirkung
An	”24 Produkte” erscheint
Aus	Keine Anzahl angezeigt

---

Filter fixiert

Was es macht: Filter-Leiste bleibt beim Scrollen sichtbar.

So findest du es: Design > Seiten-Layout > Filter fixiert

Optionen:

Einstellung	Wirkung
An	Filter bleiben oben fixiert
Aus	Filter scrollen mit

---

Layout-Typ

Darstellungsart

Was es macht: Grundlegende Anordnung der Produkte.

So findest du es: Design > Layout-Typ > Darstellungsart

Optionen:

Typ	Beschreibung
Grid	Produkte in gleichmassigem Raster
Liste	Produkte untereinander mit mehr Details
Masonry	Pinterest-artiges Layout mit variablen Hohen

---

Listen-Stil

Was es macht: Detailgrad bei Listenansicht.

So findest du es: Design > Layout-Typ > Listen-Stil

Optionen:

Stil	Beschreibung
Kompakt	Kleine Bilder, wenig Info
Standard	Mittlere Bilder, Hauptinfos
Detailliert	Grosse Bilder, alle Infos

---

Grid-Spalten

Spalten (Handy)

Was es macht: Anzahl der Spalten auf dem Smartphone.

So findest du es: Design > Grid-Spalten > Spalten (Handy)

Optionen:

Wert	Beschreibung
1	Eine Spalte (gross)
2	Zwei Spalten (Standard)
3	Drei Spalten (klein)

---

Spalten (Tablet)

Was es macht: Anzahl der Spalten auf Tablets.

So findest du es: Design > Grid-Spalten > Spalten (Tablet)

Optionen:

Wert	Beschreibung
2-4	Zwei bis vier Spalten

---

Spalten (Desktop)

Was es macht: Anzahl der Spalten auf Desktop.

So findest du es: Design > Grid-Spalten > Spalten (Desktop)

Optionen:

Wert	Beschreibung
3-6	Drei bis sechs Spalten

---

Produkt-Badges

”NEU” Badge anzeigen

Was es macht: Zeigt ein “NEU” Badge bei neuen Produkten.

So findest du es: Design > Produkt-Badges > “NEU” Badge anzeigen

Optionen:

Einstellung	Wirkung
An	”NEU” Badge bei neuen Produkten
Aus	Kein Neu-Badge

---

Tage als “NEU” markiert

Was es macht: Wie lange ein Produkt als “NEU” gilt.

So findest du es: Design > Produkt-Badges > Tage als “NEU” markiert

Optionen:

Wert	Wirkung
1-90	Anzahl Tage seit Erstellung

---

”SALE” Badge anzeigen

Was es macht: Zeigt ein “SALE” Badge bei reduzierten Produkten.

So findest du es: Design > Produkt-Badges > “SALE” Badge anzeigen

Optionen:

Einstellung	Wirkung
An	”SALE” Badge bei Produkten mit Vergleichspreis
Aus	Kein Sale-Badge

---

”AUSVERKAUFT” Badge anzeigen

Was es macht: Zeigt ein Badge bei ausverkauften Produkten.

So findest du es: Design > Produkt-Badges > “AUSVERKAUFT” Badge anzeigen

Optionen:

Einstellung	Wirkung
An	”AUSVERKAUFT” Badge bei Bestand 0
Aus	Kein Ausverkauft-Badge

---

”Wenig auf Lager” Badge anzeigen

Was es macht: Zeigt ein Badge bei niedrigem Lagerbestand.

So findest du es: Design > Produkt-Badges > “Wenig auf Lager” Badge anzeigen

Optionen:

Einstellung	Wirkung
An	Badge bei Bestand unter Schwellenwert
Aus	Kein Low-Stock-Badge

Schwellenwert

Den Schwellenwert für “niedriger Bestand” stellst du im Anzeige-Tab unter “Niedriger Bestand ab” ein.

---

Shop-Startseite

Featured-Bereich anzeigen

Was es macht: Zeigt empfohlene Produkte auf der Startseite.

So findest du es: Design > Shop-Startseite > Featured-Bereich anzeigen

Optionen:

Einstellung	Wirkung
An	”Empfohlen” Sektion auf Startseite
Aus	Keine Featured-Sektion

---

Anzahl Featured Produkte

Was es macht: Wie viele Produkte im Featured-Bereich erscheinen.

So findest du es: Design > Shop-Startseite > Anzahl Featured Produkte

Optionen:

Wert	Wirkung
2-12	Anzahl der Featured-Produkte

---

Kategorien auf Startseite

Was es macht: Zeigt Kategorie-Übersicht auf der Shop-Startseite.

So findest du es: Design > Shop-Startseite > Kategorien auf Startseite

Optionen:

Einstellung	Wirkung
An	Kategorie-Kacheln auf Startseite
Aus	Keine Kategorie-Übersicht

---

Tipps

Vorlagen als Ausgangspunkt

Wähle eine Design-Vorlage, die deinem Stil entspricht, und passe sie an. Das spart Zeit!

Mobile Spalten

Auf dem Handy sind 2 Spalten meist ideal. 3 Spalten funktionieren nur bei kleinen Produktkarten.

Badges mit Bedacht

Zu viele Badges wirken überladen. Aktiviere nur die, die wirklich relevant sind.

Hover-Effekte für Desktop

Hover-Effekte funktionieren nur auf Desktop. Auf Touch-Geräten werden sie ignoriert.

Featured-Produkte

Nutze den Featured-Bereich für saisonale Highlights, Bestseller oder neue Produkte.