Individuelle CSS-Anpassungen und integration des ECWID-Shop´s über das HTML Modul des Duda-Baukastens
This is a subtitle for your new post

Individuelle CSS-Anpassungen im ECWID-Shop über den Duda-Baukasten
Für eine professionelle und markenkonforme Darstellung eines Onlineshops ist das visuelle Feintuning per CSS ein entscheidender Faktor. Das ECWID-Shopsystem, das sich nahtlos in den Duda-Website-Baukasten integrieren lässt, bietet hier einige praktikable Möglichkeiten zur Gestaltung – sowohl über systemeigene Einstellungen als auch durch gezielte CSS-Anpassungen.
1. CSS-Anpassungen in ECWID selbst
Innerhalb von ECWID lassen sich viele Designanpassungen direkt im Backend vornehmen. Über das sogenannte Design-Panel im Adminbereich kann zusätzlich benutzerdefinierter CSS-Code eingebunden werden. Damit können beispielsweise:
- Farben, Schriften oder Abstände angepasst,
- Schaltflächen neu gestaltet oder
- Produktansichten individuell verändert werden.
Die CSS-Anpassungen wirken sich dabei global auf alle Shopseiten aus, was für ein einheitliches Erscheinungsbild sorgt.
Pfad:
ECWID Admin > Gestaltung > Theme > CSS bearbeiten
2. ECWID in Duda integrieren und per HTML-Widget steuern
Der ECWID-Shop wird in Duda meist über ein HTML-Widget eingebunden. In diesem Widget kann neben dem Skript zur Shop-Einbindung auch eigener CSS-Code integriert werden, der dann auf das Laden des Shops Einfluss nimmt.
So funktioniert es:
- Im Duda-Editor ein HTML-Widget auf der gewünschten Seite platzieren.
- Den ECWID-Integration-Code einfügen (meist JavaScript).
- Optional: Direkt darunter eigenes CSS schreiben – zum Beispiel zur Anpassung von Schriftgrößen, Buttonfarben oder Containerbreiten.
Tipp: Um gezielt einzelne Elemente im Shop zu stylen, empfiehlt sich der Einsatz von Browser-Entwicklertools (F12), um die jeweiligen Klassen und IDs zu identifizieren.
3. Globale Designkontrolle über Duda-Designsystem
Für eine durchgehende Gestaltung können Shop-Komponenten auch an das übergeordnete Design des Duda-Baukastens angepasst werden. Farbwerte, Schriftarten und Abstände lassen sich über die Duda-eigenen Design-Einstellungen definieren. Wichtig ist jedoch: CSS, das direkt im HTML-Widget oder im ECWID-Backend eingebunden wird, hat Vorrang vor Duda-Stileinstellungen.
Fazit
Durch die Verbindung von ECWID und Duda entsteht ein flexibler und visuell anpassbarer Onlineshop. Die Kombination aus systemeigener Shopverwaltung und individueller CSS-Steuerung eröffnet viele kreative Möglichkeiten – ohne dabei auf ein großes Entwicklerteam angewiesen zu sein.
Für alle, die professionelle Unterstützung bei der Integration oder bei spezifischen CSS-Umsetzungen benötigen, stehe ich von S-Inspiration selbstverständlich gerne beratend zur Seite.





