Products: Move thumbnails to left or right of featured product image

Result left:

CSS Code to use for left side:

/* -- Start Pipeline override code for thumbnails positioned on the left -- */

// Set size of thumbnails use 50; for small or 100; for large:

$thumb-size: 50;

// Stop do not change below this line.
$thumb-full: $thumb-size + px;
$adjusted-width: $thumb-size + 10;
$adjusted-full: $adjusted-width + px;

@include at-query($min, $medium) {
     .product__thumbs--square{
          float: left;
          width: $thumb-full;
     }
     .product__thumbs--square .slick-dots li img,
     .product__thumbs--square .slick-dots li{
          width: $thumb-full !important;
          height: $thumb-full !important;
          margin: 0px;
     }

     .product__slides.product-single__photos{
          float: right;
          width: calc(100% - #{$adjusted-full});       
          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%;
     }
}
/* - end - */

OR:

Result right side:

CSS Code to use for right side:

/* -- Start Pipeline override code for thumbnails positioned on the right -- */

// Set size of thumbnails use 50; for small or 100; for large:

$thumb-size: 50;

// Stop do not change below this line.
$thumb-full: $thumb-size + px;
$adjusted-width: $thumb-size + 10;
$adjusted-full: $adjusted-width + px;

@include at-query($min, $medium) {
     .product__thumbs--square{
          float: right;
          width: $thumb-full;
     }
     .product__thumbs--square .slick-dots li img,
     .product__thumbs--square .slick-dots li{
          width: $thumb-full !important;
          height: $thumb-full !important;
          margin: 0px;
     }

     .product__slides.product-single__photos{
          float: left;
          width: calc(100% - #{$adjusted-full});       
          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%;
     }
}
/* - end - */

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code


How do I set the thumbnail size?

The first main line of code allows you to adjust the size of the thumbnails. 

We've set it to 50 for small. If you'd like larger thumbnails, set to 100:

Example after - Only change the number in that line:

Be sure the semicolon remains after the number.

Still need help? Contact Us Contact Us