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

Deutsch Diskussion Technische Fragen & Antworten

Topic summary

Ein Nutzer möchte Schriftarten in seinem Shopify-Theme gezielter anpassen und sucht nach einer Liste, die HTML-Tags (H1, H2, etc.) den verschiedenen Überschriften und Elementen zuordnet.

Ausgangsproblem:

  • Custom Fonts wurden bereits per @font-face eingebunden (Grandstander in verschiedenen Schriftstärken)
  • Der universelle Selektor * wird verwendet, was zu ungewollten Effekten führt
  • Ziel: Produktnamen, Preise und Kategorieüberschriften sollen unterschiedliche Schriftstärken (z.B. bold) erhalten

Lösungsansatz:

  • Verwendung des Browser-Inspektor-Tools zur Identifikation spezifischer HTML-Tags und CSS-Klassen
  • Anpassung des CSS mit gezielten Selektoren statt * (z.B. .product-title, .product-price)
  • Beispielcode für spezifische Styling-Regeln wurde bereitgestellt

Zusätzliche Erkenntnisse:

  • Das <a>-Tag kann für Produktnamen und Preise in Kategorieübersichten genutzt werden
  • <label> eignet sich für Eingabefelder (z.B. Newsletter, Produktmengen)
  • <small> kann für kleinere Texte wie Copyright-Infos im Footer verwendet werden

Status: Problem gelöst – der Nutzer hat durch die Diskussion die nötigen Fachbegriffe (HTML-Tag) gefunden und eine funktionierende Lösung entwickelt.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

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=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;}

*{
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:

Telefongeist_0-1720965503625.png
Telefongeist_0-1720965503625.png623×398 29.9 KB

(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

2

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:


  ### Produktname
  €9,99 EUR

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! :wink:

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.

3

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:

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

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!