Farbe, Form, Funktion – das richtige Shopify Theme macht deinen Onlineshop nicht nur benutzer*innenfreundlich, sondern trägt auch maßgeblich dazu bei, deine Markenidentität zu prägen. Um dir den größtmöglichen Gestaltungsspielraum zu bieten, stehen dir daher mehr als 70 Shopify Themes zur Auswahl, die du mit zusätzlichen Designelementen und Plug-ins aus mehr als 2.900 Shopify-Apps individuell an deine Kund*innen und Geschäftsabläufe anpassen kannst.
Was aber, wenn all das nicht ausreicht, um deinen Shopify Shop genau so zu gestalten, wie du ihn dir vorstellst? Ganz einfach: Dann schreibst du dein Design mit CSS direkt in den Quellcode deines Themes. Denn hast du dich einmal mit den CSS-Grundlagen vertraut gemacht, kannst du auch ganz ohne Programmierkenntnisse kleine Änderungen vornehmen, um ein Shopify Theme an dein Branding anzupassen.
In diesem Artikel zeigen wir dir, was es mit der textbasierte Auszeichnungssprache CSS auf sich hat und wie du sie einsetzt, um mit einfachen Hacks dein Shopify Theme individuell zu gestalten.
Schau dir den monatlichen Beitrag zu unseren Produkt Updates an
Die Grundlagen: Was ist CSS?
CSS steht für Cascading Style Sheets und bezeichnet eine textbasierte Auszeichnungssprache, die maßgeblich dafür verantwortlich ist, wie dein Shopify Shop aussieht. CSS ist dabei das Gegenstück zu HTML, der Hypertext Markup Language. Die kennst du vermutlich nicht nur aus dem Backend deines Stores, sondern auch aus dem Text-Editor deines E-Mail-Programms oder vielleicht aus deinem Blog.
Lesetipp: Wie du eine einzigartige Über-uns-Seite gestaltest, verraten wir dir in diesem Beitrag.
Der HTML-Code bestimmt die Struktur, mit der Texte im Internet angezeigt werden. Er weist Überschriften als solche aus, setzt Zeilenumbrüche, rückt Aufzählungen ein und lässt uns Bilder in den Text einbetten. CSS hingegen verleiht dem Text seinen charakteristischen Look. In diesem Code sind Layout, Schriftart, -größe und -farbe sowie der Zeilenabstand und viele andere Designelemente enthalten, die das HTML nur noch abrufen muss.
Wenn du beispielsweise in deinem Shopify Shop auf drei Seiten eine Überschrift formatierst und diese immer dieselbe Farbe und Größe hat, ist diese Kombination im CSS so für Überschriften hinterlegt. Was bedeutet, dass du genau hier an den Stellschrauben drehen kannst, um deinem Theme mit CSS zu einem neuen Design zu verhelfen.
HTML und CSS: So entsteht das Theme eines Onlineshops
CSS-Code ist in sogenannten Regeln organisiert. Das sind kleine Ketten, die immer nach demselben Muster aufgebaut sind. Um diese aufzuschlüsseln, brauchen wir zuallererst ein Stück Text, das wir mit HTML codieren:
<H1>Wie funktioniert CSS-Code?</H1>
So wird unsere Frage „Wie funktioniert CSS-Code?“ als H1, also als größte Überschrift auf der Seite angezeigt. Wie diese Überschrift im konkreten Einzelfall aussieht, wissen wir damit aber noch nicht: Das kann je nach Theme variieren.
Groß oder klein, kursiv oder fett gedruckt, rot oder blau, gelb oder grün – all diese Faktoren ruft der HTML-Code aus einer Art Stylesheet für den Onlineshop ab. Und genau dieses Stylesheet ist die CSS-Regel. Für unser Beispiel könnte die etwa so aussehen:
H1 {color: red; font-size: 18px;}
Schauen wir uns das einmal etwas genauer an. CSS-Regelsätze sind immer so aufgebaut, dass am Anfang ein sogenannter Selektor steht. Der Selektor verweist auf eine bestimmte HTML-Codierung, für die wir hier den Stil festlegen. In unserem Fall ist es „H1“, das uns sagt, dass wir gerade die Regel für alle Überschriften mit dem HTML-Tag „H1“ festlegen.
Danach folgen, in einer geschweiften Klammer, die Deklarationen. Sie sind immer in englischer Sprache gehalten und bestimmen die einzelnen Aspekte des Designs. Wir haben hier „color:red“ für rote Schriftfarbe und „font-size:18px“ für Schriftgröße 18 gewählt.
Diese Liste könnten wir noch weiter fortführen, indem wir hinter das Semikolon am Ende der geschweiften Klammer beispielsweise noch einen der folgenden Deklarationen anfügen:
-
font-weight: bold für Fettdruck
-
font-style: italic für kursiv
Damit das CSS alle Deklarationen innerhalb einer Regel erkennt, müssen wir sie immer mit einem Semikolon voneinander trennen. Am Ende einer Klammer muss streng genommen keines stehen, aber indem du dir angewöhnst, trotzdem eins zu setzen, gehst du sicher, dass bei eventuellen Erweiterungen die neu hinzugefügte Deklaration korrekt angezeigt wird.
Lesetipp: Das Shopify-Lernkit für GraphQL.
Sicherheit geht vor: Warum du den Onlineshop zuerst duplizieren solltest
Der wichtigste Tipp in Sachen CSS für Themes, den wir für dich haben? Arbeite immer mit einer Kopie deines aktuellen Themes, nie mit dem Original. So stellst du sicher, dass du immer einen funktionierenden Onlineshop hast, ganz gleich, ob du die Umbauarbeiten in einem Schwung durchführen kannst oder die Änderungen doch lieber in kleinen Schritten in deinen Arbeitsalltag einbaust.
Ist der Shopify Store, an dem du arbeitest bereits online, ist das doppelt wichtig: Machen wir uns an einem Theme zu schaffen, das gerade in Gebrauch ist, sehen die Kund*innen den Onlineshop als Baustelle, auf der sich womöglich während ihres Einkaufs die Farben und Formen ändern. Das sorgt nicht nur für ein unangenehmes Einkaufserlebnis, sondern kann schlimmstenfalls auch dazu führen, dass Kund*innen ihren Einkauf nicht abschließen.
Führe daher alle Änderungen unsichtbar an einer Shop-Kopie durch und behandle das Freischalten des angepassten Themes als Relaunch. Sollte dabei etwas schief gehen oder dir das Ergebnis partout nicht gefallen, kannst du dank der Sicherheitskopie mit wenigen Klicks zum früheren Shopify Theme zurückkehren.
Um eine Kopie deines Themes anzulegen, logge dich in deinen Account ein und wähle unter „Onlineshop“ die „Themes“ aus. Hier suchst du das Theme, das du als Grundlage für das neue Design verwenden möchtest, und klickst unter „Aktionen“ auf die Schaltfläche „duplizieren.“ Und dann kann es auch schon losgehen.
So änderst du den CSS-Code für Shopify Shops
Wenn du das Shopify Theme dupliziert hast, klickst du im „Aktionen“-Menü neben der Kopie auf „Code edieren.“ So gelangst du zum Shopify Quellcode Editor. Dort suchst du im Ordner „Assets“ die CSS-Datei deines Themes.
Wenn du das Standard-Theme von Shopify benutzt, heißt die Datei „theme.scss.liquid.“ Benutzt du ein anderes Theme, kann das zwar variieren, aber du erkennst die CSS-Datei immer daran, dass in ihrem Namen „scss“ oder „css“ steht.
In dieser Datei nimmst du deine Änderungen am Theme vor. Um bestehende Regeln zu ändern, musst du diese aber nicht unbedingt im Code ausfindig machen: Es genügt, den neuen Regelsatz ans Ende der Datei zu setzen, denn die unterste Regel für einen bestimmten Selektor überschreibt in CSS immer alle vorherigen Angaben.
Das solltest du natürlich nicht allzu oft machen. Sammeln sich im CSS allzu viel unbenutzte Code-Reste, leidet über kurz oder lang die Ladezeit deines Shops darunter. Wenn es aber schnell gehen soll oder du deine Änderung erst ein paar Tage testen möchtest, bevor du dich dafür oder dagegen entscheidest, kannst du diese schnelle Erweiterung nutzen. Wichtig ist nur, dass du später daran denkst, das CSS von überflüssigem Code zu befreien.
Zwei einfache CSS-Hacks für dein Shopify Theme
Im Grunde brauchst du nicht viel mehr als diese CSS-Grundlagen, um Shopify Shops individuell zu gestalten. Nun musst du nur den Quellcode finden und an der richtigen Stelle die passende Regel einfügen, um das gewünschte Ergebnis zu erzielen.
Im Folgenden zeigen wir zwei einfache Hacks, um das Theme mit CSS anzupassen:
- Schriftfarbe ändern
-
Schaltflächen vergrößern
Wenn du noch keine Erfahrung mit CSS sammeln konntest, empfehlen wir dir, mit der Farbe anzufangen, denn diese Änderung kannst du bei Bedarf mit einem Klick wieder rückgängig machen. Streng genommen brauchst du den CSS-Code nämlich nicht, um die Schriftfarben in Shopify Shop anzupassen: Dafür hast du den Rich Text Editor, in dem du einfach deine Wunschfarbe anklicken kannst.
Allerdings kann auch der Rich Text Editor nicht alles, was du vielleicht brauchst, um den Store deiner Träume einzurichten – und hier kommt die CSS ins Spiel. Bevor du dich an komplexeren Anpassungen versuchst, ist die Änderung der Schriftfarbe daher ein gutes Startprojekt, um deine Grundlagen in der Praxis zu erproben. Außerdem kannst du dabei in aller Ruhe das Erstellen eines Templates ausprobieren. Das brauchst du, wenn du nur einzelne Seiten und nicht das Stylesheet für den kompletten Store verändern möchtest.
Lesetipp: 3 einfache Schritte zur Einrichtung einer lokalen Entwicklungsumgebung für Shopify Themes.
#1 So änderst du die Schriftfarbe in einem Shopify Shop
Vermutlich kannst du dir schon denken, wie unser erster CSS-Hack funktioniert. Wir öffnen den Quellcode, scrollen bis ans Ende und fügen eine neue Regel für die Farbe hinzu. Als Selektor können wir dabei ganz unterschiedliche HTML-Tags wählen, etwa:
- Um die größte Überschrift rot zu färben: H1 { color:red;}
- Um alle normalen Text-Absätze rot zu färben: p {color:red;}
-
Um fett gedruckte Begriffe rot hervorzuheben: b {color:red;}
Dieses Vorgehen hat allerdings einen kleinen Haken: Änderungen, die du so in die CSS-Datei schreibst, gelten für alle Unterseiten des Shops. Und während einheitliche Farbgebung bei den Überschriften durchaus das Branding unterstützen kann, willst du vielleicht nur auf ganz bestimmten Seiten alle fett gedruckten Wörter einfärben.
Um Änderungen nur auf das Design bestimmter Seiten anzuwenden, brauchst du daher ein neues Template. Das erstellst du wie folgt:
- Öffne den Quellcode Editor („Onlineshop“ > „Themes“ > „Aktionen“ > „Code edieren“).
- Hier findest du unter „Templates“ die Schaltfläche für „Neues Template.“
- Wähle die Seite aus, die du anpassen möchtest, und gib deinem Template einen neuen Namen. Klicke dann auf „Template erstellen.“
-
Öffne den Code für das Template und füge die CSS Regel für die Farbänderung hinzu. Aber Achtung: Bei einem Template braucht der Regelsatz einen besonderen Rahmen.
<style>
H1 {color:red;}
</style>
- Kehre zum Dashboard des Shops zurück und öffne von dort aus die Seite, die du individuell anpassen möchtest.
-
Hier findest du unter „Template“ ein Dropdown-Menü, aus dem du das neue Template auswählen kannst.
Jetzt musst du deine Änderungen nur noch speichern – und schon geht deine erste selbst gemachte CSS-Änderung online.
#2 So veränderst du die Schaltflächen in Shopify Shops
Mit kleinen Änderungen am CSS kannst du Themes nicht nur übersichtlicher gestalten, sondern auch die Bedienung an unterschiedlichen Endgeräten verbessern. Du kannst zum Beispiel Schaltflächen, die Kund*innen leicht finden und anklicken sollen, ein wenig vergrößern.
Nehmen wir als Beispiel Social-Media-Buttons: Damit Kund*innen Angebote und Produkte mit nur einem Klick über Facebook, Twitter oder Pinterest mit all ihren Freund*innen teilen können, sollten diese Schaltflächen gut sichtbar sein.
Um sie zu verändern, gehen wir aber nicht direkt in den Quellcode. Stattdessen finden wir zuerst anhand einer Vorschau heraus, wie groß die Buttons werden sollen.
- Öffne eine Seite im Store, auf der deine Social-Media-Buttons zu sehen sind.
- Ein Rechtsklick auf eine Schaltfläche zeigt dir die Option „Element untersuchen.“ Mit ihr öffnest du ein Pop-up-Fenster, das dir im Split-Screen links den HTML- und rechts den CSS-Code dieser Seite anzeigt.
- Führst du den Cursor über den HTML-Code, werden die Teile der Website, die darin enthalten sind, farbig für dich hervorgehoben. Finde so die Abschnitte im Code, die für die Social-Media-Buttons stehen: Sie sind mit „btn--small“ markiert.
- Im CSS ist nun für jeden dieser Buttons ein Pixel-Wert für „padding“ angegeben. Das ist der Abstand zwischen der Schrift und dem Rand des Buttons. Die erste Zahl steht für den Abstand nach oben und unten, die zweite für den Abstand nach rechts und links.
- Verändere die Zahlen, bis die Schaltflächen in der Vorschau die gewünschte Größe erreicht haben.
- Jetzt öffne den Quellcode des Shopify Themes und suche nach „btn--small“, um die Stelle im Code zu finden, an der du eben in der Vorschau gearbeitet hast: Trage hier die neuen Werte ein und speichere die Datei, um deine Änderungen zu veröffentlichen.
Je nachdem, wie du die Größe einer Schaltfläche veränderst, solltest du auch daran denken, die Schriftgröße entsprechend anzupassen. Sie wird durch die Zahl nach dem Tag „font-size“ bestimmt. Wir empfehlen ein proportionales Wachstum: Vergrößerst du die Schrift um genauso viel Prozent wie die Schaltfläche selbst, entsteht ein harmonisches Gesamtbild.
Ein CSS für alle Themes
Unsere beiden Hacks sind nur zwei von vielen Beispielen dafür, wie du mit CSS Shopify Themes individuell verändern kannst. Mit demselben CSS-Hack, mit dem du Schaltflächen vergrößerst, kannst du diese natürlich auch verkleinern oder die Größe anderer Elemente auf deiner Website anpassen.
Damit aber nicht genug: CSS ermöglicht es dir auch, Schatten hinter Texte zu legen, Layouts zu erzeugen, die in deinem Theme eigentlich nicht vorgesehen sind und Produktdetails in ausklappbare Menüs zu verlegen.
Wenn du also eine ganz besondere Idee hast, für die du einfach keine passende App und kein Plug-in finden kannst, kann CSS eine schnelle Lösung bieten. Auch ganz ohne Programmierkenntnisse.
Tipp: Wenn du darüber hinaus weitere Tipps und Tricks zur Veränderung von Shopify Themes suchst, schau dir unser Video: „Offizieller Shopify Coding Stream: Theme Entwicklung: Liquid HTML CSS JavaScript" an. Hier zeigen Roman Zenner, Shopify Technical Partner Manager und Daniel Kolb von der Agentur Especial.Digital wie ein Shopify Theme neu gestaltet wird:
