Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemacht

Gabe · ‎08-28-2024

Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemacht

In diesem Blogbeitrag haben wir mit @StephensWorld und mit Jonathan Meier von unserer deutschen Partner Agentur FinerHQ zusammengearbeitet, um euch zu zeigen, wie ihr mithilfe von CSS-Code benutzerdefinierte Code-Änderungen an eurem Shopify-Theme vornehmen könnt.

CSS (Cascading Style Sheets) ist die Sprache, die zur Formatierung von HTML-Inhalten verwendet wird, und CSS-Änderungen sind oft der erste Schritt zur Anpassung eures Shopify-Themes um die Darstellung vorhandener Seiten-Elemente anzupassen so wie ihr es euch vorstellt!

Probiert es ruhig aus - es macht sogar eine Menge Spaß!

Hinweis: Das Anpassen deines CSS erfordert einige Grundkenntnisse in CSS und HTML. Bevor du dein Theme anpasst, stelle sicher, dass du verstehst, welche Unterstützung verfügbar ist. Unsere Anleitung hier kann dir dabei helfen.

Inhaltsverzeichnis

Einführung in CSS
Identifizieren, was geändert werden soll
Arbeiten mit Class- oder ID-Werten
Einfache/häufige CSS-Änderungen
Theme-Editor vs. direkte Template-Änderungen
Wann man benutzerdefinierte Seitenvorlagen verwenden sollte
Profis beauftragen vs. DIY
Was mit Theme-Anpassungen möglich ist
CSS Media Queries und wie man Desktop und Mobile unterschiedlich stylen kann!
Fazit und ein paar Do's und Don'ts

1. Einführung in CSS

Shopify ist eine leistungsstarke und flexible E-Commerce-Plattform, die es Shop-Besitzern ermöglicht, optisch ansprechende und funktionale Online-Shops zu erstellen. Während Shopify eine große Auswahl an Themes bietet, kannst du durch die Anpassung dieser Themes deinen Shop wirklich einzigartig machen.

In diesem Blogpost zeigen wir, wie du benutzerdefinierte Code-Änderungen an deinem Shopify-Theme vornimmst, indem du CSS-Code verwendest. CSS (Cascading Style Sheets) ist die Sprache, die zur Gestaltung von HTML-Inhalten verwendet wird. CSS-Änderungen sind oft der erste Schritt bei der Anpassung deines Shopify-Themes und können genutzt werden, um das Aussehen vorhandener Elemente zu verändern.

2. Identifizieren, was geändert werden soll

Die meisten Shopify-Themes sind so codiert, dass du normalerweise entweder eine „class“ oder „id“ identifizieren kannst, um Codeänderungen vorzunehmen (anstatt ganze Abschnitte neu schreiben zu müssen).

Um die Klasse oder ID des Elements, das du bearbeiten möchtest, zu finden, kannst du die „Untersuchen“-Funktion von Google Chrome nutzen - die sog. Chrome Developer Console.

Wenn du im Frontend deiner Shopify-Website bist (so wie es ein Kunde sehen würde), klicke mit der rechten Maustaste auf das Element und wähle „Untersuchen“. Dies öffnet den Code der Seite auf der rechten Seite, sodass du tiefer in die Details eintauchen kannst.

Wenn du über bestimmte Codezeilen schwebst, wird der entsprechende Inhalt auf der Website hervorgehoben, sodass du weißt, welches Element der Code erzeugt. Sobald du den Code gefunden hast, der zu dem Inhalt gehört, den du bearbeiten möchtest, solltest du versuchen, entweder eine „class“ oder einen „id“-Wert zu finden.

Zum Beispiel könntest du so etwas sehen:

html:

class="text-center page-width page-width--narrow”

Im obigen Beispiel ist jede Klasse durch ein Leerzeichen getrennt, sodass hier tatsächlich 3 Klassen im Spiel sind:

text-center
page-width
page-width–narrow

Diese Klassen werden oft in mehreren Teilen der Website verwendet, daher solltest du je nach gewünschter Anwendung deiner Codeänderungen dein bestes Urteilsvermögen nutzen, wenn du eine Klasse auswählst.

FYI: Einige Drittanbieter Apps ermöglichen die Positionierung von Widgets und Buttons anhand von Klassen und IDs. Hierdurch kannst du die Position leichter auch ohne Code-Kenntnisse beeinflussen. Weitere Informationen dazu können dir die App-Entwickler zur Verfügung stellen.

3. Das Arbeiten mit Class- oder ID-Werten

Prefix: Je nachdem, ob du mit einer Klasse oder ID arbeitest, verwendest du ein anderes Präfix für den Code:

Klassen haben ein Punkt-Präfix (.)
IDs haben ein Hashtag-Präfix (#)

Anwendungsfall:

Klassen sind wiederverwendbar und können auf mehrere Elemente angewendet werden. Sie eignen sich gut zum Stylen von Gruppen von Elementen mit ähnlichen Eigenschaften, wie Buttons, Textblöcken oder Formularfeldern.
IDs sind einzigartig und sollten nur auf ein einzelnes Element angewendet werden. Sie werden für Elemente verwendet, die eindeutig identifiziert und gestylt werden müssen, wie ein bestimmter Header, Footer oder ein einzigartiger Abschnitt einer Seite.

Rangfolge: IDs haben eine höhere Spezifität als Klassen. Sie überschreiben die Stile von Klassen, wenn beide auf dasselbe Element angewendet werden.

Die allgemeine Struktur deiner CSS-Änderung erfordert, dass du deine Klasse/ID (mit dem entsprechenden Präfix) eingibst und dann eine Reihe von geschweiften Klammern „{}“ verwendest.

Beispiele:

css:

.class-name {
  /* Code hier */
}

#id-name {
  /* Code hier */
}

Sobald du die Struktur hast, fügst du den eigentlichen Code für die Änderungen hinzu, die du vornehmen möchtest. Der Code folgt der Struktur von „Identifikator“ + „Doppelpunkt“ + „Wert“ + „Semikolon“ .

Beispiel:

css:

.class-name {
  identifikator: wert;
}

Alternativ kannst du, wenn du mit Text arbeitest, die CSS-Änderungen oft vornehmen, ohne eine Klasse oder ID zu verwenden, sondern einfach nur den Typ des Textes, mit dem du arbeitest. Du kannst das CSS auch auf mehrere Elemente anwenden, indem du sie mit Kommas trennst.

Beispiele:

css:

p {
  identifikator: wert;
}

h1, h2, h3 {
  identifikator: wert;
}

Zuletzt kannst du auch CSS-Änderungen auf einen bestimmten Objekttyp innerhalb eines bestimmten Elements anwenden. Zum Beispiel: Absatztext innerhalb einer bestimmten Klasse:

css:

.class-name p {
  identifikator: wert;
}

4. Häufige CSS-Änderungen

Hier sind einige häufige Änderungen, die du vornehmen könntest:

Farben und Schriftarten ändern

css:

.class-name {
  background-color: #f1f1f1;
  color: #000000;
}

Dieser Code ändert die Hintergrundfarbe deines Elements in ein helles Grau und setzt die Schriftfarbe auf Schwarz.

Padding und Margins anpassen

css:

.class-name {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

Dieses Snippet fügt deinem Element Padding und Margins hinzu. Padding fügt mehr Platz innerhalb des Elements hinzu, während Margins mehr Platz außerhalb des Elements hinzufügen.

Buttons anpassen

css:

.btn-class {
  background-color: #ff6600;
  color: #ffffff;
  border-radius: 5px;
  padding: 20px;
}

Dieser Code passt das Aussehen von Buttons an, indem er ihnen eine neue Hintergrundfarbe, Schriftfarbe, einen abgerundeten Rand und Polsterung hinzufügt.

Elemente ausblenden

css:

.class-name {
  visibility: hidden;
}

.class-name {
  display: none;
}

Dies ist eine der häufigsten Codeanfragen in den Shopify-Foren – die Möglichkeit, ein Element auszublenden. Du hast zwei Optionen: „visibility: hidden“ blendet das Element aus, behält aber den Platz bei, den es einnahm. „display: none“ entfernt das Element und auch den Raum, den es einnahm.

5. Theme-Editor vs. direkte Template-Änderungen

Beim Anpassen deines Shopify-Themes durch benutzerdefinierte Codeänderungen hast du drei Hauptoptionen: den Theme-Editor, das direkte Bearbeiten der Theme-Vorlagen oder die Erweiterung deines Themes.

Theme-Editor

Im Theme-Editor hast du die Möglichkeit auf gesamter Theme-Ebene oder nur für bestimmte Abschnitte benutzerdefiniertes CSS einzufügen. Das ist gerade dann sinnvoll, wenn du bestimmte Anpassungen nur für einen spezifischen Abschnitt wie z. B. eine Hintergrundfarbe benötigst.

Vorteile: Einfacher zu verwenden, Änderungen sofort sichtbar, kann oft automatisch beim Upgrade der Theme-Version übernommen werden
Nachteile: Kann nur grundlegendes CSS, begrenzt, welche Klassen/IDs du anwenden kannst

Direkte Template-Änderungen

Um komplexere Anpassungen zu integrieren und Theme-Einstellungen zu überschreiben, ist es ggf. nötig, dem HTML-Element eine Klasse oder ein Styling zuzuordnen. Hier empfehlen wir dir, die entsprechende Stelle zu mithilfe der Liquid-Kommentarfunktion {% comment %} Kommentar {% endcomment %} zu dokumentieren. Hierdurch kannst du deine Anpassungen leichter identifizieren.

Vorteile: Volle Kontrolle über den Code, unbegrenzte Anpassungsmöglichkeiten
Nachteile: Erfordert Codekenntnisse, potenzielles Risiko, das Theme zu beschädigen, muss beim Upgrade des Themes neu codiert werden.

Theme-Erweiterung

Im Code Editor kannst du unter Assets eine neue CSS-Datei erstellen und diese in der Theme.liquid Datei referenzieren. Achte aber darauf, dass deine CSS-Datei unterhalb der Themeeigenen CSS-Datei platziert ist. Hierdurch nehmen deine Anpassungen eine höhere Instanz ein, wodurch deine Überschreibungen angewandt werden.

Vorteile: Volle Kontrolle über den Code, unbegrenzte Anpassungsmöglichkeiten, kann leicht beim Updates übertragen werden, das Theme bleibt weitestgehend unberührt.
Nachteile: Erfordert Codekenntnisse, muss beim Upgrade manuell kopiert werden (Copy & Paste).

Unsere persönliche Empfehlung ist, die Codeänderungen nach Möglichkeit im Theme-Editor vorzunehmen. Ich nehme in der Regel nur dann direkte Codeänderungen an den Template-Dateien vor, wenn ich im Theme-Editor nicht weiterkomme. Um dir den Zusammenhang der Anpassungen besser merken zu können, kannst du von der Kommentarfunktion im CSS-Format Gebrauch machen. Hierbei beginnt dein Kommentar mit /(Slash) gefolgt vom * (Stern). Den Kommentar beendest du mit der umgekehrten Reihenfolge, also mit * (Stern) gefolgt von einem /(Slash) (alles ohne Leerzeichen).

Hier ein Beispiel:

  /* Hier ist der Kommentar der keine Auswirkung hat */

6. Wann man benutzerdefinierte Seitenvorlagen verwenden sollte

Benutzerdefinierte Seitenvorlagen sind praktisch, wenn du eine Seite mit einem einzigartigen Layout oder speziellen Funktionen benötigst, die sich vom Rest deines Shops unterscheiden. Hier sind einige Szenarien, in denen benutzerdefinierte Seitenvorlagen nützlich sein können:

Landing Pages für Werbeaktionen
Produkte mit individualisierten Produkt-Features und Beschreibungen
Über-uns- oder Kontaktseiten
Blogpost-Layouts

7. Profis beauftragen vs. DIY

Während viele Anpassungen selbst gemacht werden können, gibt es Situationen, in denen es am besten ist, einen Profi zu engagieren:

Komplexe Funktionen
Design-Überarbeitungen
Erstellung neuer Abschnitte/Blöcke

Wenn du benutzerdefinierte Codeänderungen vornehmen möchtest, die deine Fähigkeiten übersteigen, kannst du dich mit Shopify-Partnern im Partnerverzeichnis abstimmen. Du kannst ganz einfach einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

8. Was mit Theme-Anpassungen möglich ist

Mit den richtigen Fähigkeiten und Kenntnissen ist fast alles möglich, wenn es um die Anpassung deines Shopify-Themes geht. Beispiele für fortgeschrittene Anpassungen sind:

Dynamischer Inhalt
Erweiterte Filteroptionen
Interaktive Elemente
Individuelle Checkout-Seiten

9. CSS Media Queries und wie man Desktop und Mobile unterschiedlich stylen kann!

Media Queries sind ein leistungsstarkes Werkzeug in CSS, das es dir ermöglicht, deine Website responsiv zu gestalten. Das bedeutet, dass sich das Layout deiner Seite je nach Bildschirmgröße und Gerät (wie Desktop, Tablet oder Smartphone) automatisch anpasst. Für Anfänger im Webdesign ist es wichtig zu verstehen, wie man Media Queries verwendet, um sicherzustellen, dass deine Shopify-Website sowohl auf großen als auch auf kleinen Bildschirmen gut aussieht.

Was sind Media Queries?

Media Queries erlauben es dir, bestimmte CSS-Regeln nur dann anzuwenden, wenn bestimmte Bedingungen erfüllt sind – zum Beispiel, wenn das Gerät eine bestimmte Bildschirmbreite hat. Dies wird besonders wichtig, wenn du unterschiedliche Layouts für Desktop und Mobile anstrebst.

Grundstruktur einer Media Query

Die einfachste Form einer Media Query sieht so aus:

@media only screen and (max-width: 768px) {
  /* Code für mobile Geräte */
}

In diesem Beispiel bedeutet max-width: 768px , dass der enthaltene CSS-Code nur dann angewendet wird, wenn der Bildschirm weniger als 768 Pixel breit ist. Dies ist typischerweise die Breite von Tablets und Smartphones im Hochformat.

Beispiel: Unterschiedliches Layout für Desktop und Mobile

Angenommen, du möchtest, dass ein bestimmtes Element auf Desktop-Bildschirmen anders aussieht als auf Mobilgeräten. So könntest du das umsetzen:

/* Desktop-Styles */
.element {
  background-color: #fff;
  font-size: 18px;
  padding: 20px;
}

/* Mobile-Styles */
@media only screen and (max-width: 768px) {
  .element {
    background-color: #f0f0f0;
    font-size: 14px;
    padding: 10px;
  }
}

In diesem Beispiel wird das Element auf Desktop-Bildschirmen einen weißen Hintergrund, eine größere Schrift und mehr Padding haben. Auf mobilen Bildschirmen wird es dagegen einen hellgrauen Hintergrund, kleinere Schrift und weniger Padding erhalten.

Häufig verwendete Breakpoints

Desktop: 1024px und größer
Tablet: 768px bis 1023px
Mobile: 767px und kleiner

Diese Breakpoints sind weit verbreitet und eine gute Grundlage für die Erstellung responsiver Websites.

Tipps für Anfänger

Beginne mit dem mobilen Layout: Entwickle zuerst für mobile Geräte und füge dann Media Queries für größere Bildschirme hinzu. Dies nennt man „Mobile First“-Ansatz.
Vermeide fixe Breiten: Verwende prozentuale oder relative Einheiten wie em oder rem, um flexible Layouts zu erstellen, die sich an verschiedene Bildschirmgrößen anpassen.
Teste auf verschiedenen Geräten: Vergewissere dich, dass deine Änderungen auf verschiedenen Geräten und Bildschirmgrößen gut aussehen.

Durch die Verwendung von Media Queries kannst du sicherstellen, dass dein Shopify-Shop auf jedem Gerät optimal funktioniert – egal ob auf einem großen Desktop-Monitor oder einem kleinen Smartphone-Bildschirm.

10. Fazit

Die Anpassung deines Shopify-Themes kann deinen Online-Shop hervorheben und ein einzigartiges Einkaufserlebnis für deine Kunden schaffen. Indem du mit einfachen CSS-Änderungen beginnst, kleine Code-Snippets ausprobierst und weißt, wann du professionelle Hilfe in Anspruch nehmen solltest, kannst du das Aussehen und die Funktionalität deines Shops verbessern.

Egal, ob du Änderungen über den Theme-Editor vornimmst oder direkt in die Templates gehst – die Möglichkeiten zur Anpassung sind nahezu endlos.

Zum Schluss noch ein paar Do's und Don'ts

Do's:

Versuche alle CSS-Anpassungen an einem Ort oder anhand einer Regel zu verwalten. Beispiel: die ausschließliche Verwendung der benutzerdefinierten CSS-Sektionen im Theme oder in einer dedizierten custom.css Datei. Hierdurch behältst du alle Anpassungen und ggf. Überschreibungen im Blick.
Dokumentiere deine Anpassungen, damit du den Sinn und Zweck einer Anpassung zu einem späteren Zeitpunkt nachvollziehen kannst.
Nutze Browser-Entwicklertools: Verwende die Entwicklertools in deinem Browser (z.B. Chrome Developer Tools), um CSS-Änderungen in Echtzeit zu testen, bevor du sie in deinen Code integrierst.
Verwende relative Einheiten: Setze auf relative Einheiten wie em oder rem anstelle von fixen Pixelwerten, um deine Website flexibler und besser anpassbar für verschiedene Bildschirmgrößen zu gestalten.
Teste deine Anpassungen: Überprüfe deine CSS-Änderungen auf verschiedenen Geräten und Browsern, um sicherzustellen, dass sie überall korrekt angezeigt werden.
Nutze Versionierung: Wenn du an größeren Projekten arbeitest, solltest du Versionierungstools wie Git verwenden, um den Überblick über deine Änderungen zu behalten und bei Bedarf leicht zu früheren Versionen zurückkehren zu können.

Don'ts:

Trage keine individuellen CSS-Anpassungen in die theme.liquid ein, wenn du nur eingeschränkte CSS-Kenntnisse hast. Die Änderungen gelten im gesamten Shop und können die Darstellung weiterer Elemente beeinflussen. Das führt auch dazu, dass Updates nicht reibungslos durchgeführt werden können. Änderungen zu deinem theme.liquid können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen.
Vermeide zu viele !important-Deklarationen: Der übermäßige Einsatz von !important kann später zu Schwierigkeiten führen, da es CSS-Regeln überschreibt und die Wartung des Codes erschwert.
Nicht unnötig viele Klassen vergeben: Überlade deine HTML-Elemente nicht mit zu vielen Klassen. Dies kann den Code unübersichtlich machen und die Leistung der Seite beeinträchtigen.
Nicht direkt in die Live-Umgebung arbeiten: Vermeide es, Änderungen direkt auf der Live-Website vorzunehmen. Arbeite stattdessen in einer Entwicklungsumgebung oder einer Kopie deines Themes, um Fehler zu vermeiden, ausser du verwendest den CSS Editor, wo du sog. "Dummy Änderungen" testen kannst ohne sie zu speichern.
Vermeide Inline-CSS: Setze CSS-Styles nicht direkt in die HTML-Elemente (style="..."). Dies erschwert die Wartung und beeinträchtigt die Trennung von Struktur und Design.

Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Möchtest du mehr erfahren? Dann halte die Augen offen für kommende Beiträge! @Finer ist in der deutschen Community stets aktiv und unermüdlich darin, zu helfen und zu beraten. Schon bald wird es hier ein exklusives Interview mit ihm geben, in dem er über seine Arbeit spricht, einen Einblick in seinen Alltag als Coder gibt und zeigt, wie er Shopify-Händler tatkräftig unterstützt.

Ebenfalls kannst du dich mit @StephensWorld austauschen! Besuche Stephen's World und beginne deine Reise der Zusammenarbeit mit unseren zertifizierten Shopify Partner noch heute!

Viel Spaß beim Coden!

Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemacht