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:
CSS Code to use Earlier versions of Pipeline:
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:
