Gibt es eine Liste, in der Überschriften Bezeichnung (H1, H2...) zugeordnet sind?

[Telefongeist]

Hallo,

ich habe meine Schriftarten im Theme-Code wie folgt geändert:

*****************************************************
@font-face {
font-family: "Grandstander";
src: url('https://cdn.shopify.com/s/files/1/0749/8681/5755/files/Grandstander-VariableFont_wght.woff?v=1720303...') format("woff"),
url('https://cdn.shopify.com/s/files/1/0749/8681/5755/files/Grandstander-VariableFont_wght.woff2?v=172030...') format("woff2"),
url('https://cdn.shopify.com/s/files/1/0749/8681/5755/files/Grandstander-VariableFont_wght.ttf?v=17203038...') format("truetype"),
}

@font-face {
font-family: "Grandstander SemiBold";
src: url('https://cdn.shopify.com/s/files/1/0749/8681/5755/files/Grandstander-SemiBold.woff?v=1720308365') format("woff"),
url('https://cdn.shopify.com/s/files/1/0749/8681/5755/files/Grandstander-SemiBold.woff2?v=1720308364') format("woff2"),
url('https://cdn.shopify.com/s/files/1/0749/8681/5755/files/Grandstander-SemiBold.ttf?v=1720308365') format("truetype"),
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3.,.h4,.h5,.h6,p {
font-family: "Grandstander SemiBold" !important;}

*{
font-family: "Grandstander" !important;}

************************************************************

Das funktioniert auch prima, aber ich fürchte, dass ich mit dem Sternchen einige Ebenen erfasse, die man noch dezidierter nutzen könnte.

So würde ich gerne die Namen der Produkte, die z.B. bei der Anzeige einer Kategorie auf der Startseite erscheinen fett erscheinen lassen, statt so wie hier, wo Preis und Bezeichnung gleich "schwer" sind:

(Kopie aus anderem Shop)

Gibt es irgendwo eine Liste, die z.B. so aufgebaut ist?:

Seitenüberschrift -> H1

Kategorieüberschrift -> H2

Kategorietext -> p oder * oder ???

...oder kann mir "wenigstens" jemand verraten, was ich im Theme-Code ergänzen kann, um diese Bezeichnungen auch bold anzeigen zu lassen? Die Liste/Aufstellung wäre allerdings genial, da der Shop noch an anderen Stellen verbessert werden könnte...

Vielen Dank vorab und sonnige Grüße

[Gabe]

Hey @Telefongeist 

Danke für die Angaben und um deine Schriftarten und Überschriften in deinem Shopify-Theme präziser zu gestalten, kannst du spezifische CSS-Selektoren anstelle des universellen Selektors * verwenden. Hier ist eine detaillierte Anleitung, wie du das machen kannst:

Schritt 1: Identifikation der HTML-Tags

Um eine Liste von HTML-Tags und deren Verwendung in deinem Shopify-Theme zu erstellen, kannst du das Inspektor-Tool deines Browsers verwenden. Hier sind einige allgemeine Zuweisungen:

• Seitenüberschrift: h1
• Kategorieüberschrift: h2
• Produktname: oft h3 oder h4
• Produktbeschreibung: p
• Preise: kann span oder div sein

Schritt 2: Anpassen des CSS

Um die Schriftarten und Schriftstärken anzupassen, kannst du deine CSS-Datei bearbeiten. Hier ist ein Beispiel, wie du spezifische Tags ansprechen kannst:

@font-face {
  font-family: "Grandstander";
  src: url('https://cdn.shopify.com/s/files/1/0749/8681/5755/files/Grandstander-VariableFont_wght.woff?v=1720303805') format("woff"),
       url('https://cdn.shopify.com/s/files/1/0749/8681/5755/files/Grandstander-VariableFont_wght.woff2?v=1720303805') format("woff2"),
       url('https://cdn.shopify.com/s/files/1/0749/8681/5755/files/Grandstander-VariableFont_wght.ttf?v=1720303806') format("truetype");
}

@font-face {
  font-family: "Grandstander SemiBold";
  src: url('https://cdn.shopify.com/s/files/1/0749/8681/5755/files/Grandstander-SemiBold.woff?v=1720308365') format("woff"),
       url('https://cdn.shopify.com/s/files/1/0749/8681/5755/files/Grandstander-SemiBold.woff2?v=1720308364') format("woff2"),
       url('https://cdn.shopify.com/s/files/1/0749/8681/5755/files/Grandstander-SemiBold.ttf?v=1720308365') format("truetype");
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p {
  font-family: "Grandstander SemiBold" !important;
}

.product-title {
  font-family: "Grandstander SemiBold" !important;
  font-weight: bold;
}

.product-price {
  font-family: "Grandstander" !important;
}

* {
  font-family: "Grandstander" !important;
}

Abhängig von deinem Theme können die Klassen und IDs variieren. Du musst eventuell die spezifischen Klassen für Produktnamen und Preise anpassen. Verwende das Inspektor-Tool in deinem Browser, um die genauen Klassen oder IDs zu finden. Hier ist ein Beispiel, wie du das machen könntest:

<div class="product-card">
  <h3 class="product-title">Produktname</h3>
  <span class="product-price">€9,99 EUR</span>
</div>

Und der CSS-Code dazu:

.product-title {
  font-family: "Grandstander SemiBold" !important;
  font-weight: bold;
}

.product-price {
  font-family: "Grandstander" !important;
  color: #666; /* Beispielhafte Farbe */
}

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.

[Telefongeist · Accepted solution]

Hallo Gabe,

vielen Dank, dass du dir Zeit für das Problem genommen hast.

Leider hat die Antwort nicht geholfen, aber sie hat mir wertvolle Suchbegriffe geliefert (HTML-Tag, war das Fachwort, das ich gesucht habe ;), mit denen ich weiter im Internet graben konnte. Ich habe noch eine dritte Schriftstärke in den Assets eingerichtet und mich dann auf die Suche gemacht.

Falls jemand ein ähnliches Problem hat:

- um die Produktnamen und Preise in Kategorieübersichten anzusprechen, kann man das html-Tag <a> nutzen.

- um Kunden-Eingabefelder, wie die Produktmenge auf der Produktseite, oder das Eingabefeld für die Mail-Adresse beim Newsletter anzusprechen, kann man das html-Tag <label> nutzen

- will man "Mini-Informationen" wie z.B. die Copyright-Info im Footer oder das "powered by Shopify" z.B. an die Rechtstexte angleichen, die daneben stehen, kann man bei der Schriftdefinition das html-Tag <small> nutzen

Noch einmal ein ganz dickes MERCI an alle, die hier uneigennützig und fair anderen beim "Wachsen" helfen ;o))

[Gabe]

Hey @Telefongeist 

Es scheint du hast damit eine gute Methode gefunden, um die verschiedenen Elemente deines Themes zu identifizieren und anzupassen und das hilft bestimmt auch andere weiter!