• Topic主题TopicTopic
  • Sign in

Master Your Store Look: Image Sizes Guide

 

Eye-catching visuals play a key role in online store success. High-quality images, paired with strategic display techniques, can elevate your store's design and ultimately boost conversion rates. This guide provides recommended image sizes for various modules and components, along with answers to common questions about image upload.

 

In This Article

 


 

Image Sizes for Essential Store Components

Product Image

Where to Upload Images: Go to the Products section of your SHOPLINE admin panel. Choose the specific product to which you want to add images, proceed to the Image/video module, and click Add images (or drag and drop) to upload.

As the product image layout is adjustable on the PC version, SHOPLINE recommends focusing on optimizing the display of product images for mobile devices. There are four image scales available for your selection: square (1:1), portrait (2:3), landscape (4:3), and original. Choose the one that best complements the shape of your product.
1.1.1.png

Recommended Aspect Ratio 2:3
Minimum Size
(75% width on  a mobile device)
  • Width: 560 pixels
  • Height: 840 pixels
Recommended Size
(Image on the details page)
  • Width: 1,700 pixels
  • Height: 2,550 pixels

 

Note: It is advisable to maintain consistent scales for all product images to ensure uniformity and prevent variations in product height, which may impact customers' browsing experience.

 

Collection Cover

Where to Upload Images: Access Products > Collections in your SHOPLINE admin panel. Choose the specific collection to which you want to add a cover. Go to the Collection cover section to upload the image.

Recommended Aspect Ratio 1:1
Recommended Size ≥ 1600 pixels

 

Collection Banner

Where to Upload Images: Access Products > Collections in your SHOPLINE admin panel. Select the collection to which you want to add a banner. Locate the Collection banner section to upload the image.

Recommended Size
  • Width: 1,920 pixels
  • Height: 420 pixels

 

Notes: The image width varies with the screen width, with the height fixed, which may result in cropped images. 

 

Slideshow

Where to Upload Images: Access the theme editor by going to the Online Store section of your SHOPLINE admin panel. Choose the theme you want to edit and click Design. In the theme editor, locate the Slideshow component for image upload.

For slideshow images, SHOPLINE supports separate image settings for the PC and mobile versions, allowing you to upload materials based on the display effect.
1.1.4.png

Recommended Aspect Ratio (for PC Version) 3:1
Recommended Size (for PC Version)
  • Width: 1,920 pixels
  • Height: 650 pixels

 

Recommended Aspect Ratio (for Mobile Version) 1:2
Recommended Size (for Mobile Version)
  • Width: 375 pixels
  • Height: 500 pixels

 

Notes: If you want to avoid image cropping, it is recommended to select Adapt to first image for the image height and disable parallax scrolling.

 

Split Slideshow

Where to Upload Images: Access the theme editor by going to the Online Store section of your SHOPLINE admin panel. Choose the theme that supports this feature and that you want to edit. Click Design. In the theme editor, locate the Split slideshow component for image upload.

Note: The Split Slideshow component is exclusive to Expect, Soo, Metal, Flexible, and Control themes, supporting the fitting of images and texts to the browser size.

 

Recommended Size for PC Version (Height set as Full Screen)
  • Width: 1,220 pixels 
  • Height: 1,080 pixels
Recommended Size for PC Version (Height set to a specific value)
  • Width: 1,152 pixels 
  • Height: set to the adaptation value

 

Recommended Sizes for Mobile Version (Height set as Full Screen)
  • Width: 1,125 pixels
  • Height: 1,125 pixels 
Recommended Sizes for Mobile Version (Height set to a specific value)
  • Width: 750 pixels 
  • Height: 2 times the adaptation value

 

Notes: 
  • PC Image Upload Tip: When uploading on a PC, center the main design elements to avoid cropping on different devices.
  • Mobile Image Upload Tip: For mobile uploads, reserve space below the image to prevent main elements from being covered by overlaid texts.

 

Large Image with Text Box

Where to Upload Images: Access the theme editor through the Online Store section of your SHOPLINE admin panel. Choose the theme you want to edit and click Design. In the theme editor, find the Large image with text box component for image upload.

Recommended Aspect Ratio (for PC Version) 16:9
Recommended Size
  • Width: 1,920 pixels 
  • Height: 1,080 pixels

 

Recommended Size (for Mobile Version)
  • Width: 750 pixels
  • Height: 1,020 pixels 

 

Notes: 
  • Images uploaded to this component default to a fixed height and may be cropped. Prevent cropping by choosing the image display area or setting the image height to Auto.
  • Ensure the height of uploaded images is larger than the set cropping height to prevent enlargement and blurring.

 

Text Columns with Images

Where to Upload Images: Access the theme editor through the Online Store section of your SHOPLINE admin panel. Choose the theme you want to edit and click Design. In the theme editor, find the Text columns with images component for image upload.

Recommended Aspect Ratio 4:3 (The original aspect ratio is applied, and this ratio option is simply a recommendation.) 
Recommended Size
  • Width: 650 pixels
  • Height: 488 pixels 

 

Blogs

Where to Upload Images: Access the theme editor through the Online Store section of your SHOPLINE admin panel. Choose the theme you want to edit and click Design. In the theme editor, find the Blogs component for image upload.

Recommended Aspect Ratio 4:3 (configurable)
Recommended Size
  • Width: 650 pixels 
  • Height: 488 pixels 

 

Footer Promotion

Where to Upload Images: Access the theme editor through the Online Store section of your SHOPLINE admin panel. Choose the theme you want to edit and click Design. In the theme editor, find the Footer promotion component for image upload.

Recommended Aspect Ratio 16:9 (configurable)
Recommended Size
  • Width: 650 pixels 
  • Height: 488 pixels 

 

Image Sizes for Popular Theme Components

Where to Upload Images: Access the theme editor through the Online Store section of your SHOPLINE admin panel. Choose the theme you want to edit and click Design.

Note: Certain components are exclusive to specific themes. Refer to the Applicable Theme column for supported themes.

 

Component Name Recommended Size Applicable Theme
Logo List 144 px * 144 px

Edges/Cycle/Carfit/Feeling/Extent/Shine/Wink/Blouse/

Barn/Brooklyn/Soo/Flexible/Control/Solid/Along/Expect/

Bobo/Bloom/Impress

Testimonials 240 px * 240 px Edges/Cycle/Carfit/Solid
Grids of Texts and Images Dimensions vary in different layouts. The recommended width is 1,420 pixels or above. Edges/Cycle/Carfit/Barn
Special Recommendation Dimensions vary in different layouts. The recommended width is 1,420 pixels or above. Edges/Cycle/Carfit/Barn
Shoppable Image Dimensions vary in different layouts. The recommended width is 1,420 pixels or above. Edges/Cycle/Carfit/Charm/Shine/Solid
Logo List 320 px * 320 px

Expect/Control/Metal/Soo/Flexible/Barn/Cycle/Carfit/Soo/

Edges/Bobo

Promotion

Collection: recommended width 1,600 pixels or above

Banner image: recommended width 400 pixels or above 

Expect/Control/Metal/Soo/Flexible/Edges/Bloom
Image with Text Image heights will be adapted. The recommended size is 1,000 px * 1,000 px. All templates

 

Image Sizes for Unique Theme Components

Component Name Recommended Size Applicable Theme
Website logo in theme settings 28 px * 28 px All themes
Featured products with cover 472 px * 330 px Barn
Media splicing 854 px * 1232 px Seed/Charm/Feeling/Extent/Shine/Wink/Arise/Edges
Video 1920 px * 800 px All themes
Accordion label 470 px * 470 px Seed/Charm
Image banner

960 px * 650 px 

1920 px * 650 px

Seed/Charm/Feeling/Extent/Shine/Wink/Arise/Edges
Offers banner 180 px * 180 px Barn
Featured product 470 px * 760 px Charm
Graphic stitching module 600 px * 700 px Charm
Image switching on hover 800 px * 800 px Charm
Graphic navigation 160 px * 160 px Flash
Graphic carousel 339 px * 246 px Blouse
Image stitching 700 px * 700 px Flash
Video-graphics template 710 px * 400 px Feeling/Extent/Shine/Wink/Blouse/Edges
Footer menu on mobile device 120 px * 120 px Flash
Timeline 500 px * 500 px Feeling/Extent/Shine/Wink/Blouse/Edges/Solid
Map 710 px * 528 px Feeling/Extent/Shine/Wink/Arise/Blouse/Barn/Brooklyn/Flexible/
Control/edges/Solid/Along/Expect/Bobo/Bloom/Impress
Multilevel filter 1920 px * 650 px Cycle/Carfit/Edges

 

Checkout Page: Background Image Recommendations

Where to Upload Images: Access the theme editor through the Online Store section of your SHOPLINE admin panel. Choose the theme you want to edit and click Design. In the theme editor, use the page selector to switch to the Checkout page. Click the palette icon in the left navigation menu and navigate to the Content section to upload the image.

Note: The component for Image upload to the checkout page is exclusively available for subscribers to SHOPLINE’s Enterprise plan

 

Upload Image as Background Image Top banner image Left background Image Right background Image
1920 px * 200 px 1048 px * 1048 px 872 px * 1048 px

 

Demo Image: 

Screenshot 2024-01-30 at 5.46 1.png

 

Use Background Texture as the Background Image

The system will automatically copy and stack the image you upload in horizontal and vertical directions. Therefore, no limits apply to the image size. You can test the effects and adjust the image in the editor.

 

Demo Image: 

Screenshot 2024-01-30 at 5.50 1.png

 


 

Image Upload Tips for Better Performance

  • Maximize image quality: Upload the largest raw images you can to preserve detail and allow for resizing without loss. 
  • Optimize for speed: Choose .jpg over .png for faster loading times. Themes automatically resize images for efficient page views.

 


 

Frequently Asked Questions about Image Upload

Q1: Why are some images cropped?

Themes sometimes adjust image sizes to fit different screen widths and devices. This can cause cropping, especially with modules fixed in height or aspect ratio. Here are some reasons for cropping:

  • Components with a Fixed height: To ensure text remains readable, some components such as "Large image with text box" and "Slideshow" have a default fixed height, which may not match your image's dimensions.
  • Components with a fixed aspect ratio: Fixed Aspect Ratio: If a component 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: Many theme components, such as "Large image with text box" and "Slideshow", use responsive image processing. This technique zooms and crops wide images to ensure consistent display on both PC and mobile devices. Your image will be enlarged to cover the display area completely, allowing scaling without stretching or distorting the photo.

Product Display before Responsive Processing

Screenshot 2024-02-02 at 4.21 1.png

Product Display after Responsive Processing

Screenshot 2024-02-02 at 4.22 1.png

Q2: Why is my image still cropped even with "Autofit images" selected?

If the parallax scroll effect is enabled, images may still be cropped. To maintain parallax effects, images are automatically zoomed and cropped when their size exceeds the display area.

Q3: What can I do if my image is not fully displayed even though I used the recommended sizes?

If your image is not fully displayed despite using the recommended sizes, check the following two settings:

  • Image Display Area: Certain components have a setting for adjusting the image display area, which may inadvertently limit your image. Ensure you have selected Auto for this setting.
  • Parallax Scroll: Some themes use a "parallax scroll" effect that zooms in on the background image, causing cropping. If you don't need this effect, disable it in the theme settings.

 

Have more questions? Submit a request

Comments