Images are important material for store design. Good image quality and reasonable display can improve the overall design and the conversion rate of the store. We have listed the recommended image size for each component and some problems you may encounter in the design process so you can choose a more suitable picture according to the following suggestions.
|
It is recommended to provide an original picture as large as possible for the best visual display. It is recommended to use a ".jpg" instead of "png" file format for the images to load faster. The theme will load the appropriate image size based on different screens to ensure the loading speed of your website. |
Table of content
- Category Cover
- Category Banner
- Carousel
- Featured Carousel
- Single Picture
- Graphic List
- Footer Promotion
- Size Recommendation for Other Components
- FAQ
Category Cover
We can upload the category cover under Admin panel > Products > Categories.
| Recommended ratio | 1:1 |
| Recommended size | ≥1600px |
Category Banner
Category banner images can be uploaded in the Admin panel > Products > Categories. When the screen width changes, the height and width will be fixed, thus the image might get cropped.
| Recommended size | 1920px wide | 420px high |
Carousel
We support independent configuration of pictures on PC and mobile, and materials can be uploaded separately according to the display effect.
Note: If you select Fixed Height, your picture will be cropped; if you select Parallax effect, cropping will occur even if you have selected Fit to Picture.
|
Recommended ratio for PC |
16:9 |
|
|
Recommended size |
Width 1920px |
Height 1080px |
|
Recommended ratio for mobile |
1:1 |
|
|
Recommended size |
Width 1125px |
Height 1125px |
Featured Carousel
In Expect, Soo, Metal, Flexible, Control and other templates, there are featured carousel plug-ins, and images and text can be adapted to the browser size.
Note: When uploading pictures on the computer, the screens of different devices will be cropped. Be careful not to design the main elements too far to the side; when uploading pictures on the mobile, the text of this component will be overlaid on the picture, please reserve space below the picture to avoid the main elements from being blocked.
| Recommended size on computer | When height is set to "full screen" | 1220px wide | 1080px high |
| When the height is set to a specific value | 1152px wide | Height according to fit value | |
| Recommended size for mobile | When height is set to "full screen" | 1125px wide | 1125px high |
| When the height is set to a specific value | 750px wide | Height is 2 times of the adaptation value |
Single Picture
The default height of the single picture is fixed, and the picture will be cropped. You can select the image display area to control the focus content that you do not want to be cropped, or change the height of the image to "fit to image" to avoid cropping.
Note: The height of the material should be higher than the set cropping height, otherwise the picture will be enlarged and blurred.
|
Recommended ratio on the computer |
16:9 |
|
|
Recommended size |
1920px wide |
1080px high |
| Recommended size for mobile | 750px wide | 1020px high |
Graphic List
|
Recommended ratio |
4:3 (A recommendation only, the original ratio will be used) |
|
|
Recommended size |
Width 650px |
Height 488px |
Footer Promotion
|
Recommended ratio |
16:9 (configurable) |
|
|
Recommended size |
Width 650px |
Height 488px |
Size Recommendation for Other Components
|
Component Name |
Recommended Size |
Applicable Theme |
|
Icon Statement |
144px*144px |
Edges/Cycle/Carfit |
|
Comment Template |
240px*240px |
Edges/Cycle/Carfit |
|
Graphic Grid |
Different layouts have different sizes, and the recommended width is over 1420px. |
Edges/Cycle/Carfit |
|
Featured Recommendation |
Different layouts have different sizes, and the recommended width is over 1420px. |
Edges/Cycle/Carfit |
|
Shopping Pictures - Settings |
Different layouts have different sizes, and the recommended width is over 1420px. |
Edges/Cycle/Carfit |
|
Trademark List |
320px*320px |
Expect/Control/Metal/Soo/Flexible |
|
Campaign Promotion |
Category: width 1600px or above Banner Image: width 400px or above |
Expect/Control/Metal/Soo/Flexible |
|
Graphic Module |
The image will adapt to the height, the recommended size is 1000px*1000px |
All templates |
FAQ
Why are my pictures cropped?
-
The module is set to a fixed height
Single-picture module: When adapting to different screen widths and mobile devices, in order to ensure the readability of the content, the height of the module is fixed by default, and the pictures cannot be displayed in equal proportions.
Carousel image module: If it is set to a fixed height, the pictures will maintain the same height under different screen widths. When the ratio changes, the pictures will be cropped. -
A fixed scale is set
If a module is set to a fixed proportion, the crop will be processed automatically. If the picture display area is not set, the default will be centered and cropped. -
Responsive image processing
Responsive images are used in many theme modules (carousel, single picture, etc.). Responsive imagery is an industry-standard technology for enlarging and cropping wide-format images to ensure that images have the same impact on desktop and mobile. The photo you took will be enlarged until it completely covers the display area, so that it can be scaled without being stretched or distorted,
Product display before responsive processing
Product display after responsive processing
Why does the picture still get cropped even if it is set to fit?
It may be that the parallax scrolling effect is turned on . In order for the parallax to take effect, the picture will be automatically enlarged to make the picture size exceed the display area, and cropping will naturally occur.
Why is the picture still not completely displayed even after using the suggested size?
First, check if the height is set to "fit to picture". If the settings are correct, then check whether the "parallax effect" is turned on, and turn it off to keep it uncropped.
Get in touch
SHOPLINE has a specialized Merchant Success Team available to assist you with any questions or issues. Please feel free to contact us via the chatbox in the lower right corner of your SHOPLINE admin panel or on the SHOPLINE official website. We are always here to support you every step of the way and help your business thrive.
Comments