Shopify-Themes, Liquid, Logos und ähnliche Themen
Hallo zusammen
Ich möchte gerne für die H1-Überschriften eine andere Schriftart einsetzen. Und zwar die Crimson Pro in Bold.
Wäre das irgendwie möglich?
Hier meine Webseite:
https://www.wickelart.ch
Wichtig aber ist für mich, dass in der Collection Grid die Artikelbezeichnungen nicht auch in dieser Schriftart sind. Die sollen so in der Schriftart Raleway bleiben. Es geht wirklich nur um die grossen Überschriften wie z.B auf der Homepage im Header:
Dein Schweizer Onlineshop für
"MODERNE STOFFWINDELN"
und dann z.B. weiter unten:
waschbare & natürliche Stoffwindeln aus der Schweiz
"WICKELART-WOLLWINDELN"
(das in Grossbuchstaben sollte in der Schriftart Crimson Pro Bild sein)
Wie genau sollte der Code im CSS sein? Ich habe schon einiges versucht, doch es klappte einfach nicht.
Danke für eure Hilfe 😉
Gelöst! Zur Lösung
Erfolg.
Hey @sabi83
Freut mich, dass das im grossen und ganzen geklappt hat.
Die text-transform
-Eigenschaft steuert die Groß- und Kleinschreibung von Text. Wenn du für bestimmte Überschriften den Wert none
festlegst, sollte dies die Uppercase-Transformation rückgängig machen. Das Problem ist jedoch, dass es andere CSS-Regeln deines Themes geben könnte, die nach deiner Regel angewendet werden und diese überschreiben.
Ein Ansatz, um sicherzustellen, dass deine Regel Vorrang hat, besteht darin, sie spezifischer zu gestalten oder das !important
-Attribut zu verwenden (obwohl es allgemein empfohlen wird, !important
zu vermeiden, wenn es nicht unbedingt notwendig ist).
Versuche, vielleicht die Regel wie folgt zu aktualisieren:
h1.SectionHeader__Heading {
font-family: 'Crimson Pro Bold';
text-transform: none !important;
}
Wenn das !important
-Attribut nicht funktioniert, könnte es auch an der spezifischen Reihenfolge oder Priorität der CSS-Regeln liegen und somit notwendig sein, den Elementinspektor (Rechtsklick im Shop -> "Inspect") in deinem Browser zu verwenden, um die angewendeten Stile zu überprüfen und herauszufinden, welche Regel die Transformation auf Uppercase verursacht.
Wenn die Änderung weiterhin nicht greift, gibt es noch die Möglichkeit, dass es eine JavaScript-basierte Transformation gibt, die von deinem Theme verwendet wird, aber das wäre eher ungewöhnlich. Ein erster Schritt wäre, sicherzustellen, dass die CSS-Änderungen korrekt angewendet werden.
Ansonten den Support deines Theme-Entwicklers kontaktieren, um weitere Tipps zu erhalten.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Hey @sabi83
Das Hinzufügen einer neuen Schriftart in Shopify beinhaltet einige Schritte. Beachte auch dass alle Shopify Themes out-of-the-box mit einer eigenen Font Library der sog. "Web-Safe" Fonts kommen. Wir haben dazu eine Anleitung hier aber das sollte mit einem Experten durchgeführt werden. Gerne kann ich welche bei Bedarf empfehlen wie z. B. unser Shopify Partner aus der Schweiz @ECommercifyAB.
Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. 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.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Die Schritte:
Wenn du die Schriftart "Crimson Pro Bold" für bestimmte H1-Überschriften nutzen möchtest, während andere Teile deiner Website weiterhin die Schriftart "Raleway" verwenden, kannst du zuerst die Schriftart "Crimson Pro" zu deinem Shopify-Theme hinzufügen. Im Theme auf "Aktionen" > "Code bearbeiten". Unter dem Bereich "Assets" klicke auf "Neue Asset hinzufügen" und lade die Schriftdatei "Crimson Pro Bold" hoch (meistens .woff
oder .woff2
Dateiformat).
CSS Code hinzufügen:
Nachdem du die Schriftart hochgeladen hast, musst du sie in deinem CSS verwenden. Im selben "Code bearbeiten"-Bereich, öffne deine base.css
oder eine ähnliche CSS-Datei und füge. Füge den folgenden Code am Anfang der Datei hinzu:
@font-face {
font-family: 'Crimson Pro Bold';
src: url('{{ 'name-der-schriftdatei.woff2' | asset_url }}') format('woff2');
font-weight: bold;
font-style: normal;
}
Ersetze 'name-der-schriftdatei.woff2'
durch den tatsächlichen Dateinamen der hochgeladenen Schrift. Jetzt, da die Schriftart in deinem CSS verfügbar ist, kannst du sie für deine H1-Überschriften verwenden. Da du jedoch nicht alle H1-Überschriften ändern möchtest, musst du vielleicht spezifische CSS-Klassen oder IDs verwenden. Füge den folgenden Code hinzu:
h1.deine-klasse {
font-family: 'Crimson Pro Bold', sans-serif;
}
Ersetze .deine-klasse
durch die tatsächliche Klasse oder ID der Überschriften, die du ändern möchtest. Wenn du dir nicht sicher bist, welche Klasse oder ID verwendet wird, kannst du den HTML-Quellcode der betreffenden Seite überprüfen oder Entwicklertools in deinem Browser verwenden.
Bitte beachte auch, dass dieser Ansatz erfordert, dass du die exakte Klasse oder ID der Überschriften kennst, die du ändern möchtest. Wenn du Schwierigkeiten hast, die richtige Klasse oder ID zu finden, oder weitere Hilfe benötigst, lass es mich wissen!
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Hallo Gabe
Danke vielmals für deine Hilfe. Das hat jetzt schon mal recht gut geklappt. Ein Problem habe ich aber noch: Ich möchte gerne diese Headings, welche ich nun in dieser anderen Schriftart, nicht als "Uppercase"-Buchstaben, sondern ganz normal. Alle anderen Überschriften dürfen aber weiterhin in Grossbuchstaben sein. Ich habe im CSS folgendes eingegeben:
h1.SectionHeader__Heading {
font-family: 'Crimson Pro Bold';
text-transform: none;
}
Es ist bereits live, du kannst gerne hier schauen:
https://www.wickelart.ch
Leider sind die Buchstaben aber noch immer alle in gross. Vielleicht liegt es daran, dass ich in den Einstellungen des Themes bei Typografie ein Häckchen bei "Überschriften in Uppercase" gesetzt habe. Aber wenn ich das Häckchen entferne, ist die Schriftart aller Überschriften viel kleiner (sieht absolut nicht gut aus ;-). Und bei allen übrigen Überschriften möchte ich ja Uppcercase. Vielleicht kannst du mir nochmals helfen? Danke vielmals!
Liebe Grüsse
Erfolg.
Hey @sabi83
Freut mich, dass das im grossen und ganzen geklappt hat.
Die text-transform
-Eigenschaft steuert die Groß- und Kleinschreibung von Text. Wenn du für bestimmte Überschriften den Wert none
festlegst, sollte dies die Uppercase-Transformation rückgängig machen. Das Problem ist jedoch, dass es andere CSS-Regeln deines Themes geben könnte, die nach deiner Regel angewendet werden und diese überschreiben.
Ein Ansatz, um sicherzustellen, dass deine Regel Vorrang hat, besteht darin, sie spezifischer zu gestalten oder das !important
-Attribut zu verwenden (obwohl es allgemein empfohlen wird, !important
zu vermeiden, wenn es nicht unbedingt notwendig ist).
Versuche, vielleicht die Regel wie folgt zu aktualisieren:
h1.SectionHeader__Heading {
font-family: 'Crimson Pro Bold';
text-transform: none !important;
}
Wenn das !important
-Attribut nicht funktioniert, könnte es auch an der spezifischen Reihenfolge oder Priorität der CSS-Regeln liegen und somit notwendig sein, den Elementinspektor (Rechtsklick im Shop -> "Inspect") in deinem Browser zu verwenden, um die angewendeten Stile zu überprüfen und herauszufinden, welche Regel die Transformation auf Uppercase verursacht.
Wenn die Änderung weiterhin nicht greift, gibt es noch die Möglichkeit, dass es eine JavaScript-basierte Transformation gibt, die von deinem Theme verwendet wird, aber das wäre eher ungewöhnlich. Ein erster Schritt wäre, sicherzustellen, dass die CSS-Änderungen korrekt angewendet werden.
Ansonten den Support deines Theme-Entwicklers kontaktieren, um weitere Tipps zu erhalten.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
YES....es hat geklappt! Danke vielmals für die ausführliche Beschreibung!!
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Mit dem Lernpfad der Shopify Academy und dem Verified Skills-Badge Expanding Your Sho...
By Shopify Feb 7, 2025Den Verkauf im Großhandel steigern: In der Shopify Academy lernst du, wie das geht, zum...
By Shopify Feb 3, 2025Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024