Liquid -> Bild anzeigen lassen

[frank_gayer]

Hallo,

ich nutze ein Liquid-Feld um eine Meta-Info anzeigen zu lassen. Zusätzlich will ich zusätzlich noch ein Bild einbinden / anzeigen aber das funktioniert nicht.

Hier ist der Code:

<img src="https://cdn.shopify.com/s/files/1/0978/7106/9513/files/weight.svg?v=1762686310" alt="Beschreibung des Bildes">{{ product.metafields.custom.gewicht.value }}

Was mache ich falsch ?

[Qasim]

Hey,

Thanks for reaching me out. Could you please share your store url and password [if applicable], so that I can take a look and provide you the solution code.

Thanks

[frank_gayer]

Hallo,

ich habe es jetzt besser hinbekommen, aber perfekt ist es noch nicht. Hier ist der Code:

<img src="https://cdn.shopify.com/s/files/1/0978/7106/9513/files/weight_produkseite.jpg?v=1766230700" alt="Beschreibung des Bildes">  
{{product.metafields.custom.gewicht.value }}

Allerdings ist die Schrift und das Bild nicht auf gleicher Höhe. Wie könnte man das noch anpassen ? Siehe in der Anlage ein Screenshot:

[Muthwerk-Agentur]

@frank_gayer schick mir gern mal den Gästezugang.

Dann kann man das besser umsetzten.

[Nordalux]

Es kommt tatsächlich drauf an, wie das Metafeld angelegt ist.

Ist es als einzeilig/mehrzeiliger Text, dann {{ products.metafields.custom.KEY }}
Ist es als Rich Text angelegt, dann {{ products.metafields.custom.KEY | metafield_tag }}

Demnach wäre der Code so:

<img src="..." alt="..."> {{ products.metafields.custom.gewicht }} </img>
oder

<img src="..." alt="..."> {{ products.metafields.custom.gewicht | metafield_tag }} </img>

Bei dem Bild ist es wichtig zu wissen, wo du den Code genau anlegst. Teilweise sind Themecodes so geschrieben, dass in benutzerdefinierten HTML / custom Liquid in der Produktsektionen die SVGs oder IMG - Tags schlichtweg nicht angezeigt werden. Meistens ist das ein Bug, nur ohne Bezug auf das Theme und die Stelle der Einbindung ist es nur blindes raten.

Kleiner Tipp:

{% if products.metafields.custom.gewicht %} 
<img src="..." alt="..."> {{ products.metafields.custom.gewicht }} </img>
{% endif %}

So wird das nur angezeigt, wenn Text im Metafeld vorhanden ist. Ansonsten wird das Bild immer mit ausgegeben, auch wenn im Metafeld nicht hinterlegt ist.

[frank_gayer]

@tim_tairli

<span class=icon-text>
  <img src="https://cdn.shopify.com/s/files/1/0978/7106/9513/files/weight_produkseite.jpg?v=1766230700" alt="Beschreibung des Bildes">  
  {{product.metafields.custom.gewicht.value }}
</span>

<style>
  .icon-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
</style>  

Danke Euch, habe es jetzt hinbekommen und ich finde es schaut gut aus

[daniel-dev]

Great @frank_gayer!

I am happy that it fixed. Is this was helpful, don’t forget to like it and Mark as Solution.

Cheers