Rear view in Spreadshop

If you want to display the rear view of articles to your customers in Spreadshop, this might help you a lot.

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="//shop.spreadshirt.net/shopfiles/shopclient/shopclient.nocache.js"></script>
<html>

  <head>
    <title>Shop mit rear view</title>
  </head>

  <body>
    <div id="myShop">
      <a href="//shop.spreadshirt.net/welovetee"></a>
    </div>

    <script>
      var spread_shop_config = {
        shopName: "welovetee",
        locale: "de_EU",
        prefix: "//shop.spreadshirt.net",
        baseId: "myShop"
      };

    </script>


  </body>

</html>

CSS

/* Hide intro for this sample */
#header-html {  display: none; }


/* Die CSS Regel in die Shop-Einstellungen kopieren */

.sprd-zoomed img{
z-index: 1;
}

@media screen and (max-width: 768px) {
#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; z-index: 0; }

#articleImage_114327926::before { content: url(https://image.spreadshirtmedia.net/image-server/v1/productTypes/877/views/4/appearances/1,width=75,height=75,version=1445939389.png); position: absolute; width: 75px; height: 75px; left: -20px; top: 0; z-index: 0; }

#articleImage_114327926::after { content: url(https://image.spreadshirtmedia.net/image-server/v1/productTypes/877/views/3/appearances/1,width=75,height=75,version=1445939389.png); position: absolute; width: 75px; height: 75px; right: -20px; top: 0; z-index: 0; }
}

@media screen and (min-width: 768px) {
#articleImage_114328212::after { content: url(https://image.spreadshirtmedia.net/image-server/v1/productTypes/814/views/2/appearances/231,width=100,height=100,version=1494487205.png); position: absolute; width: 100px; height: 100px; left: 0; bottom: 0; z-index: 0; }

#articleImage_114327926::before { content: url(https://image.spreadshirtmedia.net/image-server/v1/productTypes/877/views/4/appearances/1,width=100,height=100,version=1445939389.png); position: absolute; width: 100px; height: 100px; left: -20px; top: 0; z-index: 0; }

#articleImage_114327926::after { content: url(https://image.spreadshirtmedia.net/image-server/v1/productTypes/877/views/3/appearances/1,width=100,height=100,version=1445939389.png); position: absolute; width: 100px; height: 100px; right: -20px; top: 0; z-index: 0; }
}