Produktbereich (Thumbnail)

Für Plain Jane und Plain Jane Interactive

Was Sie lernen werden

• So konfigurieren Sie das „Thumbnail“-Layout für Produktseiten

• Alle Anpassungsoptionen für Galerie, Preise, Schaltflächen und Akkordeons

• Beste Praktiken zur Formatierung von Produktbildern und -beschreibungen

---

Was ist das Thumbnail-Layout?

Die Thumbnail-Layout zeigt Produktbilder in einer vertikalen oder rasterartigen Galerie mit Miniaturansichten an. Es ist das flexibelste und am weitesten verbreitete Layout im Plain Jane-Theme und ideal für Shops mit mehreren Produktaufnahmen.

Verfügbar in:

• ✅ Plain Jane v3

• ✅ Plain Jane Interactive v2

---

🔧 So aktivieren Sie das Thumbnail-Layout

1. Gehen Sie zu Onlineshop > Themes > Anpassen

2. Wählen Sie oben im Dropdown-Menü Produkte > Standardprodukt

3. Suchen Sie den Bereich mit dem Namen Produktabschnitt

4. Wenn ein anderes Layout (z. B. Showcase oder Scroll) aktiv ist, klicken Sie auf „...“ > Abschnitt ausblenden

5. Erweitern Sie das Produktabschnitt und konfigurieren Sie jeden Block:

   • Im Angebot-Label

   • Überschrift

   • Preis

   • Beschreibung

   • Galerie

   • Varianten & Schaltflächen

   • Produkt-Akkordeon

💡 Tipp: Sie können Blöcke nach Bedarf mit dem Block hinzufügen Button unter diesem Abschnitt hinzufügen oder entfernen.

---

⚙️ Layout-Anpassung

Klicken Sie auf das Haupt- Produktabschnitt (nicht die Blöcke), um auf die Layouteinstellungen zuzugreifen:

Position der Produktgalerie

• Verschieben Sie die Bildergalerie nach links oder rechts

Einblend-Animation

• Steuert die Einblend-Dauer für den Abschnitt (0 = sofort, höhere Werte = langsamere Einblendung)

Galerie-Spalten (nur linke Seite)

• Passen Sie an, wie viele Miniaturbilder pro Reihe angezeigt werden (1 bis 6)

Galerie-Bildgröße

• Feinabstimmung der Bildgröße separat für Desktop und Mobil

---

🏷 Angebotsschild

• Sichtbarkeit umschalten

• Hintergrund- und Textfarbe festlegen

• Abstand/Rand um das Schild anpassen

---

🧾 Produktdetails

Jeder Block kann angepasst werden:

• Überschrift: Titelgröße, Farbe, Abstand

• Preis: Währung anzeigen/ausblenden, Schriftgröße, Preisfarbe

• Beschreibung: Legen Sie eine maximale Wortanzahl fest (fügt einen „Mehr lesen“-Umschalter hinzu)

• Varianten & Schaltflächen:

  • Eckenradius und Abstände steuern

  • Den „Nächstes Produkt“-Button ausblenden, wenn nicht gewünscht

---

🪜 Produkt-Akkordeons

Fügen Sie mehrere zusammenklappbare Abschnitte mit dem Produkt-Akkordeon Block hinzu:

• Titel umbenennen (z. B. „Größentabelle“, „Rückgaben & Umtausch“)

• Abstände anpassen

• Beliebigen formatierten Text oder HTML hinzufügen

💡 Tipp: Halten Sie Akkordeons minimal. Verwenden Sie maximal 2–3, um Käufer nicht zu überfordern.

---

➕ Benutzerdefinierte Abschnitte hinzufügen

Sie können normale Theme-Abschnitte anhängen unter dem Produktlayout, wie zum Beispiel:

• Scrollende Bildstreams

• E-Mail-Anmeldungen

• Vorgestellte Kollektionen

---

🖼 Tipps zur Bildgröße

Für eine saubere Ausrichtung von Produktname, Preis und Schaltflächen:

• Laden Sie alle Produktbilder mit demselben Seitenverhältnis hoch

• Empfohlen: 1000 px x 1000 px für quadratische Galerien

Brauchen Sie Hilfe?

• 💬 Treten Sie unserer Community auf Discord bei: https://discord.gg/hcc2GvgZc6

• 📧 Schreiben Sie uns eine E-Mail an: [email protected]

• 💻 Chatten Sie live mit uns: Verfügbar Montag–Freitag, 10:00–18:00 EST, direkt auf unserer Website