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. 🙂
Bist du ein EU-Dropshipping Supplier, 3PL-Streckengeschäft Lieferant, oder ein Spediteu...
By Gabe Apr 18, 2024Wie du eine intuitive und ansprechende Online-Shopping-Experience für deine Kunden au...
By Gabe Apr 1, 2024Shopify unterstützt die weltweit innovativsten Marken und Unternehmer:innen. Um Unterne...
By SarahF_Shopify Mar 25, 2024