Bild in der Produktkategorie verkleinern

Hallo zusammen

Durch den Custom Liquid habe ich hier im Forum herausgefunden, wie man ein Bild unter dem “Add to Cart” Button hinzufügt.

Nun ist das Bild leider viel zu gross und ich weiss nicht ob man da wieder ein Liquid eingeben muss.

Weiss hier jemand vielleicht wie?

Danke vorab und liebe Grüsse

Joe

Hey @Concoeur

Danke für das Bild und im Custom Liquid Block kannst du einen Code (siehe mehr dazu auf W3Schools hier) wie den Folgenden eingeben um das Bild in der Größe zu reduzieren:


![Your Image Description|890x356](upload://uIVoaBqfOEHQ7jNQ83KAMsaEIAZ.png)

  • Einfach 250 durch die gewünschte Breite und 100 mit der gewünschten Höhe ersetzen (gemessen in Pixeln).
  • Den alt= Text durch deinen gewünschten Alt Text ersetzen das gut für die Barrierefreiheiten und auch für das SEO deines Shops auf Google ist!

Das habe ich als Beispielbild von deinem Bild oben gemacht:

Möchtest du die Ecken des Bildes abrunden, kannst du den folgenden HTML verwenden:


![Your Image Description|890x356](upload://uIVoaBqfOEHQ7jNQ83KAMsaEIAZ.png)

Hier wird border-radius: 20px; hinzugefügt, um die Ecken abzurunden. Du kannst die 20px gerne ändern um die Krümmung zu erhöhen oder verringern, sprich, um sie an deine Designwünsche anzupassen. Die Verwendung von px (Pixel) gibt dir die Kontrolle über den Radius unabhängig von der Bildgröße, aber du kannst auch gerne Prozentwerte wie border-radius: 10%; für einen relativen Radius verwenden, wenn das besser zum Design passt, wie folgt:


![Your Image Description|890x356](upload://uIVoaBqfOEHQ7jNQ83KAMsaEIAZ.png)

Es sieht wie folgt aus in meinem Test-Ride Theme:

Möchtest du das obige Bild zu einem clickable Link machen, dann den obigen Code mit diesem hier ersetzen:

[
  
![Your Image Description|890x356](upload://uIVoaBqfOEHQ7jNQ83KAMsaEIAZ.png)

](https://www.shopify.de)
  • Das <a> Tag verwendet den href Attribut um die URL in diesem Beispiel anzugeben ([shopify.de](https://www.shopify.de)) zu dem der/die Nutzer/in weitergeleitet wird, wenn er/sie auf das Bild klickt.
  • Das target="_blank" Attribut wird zum <a> Tag ergänzt, um den Link in einem neuen Tab oder Fenster zu öffnen, so dass die Nutzer/innen von deinem Shop nicht weggeleitet werden, wenn sie auf den Link klicken.

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:


Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd :hatching_chick: in das Shop einbauen, um deinen Kunden etwas Gamification und Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

Wow, lieber Gabe. Danke danke danke!

Am Anfang war ich ein bisschen vewirrt aber nun habe ich die Größe schön angepasst und es sieht so aus wie erhofft. Danke dir nochmals herzlich für deine Unterstützung!

Liebe Grüsse & eine gute Woche!
Joe :slightly_smiling_face:

Freut mich, dass das geholfen hat! :wink: