pipeline product thumbs to the left of main product image.

theme.css

@media only screen and (min-width:768px){
     .product__thumbs--square{
          float: left;
          width: 100px;
     }

     .product__thumbs--square .slick-dots li img,
     .product__thumbs--square .slick-dots li{
          width: 100px !important;
          height: 100px !important;
          margin: 0px;
     }

     .product__slides.product-single__photos{
          float: right;
          width: calc(100% - 110px);
          margin-left: 10px;
     }

     .product__slides.product-single__photos .slick-list .product__photo > div,
     .product__slides.product-single__photos .slick-list .product__photo > img{
          width: 99%;
     }
}