Liquid, JavaScript, Themes
Hallo,
ich würde gerne die Schriftgröße im (Header) Kopfbereich des Hauptmenüs sowie bei den zugehörigen Artikelgruppen im Dropdown-Menü des Dawn-Themas vergrößern. Können Sie mir erklären, wie das geht?
Beste Grüße
Olivers
Hallo,
ich konnte das Problem eigenständig lösen.
In der Datei "header-drawer.liquid" habe ich folgenden Code hinzugefügt:
{% comment %}
Renders a header drawer menu for mobile and desktop.
Usage:
{% render 'header-drawer' %}
{% endcomment %}
<style>
.mega-menu__link, .mega-menu__link--level-2, .header__menu-item, .link--text {
font-size: 20px; /* Schriftgröße für Mega-Menü und Hauptmenü-Links angepasst */
text-transform: uppercase; /* Umwandlung des Menütexts in Großbuchstaben */
}
</style>
...
Und in der Datei "header-mega-menu.liquid":
{% comment %}
Renders a megamenu for the header.
Usage:
{% render 'header-mega-menu' %}
{% endcomment %}
<style>
.header__menu-item, .link--text, .list-menu__item {
font-size: 22px; /* Erhöhte Schriftgröße für Hauptmenü-Links */
text-transform: uppercase; /* Umwandlung des Menütexts in Großbuchstaben */
}
</style>
...
Beides fügte ich an den jeweils passenden Stellen, wie hier beschrieben ein.
Ich hoffe, diese Lösung kann auch anderen helfen.
Lieben Gruß
Olivers
Hey @OliversLiving
Wow, super Lösung!
Die CSS-Stile direkt in die Liquid-Dateien "header-drawer.liquid" und "header-mega-menu.liquid" zu integrieren, um die Schriftgröße anzupassen, ist eine praktische Methode.
Nicht vergessen, viele CSS Styles kann man auch über den CSS Editor einbinden:
Wenn du es selber im Theme Code stattdessen programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Den 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, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024