![]() This feature is a slide height setting called adapt to first image. In the end, the solution we settled on doesn’t prevent image cropping in every possible use case, but is the result of an intensive battle between usability and the level of control given to merchants. The mental model was often too complex and the live preview in the theme editor didn’t help merchants understand. We gathered feedback on different interfaces, and featured different labels in attempt to avoid confusing jargon (adapt to image height, adapt to tallest image, dynamic height, fill slide, fit to slide, landscape and portrait ratios, tall and short images, and on and on). But it quickly became obvious that slideshow settings can get complex and overwhelming to merchants, and the notion of image ratio itself is already a pretty confusing concept to begin with. We tested different variations of a slideshow that dynamically adapted its height to one image regardless of the screen size, combined with further image display options to optimize the remaining images. When this is the case, providing solutions to completely avoid cropping comes with trade-offs.Īdapting the section’s height per slide is not something we recommend. Layout optionsĪ challenge inherent to slideshows is that slides may contain images with different ratios. Perfect hero images on desktop sometimes turn out to be not so perfect when viewed on mobile. Below, we dive into how both these solutions work. We’re making the bet that another approach, relying on a single image upload, can work too, and we tackled the problem from a different angle, or rather two angles:layout options and image position settings. You might also like: 5 Ways to Improve Store Loading Times with Minification. It’s also not uncommon to find separate settings for desktop and mobile heights. This strategy is valid, but has the downside of an extra time spent with external image editing tools and a multiplication of files to manage afterwards. Many themes in the theme store enable merchants to upload multiple image versions, each optimized for desktop, mobile, and sometimes even tablet. This is especially problematic with (but not limited to) full screen slideshows. Yet a majority of merchants expect more from their theme and simply have a hard time finding images that are optimized for both contexts.Īlthough not exclusive to the slideshow section, this frustration amplifies when merchants have invested time and money in photoshoots which they can’t easily leverage in the prime estate of their homepage. It's very difficult for merchants to deal with both mobile and desktop image ratios when they're drastically different.Ī quick look at the nicely crafted demo shops in the Shopify Theme Store demonstrates that such design can be successful in many cases. Sign up The problem of image cropping Image cropping causes frustration to many merchants, and affects several themes.Ī common theme customization request from merchants is to ensure images don't appear cut off on slideshow sections. Join for free and access revenue share opportunities, tools to grow your business, and a passionate commerce community. Whether you offer marketing, customization, or web design and development services, the Shopify Partner Program will set you up for success. Grow your business with the Shopify Partner Program
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |