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

Result left:

Result right side:

CSS Code to use Pipeline 5.0 and higher:

Click to view code

CSS Code to use Earlier versions of Pipeline:

Click to view code

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 options?

There are 4 default options you can adjust:

1. The position [left, right] - Options are left or right only (lowercase).

2. Thumbnail size [number] - Suggested range is 50 - 100.

3. Height of the thumbnail container [number] - Increase or decrease based on the type of images you use (long or short). 

4. Scrollbar width [number] - Suggested range is 1 - 10.

Important: If changing any of these values, do not remove the ending semicolon at the end. 

Example change to display thumbnails on the right and thumbnail size 60:

Important: Do not edit the code below this line:

Example - No scrollbar is displayed if the thumbnails fit the height space in option 3 - Height of thumbnail container:

Example of thumbnail size 100, right position and scrollbar set to 4:

Still need help? Contact Us Contact Us