Recommended Store Image Sizes (OS 3.0 Themes)
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. OS 3.0 themes introduce new section types and updated layout options, each with specific image size recommendations.
This guide covers recommended image sizes for every OS 3.0 section, along with upload instructions and tips for optimizing image quality and performance.
Image Sizes for Commerce Sections
Commerce sections include product and collection-focused modules. Use the sizes below to ensure product and collection images display sharply across devices.
Specialty Product Category
The Specialty product category section displays collection entry cards on your storefront. The cover image sets the overall visual theme for the collection group, while the recommended image is an optional per-card image that highlights an individual collection.
| Section | Image Field | Desktop Version | Mobile Version |
| Specialty product category | Cover image | 600 × 600 px | Same as desktop |
| Specialty product category | Collection card recommend image | 105 × 105 px | Same as desktop |
| Note: The cover image represents the overall theme of the collection group. The recommended image is optional per individual collection card; if not uploaded, the default collection image is used. |
Featured Collection
The Featured collection section displays products organized into tabs by collection. It does not require dedicated section-level image uploads, as all images are pulled automatically from existing product data.
| Note: No additional image uploads are required for this section. To update product card images, go to the Products section of your admin panel and update the product images there. |
Recommended Products
The Recommended products section highlights a single collection with a prominent visual and a curated product list. It supports separate desktop and mobile images, with size recommendations that vary depending on the layout setting selected.
Desktop and mobile image recommended sizes by layout:
| Layout | Recommended Size for Desktop | Recommended Size for Mobile |
| Full Screen | 2,880 × 1,400 px | 720 × 1,500 px |
| 50% layout | 1,440 × 1,400 px | 720 × 760 px |
| 70% layout | 2,000 × 1,400 px | 720 × 1,000 px |
| Note: If no layout-specific size is set, the default recommended sizes are 468 × 760 px (desktop) and 355 × 100 px (mobile). The desktop image occupies approximately 30% of the page width, so a portrait orientation works best. |
Media Promotion Products
The Media promotion products section pairs a media unit (image or video) with a group of related products, allowing you to highlight a single selling point alongside the products it relates to.
| Section | Image Field | Desktop Version | Mobile Version |
| Media promotion products | Video poster image | 692 × 692 px | Same as desktop |
| Media promotion products | Desktop product image | 650 × 650 px | Same as desktop |
| Note: Each media group supports either an image or a video as its media unit. Each group should focus on a single product or selling point. |
Shoppable Image
The Shoppable image section features a full-width background image with clickable product hotspots overlaid on it, letting customers discover and shop products directly from the image.
| Section | Image Field | Desktop Version | Mobile Version |
| Shoppable image | Desktop background image | 1,920 × 800 px | 375 × 580 px |
Notes:
|
Shopping Video
The Shopping video section pairs short videos with related product cards, letting customers watch and shop in the same module.
| Section | Image Field | Desktop Version | Mobile Version |
| Shopping video | Video group cover / poster image | 790 × 1,300 px | 352 × 586 px |
| Note: Videos are the primary content in this section. Product cards below each video are populated automatically from the bound collection; no separate product card images are required. |
Collection List
The Collection list section displays a grid of collection entry cards, giving customers a visual overview of your store's product categories.
| Section | Image Field | Desktop Version | Mobile Version |
| Collectionlist | Collection card image (optional) | 1,080 × 1,080 px or 1,080 × 1,350 px | Same as desktop |
| Note: Collection card images are optional. Each card image should represent a single collection; do not mix multiple unrelated collections in one image. |
Image Sizes for Promotional Sections
Promotional sections are used for brand storytelling, campaigns, and visual merchandising. Upload images at the recommended sizes to avoid cropping on different screen sizes.
Slideshow
The Slideshow section displays a series of full-width images or banners, typically used for hero visuals, promotions, or seasonal campaigns. It supports separate images for desktop and mobile.
| Device | Recommended Size | Aspect Ratio |
| Desktop | 1,920 × 650 px | 3:1 |
| Mobile | 375 × 500 px | 3:4 |
| Note: If you want to avoid image cropping, select Adapt to the first image for the image height and disable parallax scrolling. |
Split Slideshow
The Split slideshow section displays full-screen slides that fit images and text to the browser size, creating an immersive storytelling experience. It supports separate images for desktop and mobile, with size recommendations that vary depending on the layout setting selected.
Desktop and mobile image recommended sizes by layout:
| Layout | Recommended Size for Desktop | Recommended Size for Mobile |
| Full Screen | 2,880 × 1,400 px | 720 × 1,500 px |
| 50% layout | 1,440 × 1,400 px | 720 × 760 px |
| 70% layout | 2,000 × 1,400 px | 720 × 1,000 px |
| Note: If no layout-specific setting is applied, the default recommended size is 1,920 × 650 px (desktop) and 335 × 335 px (mobile). |
Image Banner
The Image banner section displays one or two side-by-side images, typically used for promotional banners or campaign visuals.
| Section | Image Field | Desktop Version | Mobile Version |
| Image banner | Image 1 | 960 × 650 px | Same as desktop |
| Image banner | Image 2 | 960 × 650 px | Same as desktop |
Image-Text Module
The Image-text module section pairs an image with a block of text, suitable for highlighting a product feature, brand story, or key selling point.
| Section | Desktop Version | Mobile Version |
| Image-text module | 710 × 710 px | Same as desktop |
Image-Text List
The Image-text list section displays a series of image-and-text cards in a grid or list layout, suitable for presenting multiple features, benefits, or categories at once.
| Section | Desktop Version | Mobile Version |
| Image-text list | 592 × 392 px | Same as desktop |
| Note: The original aspect ratio is applied; the recommended size above is a suggestion based on typical display dimensions. |
Switch Image on Hover
The Switch image on hover section displays images that change when a customer hovers over them, creating an interactive browsing experience.
| Section | Desktop Version | Mobile Version |
| Switch image on hover | 800 × 800 px | Same as desktop |
| Note: The recommended width is 820 px. Height can be adjusted freely. |
Rich Text
The Rich text section displays a block of formatted text with an optional background image, suitable for brand messaging, announcements, or editorial content.
| Section | Desktop Version | Mobile Version |
| Rich text (background image) | 1,920 × 380 px | Same as desktop |
Video
The Video section embeds a video with an optional poster image displayed before the video plays.
| Section | Desktop Version | Mobile Version |
| Video (poster/cover image) | 1,920 × 800 px | Same as desktop |
Ingredient Display
The Ingredient display section presents product ingredients, materials, or components in a structured visual format, suitable for detailed product storytelling.
| Section | Image Field | Desktop Version | Mobile Version |
| Ingredient display | Card image (image-text card) | 284 × 284 px | Same as desktop |
| Ingredient display | Popup button image | 580 × 580 px | Same as desktop |
| Ingredient display | Display area image (large) | 1,420 × 440 px | Same as desktop |
| Note: The large display area image is highly adaptive and fills the available width by default. |
Before & After
The Before & After section displays two images side by side with a draggable divider, allowing customers to compare product results or effects.
| Section | Desktop Version | Mobile Version |
| Before & After (comparison image) | 1,420 × 580 px | Same as desktop |
Collage
The Collage section combines product images, collection images, and optional video in a mosaic-style layout, suitable for visual storytelling and campaign highlights.
| Section | Desktop Version | Mobile Version |
| Collage (video poster image) | 854 × 1,240 px | Same as desktop |
| Note: The Collage section relies heavily on product and collection images for its visual composition. |
Stitched Image-Text Module
The Stitched image-text module section combines an image with a text block in a stitched layout, suitable for showcasing a product alongside its key details or story.
| Section | Desktop Version | Mobile Version |
| Stitched image-text module | 792 × 700 px | Same as desktop |
Image Sizes for Additional Sections
These sections add credibility and supporting content to your store. Upload images at the recommended sizes for a clean, professional appearance.
Logo List
The Logo list section displays a row of brand or partner logos, typically used to build credibility or highlight featured-in media coverage.
| Section | Desktop Version | Mobile Version |
| Logo list (brand logo) | 328 × 328 px | Same as desktop |
Map
The Map section displays a store location map alongside an optional background image, suitable for stores with a physical retail presence.
| Device | Recommended Size |
| Desktop | 900 × 528 px |
| Mobile | 380 × 240 px |
Countdown Timer
The Countdown timer section displays a countdown clock with an optional background image, suitable for limited-time promotions or product launches.
| Section | Desktop Version | Mobile Version |
| Countdown timer (image) | 520 × 520 px | 355 × 355 px |
Blogs
The Blogs section does not require dedicated section-level image uploads. Blog cards cover images are pulled automatically from the Blogs module.
| Note: To update blog card cover images, go to the Blogs section of your admin panel and update the cover image for each blog post there. |
Multilevel Filter
The Multilevel filter section displays a category navigation bar with an optional background image, allowing customers to browse products by multiple filter levels.
| Section | Desktop Version | Mobile Version |
| Multilevel filter (background image) | 1,920 × 450 px | Same as desktop |
Custom Page
The Custom page section allows you to create a fully customized page with an optional cover image for both desktop and mobile.
| Device | Image Field | Recommended Size |
| Desktop | Desktop cover image | 1,420 × 580 px |
| Mobile | Mobile cover image | 355 × 360 px |
| Note: Custom page cover images are optional and can be ignored if not needed. |
Image Sizes for Collections Page
The Collections page displays products within a specific collection.
Collection Image
The Collection image section provides a visual header for the collection page on mobile devices.
| Element | Mobile Version |
| Mobile banner image | 1,920 × 380 px |
Promotion Card
The Promotion card is a standalone section within the product list on the Collection page. It can be repositioned by dragging to control where it appears among the product cards. Its image dimensions are dynamically adjusted based on page width, number of product columns, and product card configuration, so no fixed default size applies.
| Element | Mobile Version |
| Promotion card image width | Follow product image width |
| Promotion card image height | Adapts to fill the row height of the tallest product card in the same row |
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.
- Mobile-first for product images: As the product image layout is adjustable on desktop, focus on optimizing product image display for mobile devices.
- Maintain consistent proportions: Use the same aspect ratio for all images within the same section to ensure a uniform, professional appearance.
- Center your key elements: When uploading images for sections with fixed heights (such as Slideshow or Image banner), center your main design elements to avoid cropping on different devices.
Frequently Asked Questions about Image Sizes in OS 3.0
Q 1 Why are some of my images cropped?
Themes adjust image sizes to fit different screen widths and devices, which can cause cropping for the following reasons:
- Components with a fixed height: To keep text readable, sections such as Slideshow and Image banner have a default fixed height that may not match your image's exact dimensions.
- Components with a fixed aspect ratio: If a section uses a fixed aspect ratio, automatic cropping occurs. Images are cropped from the center by default unless you adjust the image display area setting.
- Responsive image processing: Many sections use responsive processing, which zooms and crops wide images to ensure consistent display across PC and mobile. Your image is enlarged to fully cover the display area, allowing scaling without stretching or distortion.
Q 2 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 the parallax effect, images are automatically zoomed and cropped when their size exceeds the display area. Disable parallax scrolling in the section settings if you need the full image to display.
Q 3 What can I do if my image is not fully displayed even though I used the recommended sizes?
Check the following two settings:
- Image Display Area: Certain sections have an image display area setting that may limit what's visible. Make sure 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.