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.

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.

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:

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.

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.

Shopping Video

The Shopping video section pairs short videos with related product cards, letting customers watch and shop in the same module.

Collection List

The Collection list section displays a grid of collection entry cards, giving customers a visual overview of your store's product categories.

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.

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:

Image Banner

The Image banner section displays one or two side-by-side images, typically used for promotional banners or campaign visuals.

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.

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.

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.

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.

Video

The Video section embeds a video with an optional poster image displayed before the video plays.

Ingredient Display

The Ingredient display section presents product ingredients, materials, or components in a structured visual format, suitable for detailed product storytelling.

Before & After

The Before & After section displays two images side by side with a draggable divider, allowing customers to compare product results or effects.

Collage

The Collage section combines product images, collection images, and optional video in a mosaic-style layout, suitable for visual storytelling and campaign highlights.

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.

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.

Map

The Map section displays a store location map alongside an optional background image, suitable for stores with a physical retail presence.

Countdown Timer

The Countdown timer section displays a countdown clock with an optional background image, suitable for limited-time promotions or product launches.

Blogs

The Blogs section does not require dedicated section-level image uploads. Blog cards cover images are pulled automatically from the Blogs module. 

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.

Custom Page

The Custom page section allows you to create a fully customized page with an optional cover image for both desktop and mobile.

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.

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.

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.