Shopware 6 Produktbeschreibung Mobil sofort sichtbar
199,00 €
Versandkostenfrei
Produktinformationen "Shopware 6 Produktbeschreibung Mobil sofort sichtbar"
Snippet: Produktbeschreibung mobil inline + Review-Button (Shopware 6)
Dieses schlanke JavaScript/CSS-Snippet zeigt die Produktbeschreibung auf Mobilgeräten direkt sichtbar an (statt im Tab), blendet die Tab-Navigation oben aus und setzt einen Bewertungen-Button direkt unter die Beschreibung. Der ursprüngliche Tab-Inhalt wird versteckt, sodass kein doppelter Inhalt entsteht. Ideal für bessere Mobile-UX, mehr Lesbarkeit und schnellere Orientierung auf der Produktseite – ganz ohne Plugin.
Funktionen & Vorteile
- Beschreibung sofort sichtbar (mobil): weniger Taps, schneller zum Inhalt.
- Tabs oben ausgeblendet: ruhigeres Layout auf kleinen Screens.
- Bewertungen-Button unten: direkter Zugriff auf Rezensionen bei Bedarf.
- Kein Duplicate Content: Original-Tab wird via JS ausgeblendet.
- Neutral & leichtgewichtig: Vanilla JS, keine Abhängigkeiten, kein Backend-Eingriff.
- Update-freundlich: klarer, dokumentierter Code – Selektoren leicht anpassbar.
So arbeitet das Snippet
- Erkennt Mobilgeräte (max-width: 575.98px).
- Ermittelt die Beschreibung im Tab-Bereich (
beschreib/descripPane) und rendert sie inline unterhalb der Tabs. - Blendet die ursprüngliche Beschreibung im Tab aus (kein Doppel).
- Versteckt die Tab-Navigation oben (mobil) und erzeugt unten einen „Bewertungen“-Button, der das Review-Tab öffnet.
- Unterbindet einen eventuell störenden Button innerhalb des kopierten Blocks.
Kompatibilität
- Shopware 6 Storefront (Standard-Theme und gängige Derivate).
- Funktioniert mit den üblichen Tab-Strukturen (
.product-detail-tabs/.nav-tabs/.product-detail-tab-navigation). - Bei stark angepassten Themes ggf. Selektoren im Code anpassen (2–3 Stellen).
Installation
- Kopiere den Snippet-Code in einen „Eigenes JavaScript/HTML“-Block deiner PDP-Erlebniswelt oder in dein Theme-JS.
- Cache leeren / Theme neu kompilieren.
- Auf Mobilansicht prüfen: Beschreibung sollte über dem Bewertungen-Button sichtbar sein; Tabs oben (mobil) verschwinden.
Konfiguration & Anpassungen
- Nur mobil / nur Desktop: Der Viewport-Breakpoint ist im Code definiert (
max-width:575.98px). Bei Bedarf anpassen. - Position: Standardmäßig erscheint die Beschreibung unter den Tabs. Wenn du sie oberhalb des Warenkorb-Blocks platzieren willst, gibt es eine kurze Variante (auf Anfrage).
- Button-Text: Der Text des Bewertungs-Buttons kommt aus dem Tab-Label; kann im Code überschrieben werden.
Grenzen & Hinweise
- Das Snippet manipuliert ausschließlich die DOM-Ausgabe (Client-seitig). Server- und SEO-Struktur bleiben unangetastet.
- Falls Tabs/Description dynamisch nachgeladen werden, kann ein späterer Re-Init notwendig sein (MutationObserver – optional verfügbar).
Lieferumfang
- JavaScript/CSS-Snippet (Vanilla JS, minimaler CSS-Block für Mobile).
- Kurz-Anleitung (Einbindung, Selektoren, Optionen).
Lizenz & Support
- Lizenz: Einzellizenz pro Shop-Domain.
- Support (Standard): E-Mail-Support für Installation & leichte Anpassungen (14–30 Tage je nach Paket).
Preis
- Basic (nur Code, keine Unterstützung): €39
- Standard (Code + Anleitung + 30 Tage E-Mail-Support): €59 (Empfehlung)
- Agency-Lizenz (unbegrenzt für Kundenprojekte, ohne Support): €199
Vorschau
So wirkt das Snippet live in einer Vape-/E-Zigaretten-Produktbeschreibung (mobil direkt sichtbar):
-
Live-Vorschau:
Uwell Caliburn G3 Pro – Produktseite öffnen
Mobil: Beschreibung sofort sichtbar, Tabs ausgeblendet, Bewertungs-Button unter der Beschreibung.
Anmelden
Informationen nach Produktsicherheitsverordnung (GPSR)
Kontakt für Produktsicherheitsfragen / Hersteller
Borban SystemsBoris Banaszak
An der Lehmkuhl 7
47495 Rheinberg
Deutschland
E-Mail: kontakt@borban.de
Tel.: 02843 9595-305