Liquid, JavaScript, Themes
Hallo,
ich würde gerne per css nur eine Produktseite ansprechen, um auf dieser Seite den "Preisbereich" auszublenden.
Die page ID habe ich mir von der Produktseite aus der URL kopiert – war das richtig?
In meinem Fall eine 14-stellige Ziffer. Dann habe ich folgenden Code in das theme-liquid (body-bereich) eingefügt:
{% if page.id == 11469455950092 %}
<style>
.product-single__meta {display: 'none';}
</style>
{% endif %}
Tja, klappt halt nicht. Stimmt die ID nicht oder der obige Code oder falscher Ort?
Oder gibt es eine gänzlich andere Methode?
Über Hilfe freue ich mich sehr.
Viele Grüße, Artus
Gelöst! Zur Lösung
Erfolg.
Ich täte einen anderen Ansatz wählen, um dynamischer zu sein. Sowas mache ich gern über Producttags. Im Code musst du im main-product.liquid nur folgendes eingeben:
{% if product_tags contains "DeinTag" %}
<style>
CSS-Code
</style>
{% endif %}
page.id ist nicht für Produkte sondern nur für allgemeine Content Pages gedacht. Vielmehr die product.id oder product.handle verwenden, wenn du mit Produkten auf PDPs arbeitest. Den Quellcode der Produktseite öffnen im Theme Code Editor und suche nach product.id oder product.handle im DOM-Tree. Sobald du die im DOM hast, kannst du sie mit CSS gezielt ansprechen.
Vielen Dank Ben310,
habe es nicht geschafft über die product ID per css anzusprechen. Keine Ahnung warum. Über Tags siehe unten hat´s geklappt.
Erfolg.
Ich täte einen anderen Ansatz wählen, um dynamischer zu sein. Sowas mache ich gern über Producttags. Im Code musst du im main-product.liquid nur folgendes eingeben:
{% if product_tags contains "DeinTag" %}
<style>
CSS-Code
</style>
{% endif %}
Vielen Dank Nordalux, habs über den Tag hinbekommen. Allerdings nach einigen verzweifelten Versuchen. Manchmal steckt der Teufel im Detail:
statt product_tags musste ich einen Punkt nehmen = product.tags
so hats dann geklappt 🙂
Stimmt, mein Fehler. Wenn ich einmal ohne VS Code arbeite, dann passieren auch mir diese Flüchtigkeitsfehler. 🙂
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