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.
河口,要是das不ausreicht,嗯deinenShopify 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 dertextbasierte AuszeichnungsspracheCSS 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 einetextbasierte 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完形,verraten我们dir在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:
Wie funktioniert CSS-Code?
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: italicfür kursiv
该死das CSS阿莱Deklarationen innerhalb静脉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.
傅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.
所以安德斯t 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:
- Öffneden 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.“
- Öffneden Code für das Template und füge die CSS Regel für dieFarbänderung hinzu. Aber Achtung: Bei einem Template braucht derRegelsatz einen besonderen Rahmen.