Slideshow: How to show two or more images at a time

To show two or more images at the same time in your sideshow. You can make this modification. 

Difficulty: Intermediate. Requires you to modify the theme Javascript file. Commenting out Javascript code in the correct position. Having a backup is required as this code change can break your theme easily with the slightest of errors. 

Example with 2 slideshow images:

Example with 3 images:

How to:


Make a duplicate of your theme

Do not skip this step, it's required.


Change your Javascript file - theme.js

From the Assets folder, open theme.js:

(If you're using an older version of Pipeline, use shop.js.liquid)

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:


Once you find the correct block of code, you'll be adding a comma at the end of this line and then adding some new code below:

IMPORTANT: Be sure to add a comma at the end of the dots: false line:

dots: false,

Create a couple new lines after you've added the comma and then copy/paste the code from this link, add the code below in the new line area:

Code snippet to use - Add below the dots: false, line:

OPTION 1 - Two images at a time:

Click to view code


OPTION B: Three images at a time:

Click to view code

Example of new code added:

Verify you added the comma to the end of dots: false, line. 

Save the file:

NOTE: Tablets and mobile will show one slideshow slide at a time, that can be adjusted in the breakpoint settings. 

Custom examples

Here's an example of using the slideshow on a standard page, showing only 4 slides. There's no scrolling so the slides look like image blocks:

Another example, 4 images used with a custom collection template. The slideshow added on top like a filmstrip, no action buttons or text:

NOTE: The only restriction is the code change applies to all slideshow modules. If you have multiple slideshows, they will all display the same number of slides. 

Still need help? Contact Us Contact Us