Making Sense of Parallax Images

One of the more frequently asked questions when we're setting up ecommerce stores using the hugely successful Parallax theme by Out of the Sandbox, is how to size the banner images.

Being that the parallax effect itself requires some overlap for it to actually function, it becomes hard to decide on the correct size of your banner images and where to place your important content.

This can make it difficult to brief your photographer or graphic designer, so we set out to simplify the matter intelligently.

The most important things to realize are that:

  1. The image will be horizontally center aligned.
  2. It will very likely be cropped on the sides to accommodate the specified height of the area.
  3. There will very likely be under lap at the top and bottom (for the parallax effect).
  4. We honored Out of the Sandbox's recommended banner size of 1600 x 805px so we're always working with the optimal image size.

In an effort to illustrate the display of your banner image on various devices, we made screenshots of three of the most common devices.

Screenshots of the super imposed banner images on the Parallax theme by Out of the Sandbox for Shopify.

  1. For desktop sizes we chose the current most popular size of 1366 x 769px and then for the big screen users, we chose 1680 x 1080.
  2. For tablets we chose the iPad screen size at portrait and landscape.
  3. For mobile phones we chose the iPhone 6 screen size at portrait and landscape.

We then super imposed the actual banner image over the screenshots in Photoshop and faded them a bit to see how they're placed. You can see below how the banners are positioned by the theme in each device's screen size.

Note: the parallax effect does not take effect on a mobile device, hence most mobile views (portrait specifically) are full height.

To make things even easier, we then extrapolated this information visually into a Photoshop template that we can now use to prepare our client store's banner images quickly and easily. There is also significantly improved predictability over where their content will be displayed.

Parallax Banner Positions in the Out of the Sandbox theme.
The image above shows all of the view-ports on at once. It's unlikely you'd ever want to see them like this though. We therefore made each device view-port a separate layer set that can be toggled to see how your banner will sit on that device and orientation as seen below.

Toggling Layer Sets in Photoshop for the Parallax Shopify Theme by Out of the Sandbox

To make things easier for other Shopify Experts and merchants alike, we've also decided to make this PSD banner template available for purchase.

Buy this PSD template now for only $10

Note: If you're an existing ShopCreatify client, please contact us for a free copy of this PSD.

We'd love to hear what you think.




Ross Allchorn
Ross Allchorn

Author

Hi, I'm Ross, an entrepreneur and a specialist in e-commerce. I'm always keen on hearing about new and interesting startups and projects, so feel free to contact me using our contact page.