Shopify-Themes, Liquid, Logos und ähnliche Themen
Hallo,
ich will gern die Schriftgröße im Bildbanner des Dawn Themes ändern. Leider gibt es dort keinen Shopify Editor. Gibt es irgendeine Möglichkeit hier im Code etwas anzupassen?
Danke für eine Rückmeldung.
Gelöst! Zur Lösung
Erfolg.
@Finer Danke für die ausführliche Beschreibung. Ich nehme es auf und versuche es umzusetzen. 🙂
@BensGinger ja, das geht per CSS. Hast du Kenntnisse in diesem Bereich?
@Finer Ein wenig habe ich Erfahrung bzw. mit einer kurzen Anleitung bekomme ich das sicherlich selber im Code eingebaut. Danke schon einmal für die Hilfe.
@BensGinger dann musst du im Code-Editor in der base.css Datei die Werte für h0 & h1 anpassen. Allerdings kann sich das auch auf andere Elemente übertragen, wo die Schrift ebenfalls auf die Werte zugreifen. Da man bei Dawn im Bild-Banner zwischen zwei Größen wählen kann, musst du einer der beiden Größen anpassen.
.h0 {
font-size: calc(var(--font-heading-scale) * 4rem);<-- Mobile Ansicht
}
@media only screen and (min-width: 750px) {
.h0 {
font-size: calc(var(--font-heading-scale) * 5.2rem);<-- Desktop Ansicht
}
}
h1,
.h1 {
font-size: calc(var(--font-heading-scale) * 3rem);<-- Mobile Ansicht
}
@media only screen and (min-width: 750px) {
h1,
.h1 {
font-size: calc(var(--font-heading-scale) * 4rem);<-- Desktop Ansicht
}
}
Wenn die Schrift kleiner werden soll, könntest du auch in der Section das Class-Attribut von .h1 auf .h2 oder .h3 wechseln. Wenn die Schrift größer werden soll, kannst du entweder eine neue Class mit der Wunschgröße definieren oder du verwendest das "style"-Attribut für den entsprechenden Container:
<h2 class="banner__heading h0" style="font-size:6em;">
<span>Talk about your brand</span>
</h2>
Erfolg.
@Finer Danke für die ausführliche Beschreibung. Ich nehme es auf und versuche es umzusetzen. 🙂
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