Products: Large vertical image display with sticky column

With this modification, you can display all your product images in full size down the main product image column.

Example with sticky right column:

Important notes:

• The first image will still have the slideshow option to view all images horizontally.
• The first image is the only image that will have the zoom feature when turned on. 
• All images should be similar in size, shape and resolution. This is best practice for your shop but needed for this customization to present your images well.

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

1

First step - Modify theme CSS

Code to use:

/* --- code for vertical display product images--- */

// Setting option: Change the value in the next line to set the spacing between images
$spacingBetweenImages: 5px;

// Do not change below this line

$thumbSize: 100%;
.product__thumbs--square .slick-dots li {
    height: $thumbSize;
    width: $thumbSize;
    margin: $spacingBetweenImages 1px;
  }
.slick-dots li img { 
	height: $thumbSize; 
	width: $thumbSize; 	
  }

.slick-dots li:nth-child(1) {display:none;}
.slick-dots li:nth-child(2) {margin-top:$spacingBetweenImages * 2;}
/* - end - */

To make the right column sticky, add this additional code:

/* --- code to make product info column sticky --- */
#productInfo-product {
	position: -webkit-sticky; 
	position: sticky;
	top: 0;
}
/* - end - */

To remove the slideshow arrows from the first image, add this additional code:

/* --- code to make product info column sticky --- */
.template-product button.slick-arrow {display:none !important; }
/* - 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

2

Second step (required) - Modify product.liquid to boost image quality

We are displaying the thumbnails as the additional images. The resolution of the thumbs will need to be modified. Here's how you can boost the image quality:

Open product.liquid in the Snippets folder:

(1) Use the Find feature in the code section (Command-F on Mac or Control-F in Windows) and search for:

small_cropped

(2) There will be two instances:

Change both to:

2048x2048

Example:

Save the file (top right):

After increasing the size to grande, the additional images will be higher quality and not pixelated.

Final important notes:

This customization is not supported by support staff. It's provided as-is. If you're having trouble with the display of the images or image sizes, you will need to troubleshoot yourself. This article is a very simple approach to modifying the display of your additional images on the product page. There are other methods to implement this functionality using liquid code which will provide better handling of images. 

The key to making this work for your site is to use similar sized images. We recommend your product images are 1200x1200 pixels in size or 2048x2048. When you mix low resolution images with high resolution images or square shaped images with rectangular images, the results may not be suitable with this customization. 

Test all your products before publishing this customization to verify that your images work well. Always make a backup/duplicate of your theme so you can rollback to the original state. Remember, please do not contact our support staff if you need assistance with this customization.