Eine der größten Stärken der Shopify-Plattform ist die große Auswahl an Shop-Themes (sowohl kostenlos als auch kostenpflichtig). Manchmal müssen Sie jedoch das Layout oder die Farben leicht anpassen. Für einige dieser Änderungen (insbesondere für fortgeschrittene) müssen Sie die CSS-Datei des Themes bearbeiten. Sie können das benutzerdefinierte CSS auch verwenden, um das Design der Drittanbieter-Apps zu bearbeiten, die in Ihrem Shop installiert sind. Was ist der beste Weg, dies zu tun?
Option 1: Benutzerdefiniertes CSS über den Theme-Editor hinzufügen (empfohlen)
Im Februar 2023 hat Shopify eine neue Methode zur Verwaltung von benutzerdefiniertem CSS eingeführt. Dies ist nun ein nativer Bestandteil jedes von Shopify entwickelten Themes (z. B. Dawn) und unsere empfohlene Option zur Verwaltung von CSS in Ihrem Shop.
Die Hauptvorteile sind eine einfache CSS-Verwaltung, eine Live-Vorschau der Änderungen, unterstützte Theme-Updates sowie ein integrierter Validator und Vorschläge.
Um benutzerdefiniertes CSS über den Theme-Editor hinzuzufügen, befolgen Sie bitte diese Schritte:
- Gehen Sie in Ihrem Shop-Admin-Bereich zu Vertriebskanäle > Onlineshop > Anpassen
- Gehen Sie zu den Theme-Einstellungen (Pinsel-Symbol im linken Menü) > BENUTZERDEFINIERTES CSS
- Fügen Sie das benutzerdefinierte CSS nach Bedarf hinzu, prüfen Sie die Live-Vorschau und klicken Sie auf Speichern, wenn alles passt
Der Hauptnachteil ist die Zeichenbegrenzung von 500 Zeichen für einen bestimmten Abschnitt und 1.500 Zeichen für das gesamte Theme.
Option 2: Das Theme-Design bearbeiten (Farben, Schriftarten, CSS usw.)
Manchmal müssen Sie das CSS gar nicht bearbeiten, sondern können einfach den integrierten Theme-Customizer verwenden. Er bietet je nach verwendetem Theme verschiedene Optionen, meist können Sie jedoch nur Standardeinstellungen wie Farben, Schriftarten und manchmal Layouts ändern.
Einige Themes verfügen auch über einen Abschnitt namens „Benutzerdefiniertes CSS“, in den Sie Ihr CSS einfügen können. Dies ist praktisch sehr ähnlich wie das Bearbeiten einer Theme-CSS-Datei (siehe unten), da die Änderungen beim Aktualisieren des Themes ebenfalls verloren gehen. Es sei denn, das Theme verwendet einen fortschrittlichen Theme-Updater, was bei den wenigsten der Fall ist.
Option 3: Benutzerdefiniertes CSS in Ihrem Theme hinzufügen/bearbeiten
Die gängige Methode zur Bearbeitung von CSS ist die Änderung innerhalb der vorhandenen CSS-Datei im Theme-Code. Sie heißt normalerweise theme.scss.liquid oder base.css in den neuen Shopify 2.0-Themes (z. B. Dawn). Sie finden sie, indem Sie in Ihrem Shop-Admin-Bereich zu Onlineshop > Themes > Aktionen > Code bearbeiten > Assets-Ordner gehen.
Sobald Sie die Datei geöffnet haben, können Sie beliebiges CSS bearbeiten oder hinzufügen. Der Nachteil ist, dass Ihr CSS verloren geht, wenn Sie das Theme ändern oder aktualisieren. Es ist eine bewährte Methode, alle Ihre Anpassungen in einem Abschnitt namens „Benutzerdefiniertes CSS“ oder ähnlich zu speichern und diese bei Bedarf einfach in das neue Theme zu kopieren.
Option 4: Die benutzerdefinierte CSS-Datei erstellen
Dies ähnelt sehr der zweiten Option, jedoch erstellen Sie anstelle der Bearbeitung einer bestehenden CSS-Datei eine neue. Der Hauptvorteil besteht darin, dass Sie Ihre CSS-Datei nach einer Aktualisierung oder einem Wechsel des Themes einfach wieder verbinden können.
Um Ihre eigene CSS-Datei zu erstellen, gehen Sie im Shop-Admin-Bereich zu Onlineshop > Themes > Aktionen > Code bearbeiten > Assets und klicken Sie auf Neues Asset hinzufügen. Wählen Sie im Pop-up-Fenster Leere Datei erstellen und geben Sie ihr einen beliebigen Namen (zum Beispiel custom.css).
Sobald die neue CSS-Datei erstellt ist, können Sie Ihren benutzerdefinierten CSS-Code hinzufügen. Wichtig ist, dass Sie die Datei in Ihrem Theme „aufrufen“, damit sie auch tatsächlich verwendet wird. Gehen Sie dazu in den Ordner Layout und öffnen Sie die Datei theme.liquid. Fügen Sie den folgenden Liquid-Code in den <head>-Bereich ein, wobei "custom.css" der Name Ihrer CSS-Datei ist.
Wenn Sie Ihr Theme aktualisieren oder wechseln, müssen Sie diesen Code erneut in theme.liquid einfügen. Die benutzerdefinierte CSS-Datei bleibt jedoch immer in Ihrem Assets-Ordner erhalten.
Option 5: Benutzerdefiniertes CSS über eine Drittanbieter-App hinzufügen/bearbeiten
Die letzte Methode erfordert die Installation einer Drittanbieter-App, bietet jedoch einen großen Vorteil. Das gesamte benutzerdefinierte CSS, das in der App eingegeben wird, ist unabhängig von Ihrem aktuellen Theme. Sie können also Themes nach Belieben wechseln oder aktualisieren, während das CSS erhalten bleibt. Alternativ können Sie das CSS, wie im Beispiel unten gezeigt, gezielt für jedes installierte Theme anwenden.
Es gibt einige Apps, die dies ermöglichen, und manche davon sind sogar kostenlos. Der Nachteil ist, dass jede App die Performance Ihres Shops beeinflussen kann, insbesondere wenn das CSS über eine separate Datei geladen wird. Überlegen Sie daher sorgfältig, welcher Weg für Ihren Shop am besten geeignet ist.
Wenn Sie Hilfe bei der Anpassung Ihres Shop-CSS oder bei Theme-Änderungen benötigen, können Sie uns gerne kontaktieren. Unser Agentur-Team hilft Ihnen gerne weiter.
