Mit einem Trick kann man die Vorder- und Rückseite von Produkten in der Produktliste in Partner-Shops anzeigen. Die Ansicht ist zwar nicht perfekt, aber taugt. Wer an dem Trick Interesse hat, bitte melden und 100 € parat haben. Soviel wird dafür verlangt.
Das ganze kann leider nicht total perfekt gestaltet werden, da nur mit den zur Verfügung stehenden Mitteln möglich. Also Spreadshirt selbst könnte das ganz klar viel besser, da sie den Quellcode ändern können, was ich nicht kann, logisch.
Die Sache ist getestet in den neuesten Firefox, Chromium und Opera.
Das Rückseiten-Picture kann mit alten und neuen Accounts angezeigt werden.
Das Picture der Rückseite bleibt immer gleich groß. Es geht nur eine Größe, die aber gewählt werden kann. Das ist wichtig für die Partner-Shops, die per JavaScript in Websites eingebunden sind (Iframe-Shops), da die einzelnen Boxen bei schmälerer Ansicht kleiner sind. Es besteht die Möglichkeit verschieden große Rückseiten-Pictures bei verschiedener Bildschirmbreite anzeigen zu lassen.
In meinem Beispiel ist ein 60x60 Pixel Rückseiten-Picture (da die Box kleiner ist). In normaler Ansicht geht 75x75 Pixel und sieht genauso aus. Es können auch kleinere oder größere Pictures verwendet werden. Eine Liste der möglichen Größen wird mitgeliefert.
Das Rückseiten-Picture wird bei Mouse-Hover nicht vergrößert.
Das Rückseiten-Picture ist links, weil bei Mobile Devices rechts das Lupen-Symbol ist.
Das Rückseiten-Picture kann für jedes Produkt einzeln angelegt werden. Möglich sind auch Produkt-Seiten-Ansichten. Oder eben auch weglassen bei einzelnen Produkten. Das Erstellen geht aber mit einmal für alle. Danach kann jedes einzelne sortiert und editiert werden.
Das Rückseiten-Picture funktioniert auch in Mobil Devices, benötigt da aber eine individuelle Anpassung.
Hier die Ansicht in einem Smartphone. Da liese sich noch was anpassen. Leider kann ich das nicht genauer testen. Es bestehen auf jeden Fall Möglichkeiten hier größere Rückseiten-Pictures anzeigen zu lassen.
Für Einzel-Anfertigung:
Auf der Produkt-Übersicht-Seite die Article-ID (114328212) besorgen mittels Browser Developer Tools, hier:
<div class="sprd-Tile sprd-article" id="article_114328212" data-position="0">
oder hier:
<div class="sprd-wrapped-image sprd-loadable sprd-squareSize" id="articleImage_114328212">
Rückseiten-Image-URL von der Produkt-Detail-Seite holen:
Rechte Maustaste: Grafikadresse kopieren.
https://image.spreadshirtmedia.net/image-server/v1/productTypes/814/views/2/appearances/231,width=100,height=100,version=1494487205.jpg
width und height ändern in “75” (width=75,height=75), oder in verfügbare andere Größen (11,35,42,50,51,54,60,75,100,120,130,150,160,170,178,190,200).
Datei-Endung .jpg in .png ändern
https://image.spreadshirtmedia.net/image-server/v1/productTypes/814/views/2/appearances/231,width=75,height=75,version=1494487205.png
CSS Regel basteln:
#articleImage_114328212::after { content: url(https://image.spreadshirtmedia.net/image-server/v1/productTypes/814/views/2/appearances/231,width=75,height=75,version=1494487205.png); position: absolute; width: 75px; height: 75px; left: 0; bottom: 0; }
CSS Regel in die Shop-Einstellungen kopieren und speichern.
fertig.
Mit @media screen und verschiedenen width und height kann man noch responsiv Fehler, wie größere Images in Mobile Devices, ausgleichen.
Example: https://jsfiddle.net/pnxf7m8k/
Für Serien-Anfertigung: PN an mich.
HINWEIS: Es ist möglich, dass das Rückseiten-Bild in einer anderen Produkt-Farbe angezeigt wird. Dann eine andere Image URL verwenden und darin die width/height anpassen sowie backgroundColor=fff, löschen.
https://image.spreadshirtmedia.net/image-server/v1/productTypes/6/views/2/appearances/92,width=50,height=50,backgroundColor=fff,version=1494487205.jpg
