While full width banners and sliders are some of the most popular features on Shopify themes today, these can also be challenging to manage from a design standpoint.
Because the image used needs to be able to expand or shrink to accommodate a virtually infinite number of screen sizes, there’s very little precise control over how the image is positioned, cropped or scaled — or how the text on top of it is positioned.
When considering images to use in full width banners, it’s typically a good idea to avoid images with a specific focal point and instead think of your image as more of a background.
For example, a photo of your product as a focal point can be problematic for two key reasons:
While the images you select don’t necessarily need to be a background image in the traditional sense of something abstract or a repeating pattern, images that don’t require the key focal point to be visible do tend to work better.
A good way to generate ideas for this type of image is to start thinking about your product line and then “take a step back” and think about the imagery and environments that are associated with it, in terms of lifestyle or use contexts.
All of these images have a key characteristic in common — they can be viewed at almost any size, cropping or positioning and still make sense to the shopper. In many cases, even if the user can’t make out specifically what the image is, especially on mobile devices, the general mood and theme of the image will still show through.
Also keep in mind that the images you use don’t necessarily have to be product-related. Consider everything from your store name to the brand image or tone you want to convey when selecting or taking photos for your shop
For example, if your store products or brand is related to a sense of serenity, such as might be the case for a yoga shop, you could use images that convey a sense of calm such as a seascape, raindrops or candles.
These themes can also be conveyed with patterns or extreme close ups. For example in the serenity example above, a close up of sand, shells or waves could also be good choices
Also keep in mind that you’re not limited to just using photos:
No matter what images you end up selecting, there are some small but effective edits you can consider to make them work better in full width banner or slider applications:
In many cases, you’ll want to display text over your full width banners in order to add a bit more context or a call to action, both of which are great strategies.
Keep in mind that precisely positioning the text typically requires custom coding and it can be quite challenging to accommodate all the various screen size scenarios.
By using the background-style image approach discussed earlier in this article, the positioning of your text becomes less important — which ultimately means your design is more flexible.
However, there are some things to keep in mind:
No matter what images and text you select, it’s vital to test at a variety of screen sizes.
A quick and easy way to do this is to grab the right side of your browser window and click and drag to resize it smaller and wider (it’s also a good idea to refresh the page at each new size you preview) . As you do this, keep a close eye on how things reflow and how the layout is affected.
This approach can be a good test because you’re viewing your site at many different screen sizes — and not just the popular ones. As desktop and laptop screens get larger, it’s important to keep in mind that many people don’t keep browsers full screen anymore.
In most cases, you can use this same method to trigger how your site will look on mobile devices — in both portrait and landscape.
However, it’s also a good idea to view your site on as many different devices as possible and use different browser and operating system combinations just to catch any irregularities.
Unfortunately, if your design ends up requiring precise control over the positioning and cropping of full width banner or slider images, you will likely need to invest in some custom code that accommodates a wide variety of screen sizes and device types and orientations.
Though this may seem simple, it can end up being quite extensive and costly (plus customizing themes comes with its own set of headaches), so it’s always best to consider alternatives first.
Some themes with full width banner images do offer a “crop mobile banner images” option that gives you a different way to display the imagery on smaller screens, rather than just scaling the full image down in its entirety.
It’s important to note that this isn’t foolproof either though, since there is still a lack of precise control over exactly where the theme will auto-crop the image at various screen sizes. Again the best bet here is to follow the tips above for using images without a main or crucial focal point that will look odd if it gets cropped a certain way, like cutting off part of a model’s face or the essential part of a product image.