Get Started 开始 Mulai Mulakan Bắt đầu

Migrate to SHOPLINE 迁移到SHOPLINE Pindah ke SHOPLINE Berpindah ke SHOPLINE Đồng bộ dữ liệu về SHOPLINE

Your SHOPLINE account SHOPLINE账户 Akun SHOPLINE Anda Akaun SHOPLINE anda Tài khoản SHOPLINE của bạn

Orders 订单 Pesanan Pesanan Đơn hàng

Products 商品 Produk Produk Sản phẩm

Customer 客户 Pelanggan Pelanggan Khách hàng

Marketing 营销 Marketing Marketing Marketing

Apps 相关应用 Aplikasi Apps Ứng dụng

One page shop 一页商店 One page shop One page shop Cửa hàng một trang

Setting 设置 Pengaturan Tetapan Cài đặt

Image size recommendation for online store design

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

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




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


Recommended size

Width 1920px

Height 1080px


Recommended ratio for mobile


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


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



Comment Template



Graphic Grid

Different layouts have different sizes, and the recommended width is over 1420px.


Featured Recommendation

Different layouts have different sizes, and the recommended width is over 1420px.


Shopping Pictures - Settings

Different layouts have different sizes, and the recommended width is over 1420px.


Trademark List



Campaign Promotion

Category: width 1600px or above

Banner Image: width 400px or above


Graphic Module

The image will adapt to the height, the recommended size is 1000px*1000px

All templates




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.