Aspect ratio settings

Control how images and media are displayed across your store with easy settings for global aspect ratios, ensuring a consistent, professional look that easily adapts for both desktop and mobile devices.

Last updated 4 months ago

Overview

Aspect ratio sets a global default for how images and media are framed across your store (products, banners, cards, etc.). Consistent ratios create a stable, professional layout; you can still override them per section or block when needed.

⚠️ Important: Consistent aspect ratios reduce layout shifts and improve the shopping experience on all devices.

Key components and functionality

Aspect ratio (desktop & large screens)

Defines the default container shape/cropping for images on wider viewports.

  • Default — Keeps each image’s original ratio (default)

  • Landscape — Wide rectangular

  • Portrait — Tall vertical

  • Square — 1:1 uniform

  • Ultrawide — Cinematic panoramic

  • Widescreen — Classic 16:9

📝 Note: Selecting a global ratio streamlines galleries and product lists for a cleaner, more predictable grid.

Aspect ratio on mobile

Optionally choose a different ratio for phones/tablets when a separate crop improves clarity.

  • Default — Inherit desktop/original ratio (default)

  • Landscape / Portrait / Square / Ultrawide / Widescreen

📝 Note: Use a mobile-specific ratio only when critical details get cropped or legibility suffers on small screens.

Usage notes

  1. Apply a global ratio for visual consistency; override locally for special layouts.

  2. Start with high-resolution source images to preserve quality when cropping/resizing.

  3. Thoughtful ratios reduce layout shifts and avoid excessive resizing, improving performance.

  4. Separate desktop/mobile ratios help accommodate real-world differences in space and browsing behavior.