Custom CSS pro Seite

walter333 · ‎08-28-2023

Hallo,

eine Frage bzgl. CSS für eine spezifische Seite.

Es gibt ja im Editor auf jeder Seite für jeden Bereich die Möglichkeit "Benutzerdefiniertes CSS" > "Füge benutzerdefinierte Stile nur zu diesem Abschnitt hinzu.".

Wenn man jedoch im Headerbereich für die Navigationsleiste/Logo eigenes CSS ergänzt, das nur auf der einen Seite in diesem Bereich gelten soll, dann wird dieses nicht wie beschrieben lokal nur für diesen Abschnitt auf dieser Seite angewendet, sondern global für diesen Abschnitt auf allen Seiten.

Kann man diesen Bug umgehen?

Bzw. wo kann man bei Shopify generell die Seiten ID´s auslesen (idF für die Startseite), um dann (zb. in base.css) via page ID css nur der Startseite oder einer anderen beliebigen Seite zuzuweisen?

Oder einen ähnlichen workaround um css nur gewissen Seiten zuzuweisen.

Danke für Infos!

Gabe · ‎08-28-2023

Hey @walter333

Danke für die Angaben und der Header Abschnitt ist eigentlich ein globaler Abschnitt da er ja auf jeder Seite gleich erscheint, wie z. B. mit der Navigation und Logo usw. Somit ist das das erwartete Themeverhalten und kein Bug.

Shopify fügt Classes zum <body>-Tag jeder Seite hinzu, die man zur Zielbestimmung verwenden könnte, wie mit der Startseite eine Klasse wie template-index oder template-home:

.template-index .dein-navi-element {
    /* Dein CSS Code */
}

Oder Liquid verwenden, um bestimmten Seiten bestimmte CSS-Dateien oder Inline-Stile hinzuzufügen. Beispielsweise eine IF-Statement wie:

{% if template.name == "index" %}
    <style>
        /* Dein CSS für die Startseite */
    </style>
{% endif %}

Um die spezifische ID einer Seite zu verwenden um jede Seite in Shopify mit dessen eindeutige ID zuzugreifen:

{% if page.id == DEINE_SEITEN_ID %}
    <style>
        /* Dein CSS für diese spezifische Seite */
    </style>
{% endif %}

Um die Seiten-ID für eine bestimmte Seite zu finden, entweder die Chrome Developer Console verwenden (Rechtsklick im Shop -> "Inspect") oder in den Shopify-Adminbereich gehen und die URL der Page überprüfen (oft ist die ID am Ende der URL), oder die Liquid-Vorlage verwenden, um sie direkt auf der Seite zu drucken:

{{ page.id }}

Hoffe das hilft! 😉

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

walter333 · ‎08-28-2023

Hallo Gabe,

danke für die Infos!

Wie ich css dann generell für classes oder ids hinzufüge ist mir soweit klar, mein Problem ist an die ids für bestimmte Seiten zu kommen.

Nach Seitenspezifischen classes hätte ich auch schon Ausschau gehalten im Quellcode bzw. via Inspector.

Im body tag selbst und auch sonst (verwende das Refresh Theme von Shopify) habe ich keine in diese Richtung gefunden (hier sind nur die normalen für Effekte hinterlegt wie (<body class="gradient animate--hover-vertical-lift">); (eine Klasse zB nach dem verwendeten Seitentemplate im body tag zu generieren > template-product, template-page etc., das wüsste ich, bringt mich aber nicht sehr weiter, da ich spezifisch auf einzelne Seiten per ID zugreifen müsste; über den Seitentitel wäre event. ein workaround)

Auch die IDs hätte ich bereits gesucht auf die beschriebenen Wege, aber auch die werden mir nicht angezeigt? Nur bei divs sind ids vergeben (zb <div id="shopify-section-sections--19348852638024...).

Hätte jetzt kurz in einem benutzerdefinierten Liquid auf der Startseite {{ page.id }} verwendet um die ID auf der Seite anzuzeigen, aber da zeigt es nichts an?

PS: anderer liquid code wie zB {{ page_title }} wird ausgespielt... page.id jedoch nicht

Kann es sein, dass hier keine IDs generiert werden?

Schöne Grüße

Gabe · ‎08-29-2023

@walter333

Verstehe. Die page.id ist spezifisch für die Seitenobjekte in Shopify (also nicht für Produkte, Sammlungen oder den Index). Für Produkte wäre es product.id, für Sammlungen collection.id usw. Wenn du auf der Startseite bist und es sich dabei um die Standard-Startseite handelt (d.h. nicht um eine von dir erstellte "Seite" im Sinne von Shopify), dann gehört sie zum "Index"-Objekt und nicht zum "Page"-Objekt, weshalb page.id nicht funktioniert.

Probiere folgendes: wenn auf einem Produkt, verwende:

{{ product.id }}

Wenn auf einer Sammlung, verwende:

{{ collection.id }}

Auf Homepage:

{{ shop.id }}

Das gibt die ID des gesamten Shops zurück, nicht spezifisch für die Startseite, aber es könnte einen eindeutigen Wert für den Shop liefern. Ein anderer Ansatz, um spezifische Seiten zu identifizieren, könnte der Pfad oder die URL sein:

{{ request.path }}

Das gibt den Pfad der aktuellen Seite zurück (z.B. /products/produktname oder /collections/sammlungsname). Damit kann man dann Liquid-Abfragen aufbauen, um spezifische Seiten zu identifizieren und dann den CSS anzupassen.

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

walter333 · ‎08-29-2023

Hallo Gabe,

danke für die weiteren Infos.

Auf die Möglichkeit mit der product id habe ich schon gedacht, dies auf einer Produktseite umzusetzen, nur müsste ich dann eine gewisse Produktseite als Startseite festlegen ... und das funktioniert ja soweit ich bisher gesehen habe nicht, dass ich eine Produktseite als Startseite festlegen kann (statt der "normalen" Startseite)? Bzw. generell eine beliebige Seite als Startseite im Backend festzulegen?

Gabe · ‎08-29-2023

@walter333

Ja, da hast du recht. Shopify bietet standardmäßig keine direkte Möglichkeit, eine Produktseite als Startseite festzulegen. Das Standardverhalten ist, dass die Startseite eine Art Sammlung aller Produkte und Sammlungen ist, abhängig vom Theme und wie du es konfiguriert hast.

Weitere Workarounds:

Weiterleitung: Eine Möglichkeit wäre, eine Weiterleitung von der Hauptdomäne (z.B. www.ihrewebsite.com ) zu einer spezifischen Produktseite (z.B. www.ihrewebsite.com/products/ihr-produkt ) zu erstellen. Dies würde bedeuten, dass Besucher, die deine Hauptdomain besuchen, sofort zur Produktseite weitergeleitet werden. Dies ist technisch einfach umzusetzen, aber aus Sicht der Benutzererfahrung und SEO nicht unbedingt optimal.
Anpassen des Index-Templates: Eine andere Methode wäre, das Index-Template (also die Liquid-Vorlage für die Startseite) so anzupassen, dass es genau wie deine Produktseite aussieht. Dies wäre eine tiefgreifendere Änderung, erfordert jedoch Kenntnisse in Liquid und der Struktur von Shopify-Themes. Man könnte alle Abschnitte, die nicht benötigt werden, entfernen und den Abschnitt des Produktes, den du anzeigen möchtest, manuell einfügen. Dies würde den Vorteil bieten, dass deine Startseite immer noch technisch der "Index" ist, aber es würde wie eine Produktseite aussehen.
App-Lösungen: Es gibt auch einige Apps im Shopify App Store, die erweiterte Funktionalitäten für die Startseite bieten.

Aber Vorsicht wird geboten bzgl. den Auswirkungen auf die SEO. Beispielsweise könnten Weiterleitungen zu SEO-Problemen führen, wenn sie nicht korrekt implementiert werden.

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

walter333 · ‎08-30-2023

Hallo Gabe,

danke für die Antwort und die Infos!

url redirect ist mir als workaround schon in den Sinn gekommen, wäre am einfachsten aber nicht ideal, wie Sie auch schreiben.

Danke für die Hinweise!

Gabe · ‎08-30-2023

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