CSS product Page

[teegeschwister]

Hallo zusammen,

wir haben eine kleine Frage an die Communlity. Wir möchten unter "Anpassen" eine benutzerdefiniertes liquid einfügen, welches es ermöglicht, Logos auf den Produktseiten darzustellen. Dieses Bild kann man ja per Link im html abrufen. Wir haben es auch geschafft, dies per HTML umzusetzen.

<left><div class="flex">
<img src="https://cdn.shopify.comxxxxxxx" width="30px" height="30px" alt="">
</div></left>

Nun ist es aber so, dass wir verschiedenen Logos für verschiedenen Kategorien haben. Wie können wir das per CSS definieren? Wir haben bereits folgendes probiert, was leider nicht funktioniert:

{% for collection in product.collections %}
{% if collection.handle == "collectionname" %}

<p>place any HTML code </p>

{% endif %}
{% endfor %}

Vielen Dank und liebe Grüße :-).
 

[Finer · Accepted solution]

@teegeschwister Ihr könntet über Metafelder für jede Kategorie ein Bild hochladen und über die Sektionen als dynamisches Feld hinzufügen. Dann müsstet Ihr noch nicht einmal an den Code.

Von euer Seite her, würde ich sogar vermuten, dass Ihr das bereits für die Produktseite (Zutaten & Zubereitung) verwendet habt.

Mehr über Metafelder findet ihr hier:

https://help.shopify.com/de/manual/metafields

Und hier, wie man diese als dynamischen Inhalt laden & anzeigen kann:

https://help.shopify.com/de/manual/metafields/displaying-metafields-on-your-online-store

Ich hoffe, das hilft euch weiter.

[teegeschwister]

Hallo @Finer,

Danke für deine hilfreiche Antwort. Klappt super und ist wahrscheinlich auch der bessere Weg. Ich wollte es am liebsten zu kompliziert :-).

Liebe Grüße.

[teegeschwister]

Hallo @Finer ,

ich habe nochmals eine kleine Rückfrage. Wir haben es wie kommuniziert umgesetzt und das ist eine super Möglichkeit, die genau dem entspricht, was wir gesucht haben.

Nun ist es so, dass wir 3 Logos einfügen möchten - nebeneinander. Das Standard Format für ein Bild ist 100x100. Wenn wir nun eine Datei designen, die 300x100 ist (für 3 nebeneinander angeordnete Bilder) dann wird diese natürlich auf die 100x100 verzerrt.

Nun haben wir in der "base.css" folgendes angepasst: 

.product__info-container.product__info-container--sticky img {

width: 300px;
height: 100px;
}

Dies bezieht sich auf das Element für das Metafield.

Wenn wir nun das Bild einfügen, passt das zwar von den Abmaßen, ist aber in jeder Form unscharf. Egal welches Format wir nehmen (JPG, PNG etc.) Und egal welche Auflösung im Verhältnis 1:3.

------------

Welche ist die beste Lösung um 3 Bilder nebeneinander einzufügen? Wir haben auch überlegt 3 Metafelder einzufügen, allerdings wird das dritte Feld dann unter den anderen beiden positioniert. Wir möchten eine Reihe, nebeneinander.

Wenn du uns hier nochmal unter die Arme greifen könntest, wären wir dir unglaublich dankbar.

Anbei ein Screenshot (leider unscharf^^).

Liebe Grüße :-).