Optimizing Image Sizes for Products
Images are an important component of online store design. By incorporating high-quality images and employing reasonable display techniques, you can enhance the overall design of your store, increasing conversion rates indirectly. This article offers recommendations for the ideal image sizes to be used in different modules, along with answers to frequently asked questions that you may come across.
Product Image
1. SHOPLINE recommends you focus on the display of product images on mobile devices as product layout can be adjusted on PCs.
2. SHOPLINE offers four aspect ratio options: square (1:1), vertical (2:3), horizontal (4:3), and original aspect ratio. You can choose the one that suits your product.
3. Notes: If you choose the original aspect ratio, all the images will be displayed in their original dimensions. It is recommended to maintain a consistent aspect ratio for all product images to ensure a uniform appearance in the list and elevate the overall customer experience.
| Recommended Aspect Ratio | 2:3 | |
| Minimum Size (75% width on mobile device) | 560px width | 840px height |
| Recommended Size (profile collage) | 1700px width | 2550px height |
Collection Cover
You can upload collection covers at the SHOPLINE Admin > Products > Collections
| Recommended Aspect Ratio | 1:1 |
| Recommended Sizes | ≥1600px |
Collection Banner
You can upload collection banner images at SHOPLINE Admin > Products > Collections. When the screen width changes, the image width is scaled while the image height remains fixed, leading to image cropping.
| Recommended Sizes | 1920px width | 420px height |
Slideshow
SHOPLINE supports separate image settings for the PC and mobile versions, allowing you to upload materials based on the display effect.
| Notes: If you choose to fix height, cropping may occur. If the height setting is "Autofit Images," cropping may also happen even when the parallax effect is enabled. If you don't want your images to be cropped, SHOPLINE recommends you choose the size that adapts to the first image and disable the parallax scrolling effect |
| Recommended Aspect Ratio for PC Version | 3:1 | |
| Recommended Sizes | 1920px width | 650px height |
| Recommended Aspect Ratio for Mobile Version | 1:2 | |
| Recommended Sizes | 375px width | 500px height |
Split Slideshow
The split slideshow plugin supports the resizing of images and text to the browser window in templates like Expect, Soo, Metal, Flexible, Control, and others. Notes: When uploading images for the PC version, cropping may happen on different PCs, so be careful to keep the main elements away from the margins. When uploading images for the mobile version, the text of the slideshow overlays the image, so please reserve space below the slideshow to avoid covering the main elements.
| Recommended Size for PC Version |
Height is set as Full Screen | 1220px width | 1080px height |
| Height is set to a specific value | 1152px width | Height is set to adaptation value | |
| Recommended Sizes for Mobile Version |
Height is set as Full Screen | 1125px width | 1125px height |
| Height is set to a specific value | 750px width | Height is set to 2x adaptation value |
Single Image
A single image defaults to a fixed height and may be cropped. You can prevent the focal elements from being cropped by choosing the image display area or setting the image height to "Autofit images".
| Notes: Ensure the height of the source image is higher than the set cropping height as much as possible; otherwise, the image will be zoomed and blurred. |
| Recommended Aspect Ratio for PC Version | 16:9 | |
| Recommended Sizes | 1920px width | 1080px height |
| Recommended Sizes for Mobile Version | 750px width | 1020px height |
Text Columns with Images
| Recommended Aspect Ratio | 4:3 (The original aspect ratio can be applied and this ratio option is just for recommendation.) | |
| Recommended Sizes | 650px width | 488px height |
Page Promotion Image
| Recommended Aspect Ratio | 16:9 (configurable) | |
| Recommended Sizes | 650px width | 488px height |
Recommended Sizes for Other Components
| Component Name | Recommended Sizes | Applicable Theme |
| Logo List | 144px*144px | Edges/Cycle/Carfit |
| Comment Templates | 240px*240px | Edges/Cycle/Carfit |
| Grids of Texts and Images | Size varies in different layouts. Recommended width is 1420px and above. | Edges/Cycle/Carfit |
| Special Recommendation | Size varies in different layouts. Recommended width is 1420px and above. | Edges/Cycle/Carfit/Barn |
| Shoppable Image > Settings | Size varies in different layouts. Recommended width is 1420px and above. | Edges/Cycle/Carfit |
| Logo List | 320px*320px | Expect/Control/Metal/Soo/Flexible |
| Campaign Image |
Collection: Recommended width is 1600px and above. Banners: Width of 400px and above |
Expect/Control/Metal/Soo/Flexible |
| Image with Text | Images will adapt to the height, and the recommended size is 1000px * 1000px. | All templates |
Checkout Banner Image Size
| Upload Image as Banner Image | Top Banner Image | Left Banner Image | Right Banner Image |
| 1920px * 200px | 1048px * 1048px | 872px * 1048px |
|
Notes: 1. Try to upload images in the largest possible size for the best display effect. 2. Images are recommended in JPG format rather than PNG for faster loading. The images are automatically resized to appropriate dimensions during loading depending on themes to ensure your website loading speed. |
FAQs
1. Why is the image cropped?
- Fixed Height Module for Single Image: In adapting to various screen widths and mobile devices, the module height is fixed by default to ensure content readability, which may result in images not being displayed in their original aspect ratio.
- Slideshow Module: If the height is fixed, the image height remains unchanged under different screen widths. The aspect ratio is changed and the image is cropped.
- Module with Fixed Aspect Ratio: If a module adopts a fixed aspect ratio, automatic cropping happens. If the image display area is not set, images are cropped centered as default.
- Responsive Image Processing: Responsive image processing is used in many theme modules (such as slideshows, single images, etc.). Responsive image is an industry-standard technique for zooming and cropping wide images to allow the images to be displayed in the same way on PC and mobile devices. Your photo will be enlarged until it covers the display area completely, allowing scaling without stretching or distorting the photo.
2. Why is the image still being cropped even if they are set to autofit images?
- Perhaps the parallax scroll effect is enabled. The image is automatically zoomed to a size larger than the display area to ensure the parallax effect, so the cropping happens.
3. Why is the image not fully displayed even though I have used the recommended sizes?
- Check if the height setting is "Autofit images." If it is, check if the parallax effect is enabled. Disable it to prevent cropping.