Every click counts. Every swipe matters. Every scroll is important.

The speed with which people are cruising through websites makes the Autobahn look like an elementary school parking lot, which means you don’t have much time to make an impression. Anything on your website that scrolls or swipes must be positioned in such a way as to minimize all of those actions, because, most of the time, you’re lucky if people interact at all, much less consistently. Some people don’t even know websites have content below where their screen ends. How do you account for that?

Many ways, but here, we’ll just focus on one of those space-saving and swipe decreasing solutions.

Often times when you would like to put a portrait-oriented image on your Shopify page using the very common and very handy Image Gallery + Video Gallery App you are forced to live with empty space on either side of your image, which of course is not the end of the world. However, if you have four images in your gallery, you are asking the user to scroll three different times to see all four images, which as we’ve proven earlier, is not ideal. Why have empty space, when you can fill it, with another image?

What if you could stack two portrait images side by side on the same scroll so that you cut your scrolling amount in half? Well that sounds like a real BOGO situation, how do I get in on this, you might say...

Here are some simple instructions using JQuery to accomplish exactly this effect.

First, we need to choose the largest proportion for which an image is considered as a portrait and should be chosen by the system as a candidate for the side by side layout of an image with the same proportions. For example:

var portraitMaxProportion = 4/5;

Then you need to wait for all the images to load from the gallery app which could take a little time. Go through each list item with something like the following script...

$(".enap-gallery > li").each(function () {
 listItemProportion( $( this ) );
});

Now, check if this image proportion is less than the portraitMaxProportion. If yes, set the data-for-double attribute for that list element to 1, else set it to 0:

function listItemProportion( itemToCheck ) {
 ...

 itemToCheck.find(".enap-img").closest( "li" ).attr("data-for-double", (size.width / size.height < portraitMaxProportion ) ? 1 : 0 );

 ...

}

Once data-for-double is set, we can start making groups of 2 portrait images when we find them. We go through all of the images and follow the following conditions:

1. If the picture should be part of a pair of portrait images (the data-for-double has the value 1), we create a <div> container for the portrait double images slide, and we move the image in that <div>.
2. If we found another portrait image, we check if a <div> with a single portrait image already exists, and move this image to that <div> and complete the pair. If all the pair <div> above are filled, then a new <div> container is created for this new image to wait for its pair.
3. If we find a landscape image, we just create a <div> container and move it in that <div>.

A result is a group of <div> elements, each containing either 2 portrait images, either one landscape image. In the event that the number of portrait images in the gallery is odd, the last portrait image remains alone in its container, but when we display it in the slide, we align it to the center.

Finally, having all these <div> elements prepared, we can apply the slick slider to their parent with the following snippet…

$('.enap-gallery').slick({
 ...

});

AND VIOLA!

You’ve got yourself a slideshow with side-by-side portrait images. Saving your precious website real-estate, decreasing your swipes and scrolls, and all-around elevating the user experience for every person that comes to your Shopify page.
Leave the Autobahn behind and get on this information superhighway with two images for the price of one swipe.

We can build this feature for your Shopify store. Visit our premium Shopify development services in Los Angeles to learn more about how our experts can help.