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:
In an effort to illustrate the display of your banner image on various devices, we made screenshots of three of the most common devices.
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.
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.
To make things easier for other Shopify Experts and merchants alike, we've also decided to make this PSD banner template available for purchase.
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.