Liquid, JavaScript, Themes
Hallo,
ich weiß zu diesem Thema gibt es hier schon ein paar Anfragen und auch Lösungen, leider funktionieren die typischen Lösungen wie im base.css oder theme.css nicht, weil es beide bei uns nicht gibt. Ich wollte die Seitentitel die man in Shopify den Seiten gibt, auf der Website ausblenden. Ich habe es td mal im theme.scss.liquid probiert, da ging es aber auch nicht. Ich habe die beiden Codes probiert gehabt, die hier mal in der Community gepostet wurden
#shopify-section-template--15327846334661__main > div > h1 {
display: none;
}
Oder den Code:
<style>
.main-page-title.page-title:nth-child(1) {
display: none !important;
}
</style>
Hey @joefrex
Danke für den Code aber bzgl. "wie im base.css oder theme.css nicht, weil es beide bei uns nicht gibt" - das liegt an eurem Theme und ich konnte euer Theme aus deiner Frage nicht entnehmen... Euer Theme = ?
Alle Themes sind anders aufgebaut, mit diverser Code Struktur, und somit müsstet ihr eigentlich mit den Entwickler eures Themes daruber reden. ODer ist es eins unserer Legacy Vintage Themes wie Debut oder Brooklyn? Hier ist z. B. ein YT Video ("How to Hide Page Title on Specific Page") wo der Ahmed es in ein paar Schritte erklärt, wie du den Pagetitle im Dawn Theme ausblenden kannst.
Somit wird nicht im base.css base.css
gemacht sonder direkt im Code der page.liquid
-Datei - suche da nach dem {{ page.title }}
-Code und verwendest bedingte Anweisungen wie unless
oder if
, um den Titel auf bestimmten Seiten auszublenden. Zum Beispiel:
{% unless page.handle == "deine-seiten-handle" %}
<h1>{{ page.title }}</h1>
{% endunless %}
Dabei ersetzt du "deine-seiten-handle"
mit dem tatsächlichen Handle der Seite, für die du den Titel ausblenden möchtest (siehe mehr dazu hier). Wenn du den Seitentitel auf allen Seiten ausblenden möchtest, kannst du in die theme.scss.liquid
-Datei unter den Assets deines Themes gehen und am Ende der Datei den folgenden CSS-Code hinzufügen:
.template-page h1 {
display: none;
}
Dies blendet den Titel auf allen Seiten aus. Es ist wichtig, dass du vor jeglicher Code-Änderung ein Backup deines Themes machst, um bei Bedarf zur vorherigen Version zurückkehren zu können.
Eine weitere Möglichkeit ist die Erstellung einer neuen Seitenvorlage ohne Titel. Du kannst eine neue Vorlage hinzufügen, indem du im Code-Bearbeitungsbereich deines Themes gehst und eine neue Vorlage wie page.no_title.liquid
erstellst. In dieser Vorlage kannst du dann den <h1>{{ page.title }}</h1>
-Teil entfernen oder die oben genannte unless
-Bedingung hinzufügen.
Wenn du es selber 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. Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
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
Hi, vielen Dank für die Antwort. Unser Theme ist "Debut". Ich versuche es mal mit deiner Anleitung!
LG
Gerne! 😉
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
Teil 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, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024