Guide to Image Size (OS Theme 2.1)
Eye-catching visuals play a key role in the success of your online store. High-quality images, combined with strategic display techniques, can enhance your store's design and customer impression. This guide provides recommended image sizes for various modules and components, along with answers to common questions about image uploads.
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.
| Recommended Aspect Ratio | 2:3 | |
|
Minimum Size (75% width on a mobile device) |
|
|
|
Recommended Size (Image on the details page) |
|
|
| 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 |
|
|
| 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.
| Recommended Aspect Ratio (for PC Version) | 3:1 | |
| Recommended Size (for PC Version) |
|
|
| Recommended Aspect Ratio (for Mobile Version) | 1:2 | |
| Recommended Size (for Mobile Version) |
|
|
| 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) |
|
||
| Recommended Size for PC Version (Height set to a specific value) |
|
| Recommended Sizes for Mobile Version (Height set as Full Screen) |
|
||
| Recommended Sizes for Mobile Version (Height set to a specific value) |
|
|
Notes:
|
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 |
|
|
| Recommended Size (for Mobile Version) |
|
|
|
Notes:
|
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 |
|
|
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 |
|
|
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 |
|
|
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 | Selected 2.1 themes |
| Testimonials | 240 px * 240 px | Selected 2.1 themes |
| Grids of Texts and Images | Dimensions vary in different layouts. The recommended width is 1,420 pixels or above. | Selected 2.1 themes |
| Special Recommendation | Dimensions vary in different layouts. The recommended width is 1,420 pixels or above. | Selected 2.1 themes |
| Shoppable Image | Dimensions vary in different layouts. The recommended width is 1,420 pixels or above. | Selected 2.1 themes |
| Logo List | 320 px * 320 px | Selected 2.1 themes |
| Promotion |
Collection: recommended width 1,600 pixels or above Banner image: recommended width 400 pixels or above |
Selected 2.1 themes |
| Image with Text | Image heights will be adapted. The recommended size is 1,000 px * 1,000 px. | All themes |
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 | Selected 2.1 themes |
| Media splicing | 854 px * 1232 px | Selected 2.1 themes |
| Video | 1920 px * 800 px | All themes |
| Accordion label | 470 px * 470 px | Selected 2.1 themes |
| Image banner |
960 px * 650 px 1920 px * 650 px |
Selected 2.1 themes |
| Offers banner | 180 px * 180 px | Selected 2.1 themes |
| Featured product | 470 px * 760 px | Selected 2.1 themes |
| Graphic stitching module | 600 px * 700 px | Selected 2.1 themes |
| Image switching on hover | 800 px * 800 px | Selected 2.1 themes |
| Graphic navigation | 160 px * 160 px | Selected 2.1 themes |
| Graphic carousel | 339 px * 246 px | Selected 2.1 themes |
| Image stitching | 700 px * 700 px | Selected 2.1 themes |
| Video-graphics template | 710 px * 400 px | Selected 2.1 themes |
| Footer menu on mobile device | 120 px * 120 px | Selected 2.1 themes |
| Timeline | 500 px * 500 px | Selected 2.1 themes |
| Map | 710 px * 528 px | Selected 2.1 themes |
| Multilevel filter | 1920 px * 650 px | Selected 2.1 themes |
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:
| 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:
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
Product Display after Responsive Processing
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.