Banner images that work well with multiple device sizes

Homepage banners and slideshow images
We recommend using a horizontal ratio like 16:9 and experiment with how the images are displaying on your browser with different widths and heights. Larger images are best to accommodate for desktop viewers. If possible, start with at least 1920 x 1080 and increase if possible to as large as 4096 x 2304, Shopify will compress these images. The larger size will deliver a crisper image with compression. Save it as JPG and use "Save for web" or "Export as" with 100% Quality as Shopify will do the compression for you. Be sure "Convert to sRGB" is checked or selected.

Responsive Design

Finding photos that work well on mobile and desktop is one of the hardest parts of responsive design.  
The tall setting will adjust the photo to take up 3/4 of the screen.  It will always take up 3/4 of the screen - so the photo is cropped either from the sides or the top & bottom.  

The “image height” setting uses “classic” responsive scaling.  This means it scales down as the screen scales down.  All of the image will show on every screen -- it never crops.  If you use a widescreen format photo it will be small on mobile but take up most of the screen on a laptop.  If you use a portrait orientation image it will be very large on a laptop and fairly normal on a handheld device.

This is complicated by the parallax feature which needs to zoom into the photo a bit.  I use loose cropping with parallax.  

There’s no photo setting that’s perfect for every screen and every photo.  That’s why there’s five settings.  4 of the settings use relative heights based on the screen size: 

Full screen: 100% height
Tall: 66% height
Medium: 50% height
Short: 33% height

Generally we try to use more thematic photos that can be cropped in many orientations and still work.  Sort of like this demo: https://pipeline-dark.myshopify.com/

Tip: Keep the subject or focus in the middle of your banner. This will help greatly when your customer is on a mobile device. When your subject is the left or right, it will likely not appear on smaller devices as the theme adjusts the focus towards the middle and center of the image.

Here's an excellent example of by our friends at  getdrest.com. They've created banner images with the subject in the middle of the banner and used the full screen height setting. Their key message is clear, the call to action button is easy to find and the product stands out in the image:

When visiting their site on a mobile device, the subject converts well as the focus remains in the middle. Messaging which is layered on top is enlarged to allow mobile shoppers to easily read the text. The call to action button is also simple to use and does not take over the mobile scrolling area.  

When understanding how responsive designs work, you can build a shop that's beautiful and functional for all shoppers that are using almost any type of device and browser size. 

Here are some best practice tips from Shopify as well:
https://help.shopify.com/manual/using-themes/troubleshooting/best-practices-for-images


No Parallax Trick

For Image with text overlay banners, there is setting that might help you if your images are tall - Turn off parallax scroll and  set Section height to: "Image height".
When using parallax, cropping is used to help build the effect and thus reduces your ability to show a full image. Turning off parallax gives you a large display with less resizing occurring to fit the image. The slideshow section modules does not have parallax so this trick is only helpful for Image with text overlay sections. 


Custom Code Option - Image with text overlay section

If you're still having trouble with finding an image that works with both desktop and mobile, there is custom code you can use to add an option for a mobile-specific background image for the section: Image with text overlay.

You will need to replace the entirety of this file:
sections/index-banner-image.liquid

With this code:
https://gist.githubusercontent.com/gideonb/6cfe9776da8de021b9f2e9b3e28e2860/raw/2415195d54ea103bb70dacc9e031518997f60a6d/index-banner-image.liquid

That will allow you to set a mobile-specific background image. This won't apply to the slideshow section module but can be useful for the hero style banner on your homepage. Always create a duplicate of your theme before making this type of change. 

Still need help? Contact Us Contact Us