适用于幻灯片、图片横幅和全宽图片的最佳做法
许多 Shopify 模板都包含大型图片或幻灯片,它们可以扩展到浏览器的高度或适应您的屏幕尺寸。
如果您使用其中一个模板或拥有尺寸较大的幻灯片或背景图片,那么了解哪种类型的图片看上去效果最佳是非常重要的。
由于大图无法适应所有设备,因此 Shopify 有时仅显示部分图片,具体取决于您使用的设备。如果您的图片幻灯片包含大量大图,那么您可能会发现图片的某些部分不可见。
建议
为了确保图片能够很好地适应您的模板,请注意以下事项:
一些模板拥有一个图片位置设置,您可以用于指定图片的哪部分是焦点。如果您的模板没有此类设置,请确保每张图片的焦点都位于中心。当您的图片在某些屏幕上经过裁剪后,焦点是可见的,而它周围的区域可能会被隐藏。
用于幻灯片或背景的图片中不应包含文本。如果文本是图片本身的一部分,则可能会根据您的模板对它进行移动、裁剪或调整。使用模板编辑器添加文本和转至幻灯片的链接。
对于在幻灯片中使用的或作为背景使用的图片,请选择简单图片,从而使任何叠加的文本易于阅读。
高屏幕上的宽图片
当用于查看宽图片的设备是高屏幕(例如手机或平板电脑)时,这些宽图片可能会在左右两侧进行裁剪
Shopify商户官网原文详情:
Best practices for slideshows, image banners, and full-width images
Many Shopify themes feature large images or slideshows that scale to the height of your browser or adapt to your screen size.
If you use one of these themes or have a large slideshow or background image, then it's important to understand what types of images will look best.
Because large images can't fit on all devices, Shopify sometimes displays only part of the image depending on the device you're using. If your image slideshow contains a lot of large images, then you might find that parts of the images aren't visible.
Recommendations
To make sure that your images work well with your theme, here are some things to keep in mind:
Some themes have an image position setting that you can use to specify which part of an image is the focal point. If your theme doesn't have such a setting, then make sure that the focal point of each image is in the center. When your images are cropped on some screens, the focal point is visible, while areas around it are hidden.
Images that you use for slideshows or backgrounds shouldn't have text in them. If the text is a part of the image itself, then it might get moved around, cropped, or adjusted based on your theme. Use the theme editor to add text and links to your slideshows.
For images that you use in slideshows or as backgrounds, choose simple images so that any overlying text is easy to read.
Wide images on tall screens
Wide images might be cropped on the left and right when the device used to view them has a tall screen (like a mobile phone or tablet)
文章内容来源:Shopify商户官方网站