Wie ändere ich die Schriftgröße eines Seiten-Titels? // Theme: Taste 2.0

[sprtgfy]

Hi liebe Community!

Ich würde gerne die Schriftgröße der Titel meiner Seiten ändern, die sind mir einfach viel zu groß..! Es gibt grundsätzlich schon eine Lösung zu der Anfrage, aber noch beim alten liquid bzw. nicht für mein Theme... (https://community.shopify.com/c/shopify-design/how-to-change-the-font-size-of-a-page-title/m-p/89624...) Kann mich hier vielleicht jemand dazu beraten?

zu groß:

zu groß

genau richtig (allerdings die Übersicht der Blogartikel):

so sollte es sein

[Ben310]

@sprtgfy 

Siehe hier wie im Theme Editor:

[sprtgfy]

Ja danke für den Lösungsansatz!

Grundsätzlich funktioniert es, mir ist aber nach wie vor zu groß... 😕

Kann / Sollte ich im css von H1 auf H2 umstellen bei der Standard "Seite"? Oder wirkt sich das negativ auf SEO aus, weil keine H1 mehr da ist...

[Gabe]

Hey @sprtgfy 

Das ändern der Blog Überschrift Grösse dürfte keine grossen Auswirkungen auf die SEO deines Shops haben. Dieser Artikel hat mit dem A/B Split Testing sogar gefunden, dass Seiten die keine <H> Tags verwenden (Control Group) ein kleines bisschen besser im organischen Traffic abgeschnitten haben als die Seiten die <H> Tags verwenden (Experimental Group).

Vielmehr sind die Meta Beschreibung und die Bilder Alt-Texte wichtig. Siehe unsere Anleitung dazu hier.

Lass wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!

Wir führen gerade eine kurze Umfrage zu Eurer Erfahrung in der Community durch mit 4 kurzen Fragen. Wenn Du mal 2-Min Zeit hast - die Umfrage ist auch anonym:

• https://forms.gle/SSVUmn5vXLYYW9Dh8

 
2022 wird dein Jahr! Haltet Abstand und bleibt Gesund.

[sprtgfy]

Hey @Gabe !

SEO ✅

Offen ist nur noch, wie und vor Allem wo (!) ich die standard-page Vorlage ändern kann von H1 auf H2... Ich bin mit dem neuen Code-Bereich noch nicht so vertraut...

danke für deinen Input soweit!

[Goaly29]

Hallo, ich habe das gleiche Problem mit meinem TASTE Theme (Version 14.0.0). Gibt es hierzu eine Lösung?

Grüße aus Süddeutschland,

Peter

[Gabe]

Hi Alle! 

Ihr könnt in die Theme Einstellungen gehen -> Typografie -> den Schriftgrößenmaßstab ändern:

Dann habe auch versch. Font Types unterschiedliche Größen:

Anonsten einen CSS verwenden indem du die Dev Console verwendest und unsere Anleitung hier:

Hier ein Beispiel CSS:

.collapsible-content__heading {
  font-size: 20px !important; /* Passe die Schriftgröße nach Bedarf an */
}

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Goaly29]

Hallo Gabe,

leider hilft das noch immer nicht weiter, denn auf "Seiten" kann ich kein Benutzer-spezifisches CSS einpflegen. Die Überschrift auf den "Seiten" ist schlicht und ergreifend zu groß (Theme TASTE 14.0.0). In welches Coding muss man wie reingehen, um die h1 Zuordnung anzupassen? Über die Dev Console kann ich die Datei nicht finden die zu diesem Coding führt:
<h1 class="main-page-title page-title h0 scroll-trigger animate--fade-in">Über verum vinum</h1>

Grüße

Peter

[Gabe]

Hey @Goaly29 

Wenn der Theme CSS Editor nicht auf den Pages im Editor greifen kann dann kannst du trotzdem den Code in das base.css ganz unten einpflegen. Es gibt auch sehr viele bestehende Threads zu diesem Thema.

VG,

[Goaly29]

Danke Gabe. Mit ...

.main-page-title {

    font-size: 36px !important;

}

am Ende von base.css hat es dann geklappt!

[Goaly29]

Bleibt nun leider noch das kleine Problem, dass auf der mobilen Anzeige die selbe Textgröße gezeigt wird ... verschlimmbessert ?

Gibt es eine einfache Möglichkeit, die Textgröße für Mobile Ansicht (Smartphone, Tablet) hier auch fest vorzugeben?

[Gabe]

Hey @Goaly29 

Wie wäre es mit:

/* Schriftgröße für Desktop-Ansicht */
.main-page-title {
    font-size: 36px !important; /* Passe die Schriftgröße nach Bedarf an */
}

/* Schriftgröße für mobile Geräte */
@media (max-width: 768px) {
    .main-page-title {
        font-size: 24px !important; /* Passe die Schriftgröße für mobile Geräte an */
    }
}

• .main-page-title: Diese Klasse wird verwendet, um die Schriftgröße der Hauptseitentitel für Desktop-Ansichten anzupassen.
• @media (max-width: 768px): Dieser Media-Query stellt sicher, dass die Schriftgröße nur für Geräte mit einer Bildschirmbreite von 768px oder weniger angepasst wird (typische mobile Pixelbreite).
• font-size: Passe die Schriftgrößen 36px und 24px nach Bedarf an.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[Goaly29]

Hallo @Gabe 

leider klappt das nicht. Sowohl auf dem iPhone, als auch auf dem Tablet zieht diese Änderung nicht.

Was könnte die Ursache sein?

[Gabe]

Hey @Goaly29 

Probleme mit Safari sind uns uns bekannt. Kannst du das bitte auf Chrome probieren?

Ansonsten, um dir dabei behilflich zu sein, wird unser Team das 👀 müssen. Hast du bereits ein Ticket bei unserem Support-Team geöffnet? 

Falls nicht, sende bitte eine E-Mail an unseren Support wie hier demonstriert von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.

[Goaly29]

Ich nutze nur Chrome ...

[Goaly29]

Wie gesagt, ich nutze Chrome und der o.g. Coding Vorschlag greift für die Mobile Darstellung leider nicht.

Woran könnte es noch liegen?