Produktinfos in Produktfotos einbauen??

[Lang123]

Hi, wie kann ich wie snocks in mein Produktfeed in den Fotos textliche Bausteine einbauen? 

Als Beispiel hier die Seite: Boxershorts für Herren kaufen - mit Anti-Loch-Garantie 🤝 (snocks.com)

Ich bitte um Hilfe?

Siehe Beispiel Screenshot:

[Gabe]

Hey @Lang123 

Danke für das Bild und den Link und das scheint eine eigene Anpassung der Entwickler von Snocks zu sein, wie es aussieht. Geschätzte Kosten dafür: ca. ~ €5000-€10,000. Den Code dafür habe ich jetzt aus der Chrome Developer Console entnommen:

<div class="product-slideshow__details">
     <span class="product-slideshow__title">Hoher Tragekomfort</span>
     <button class="product-slideshow__action">
       <span>Mehr Infos</span><svg class="Icon Icon--info-temp" viewBox="0 0 524.235 524.235">
     <g>
       <path d="m262.118 0c-144.53 0-262.118 117.588-262.118 262.118s117.588 262.118 262.118 262.118 262.118-117.588 262.118-262.118-117.589-262.118-262.118-262.118zm17.05 417.639c-12.453 2.076-37.232 7.261-49.815 8.303-10.651.882-20.702-5.215-26.829-13.967-6.143-8.751-7.615-19.95-3.968-29.997l49.547-136.242h-51.515c-.044-28.389 21.25-49.263 48.485-57.274 12.997-3.824 37.212-9.057 49.809-8.255 7.547.48 20.702 5.215 26.829 13.967 6.143 8.751 7.615 19.95 3.968 29.997l-49.547 136.242h51.499c.01 28.356-20.49 52.564-48.463 57.226zm15.714-253.815c-18.096 0-32.765-14.671-32.765-32.765 0-18.096 14.669-32.765 32.765-32.765s32.765 14.669 32.765 32.765c0 18.095-14.668 32.765-32.765 32.765z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#000F76"></path>
     </g>
   </svg>

 </button>

     <div class="product-slideshow__tooltip">
       <p>Wie gemütlich können Boxershorts sein? Unsere Boxershorts: Jaaaa. Hier zwickt nichts, hier rutscht nichts, und alles bleibt da, wo es hingehört. </p>
     </div>
   </div>

Du kannst z. B. im product.liquid Datei oder einer ähnlich benannten Datei im Ordner "Templates" den textlichen Baustein platzieren. Es könnte sein, dass du ihn direkt unter dem Hauptproduktbild oder unter der Produktbeschreibung haben möchtest.

Wenn du möchtest, dass der Text oder andere Elemente dynamisch basierend auf dem Produkt oder seinen Varianten angezeigt werden, könntest du {{ product.title }} verwenden, um den Produktnamen anzuzeigen, oder {{ variant.image.src }}, um das Bild einer Variante anzuzeigen.

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!