Aspect ratio settings

The Aspect ratio settings are essential for controlling the visual presentation of images across the shop, ensuring a consistent and harmonious look. These settings can be applied globally but also allow for customization at the section or block level, providing flexibility in design.

The Aspect ratio setting defines the shape and proportion of images, offering options such as Default, Landscape, Portrait, Square, Ultrawide, and Widescreen. Each option caters to different visual needs, from uniform image presentation to cinematic displays.

For mobile devices, the Aspect ratio - Mobile setting optimizes images for smaller screens, allowing for different aspect ratios to accommodate varying design requirements. This ensures that images maintain their intended impact across all devices.

Usage examples include setting the aspect ratio to Square for consistent image display, adjusting to Portrait for optimal mobile presentation, and using Ultrawide for dramatic homepage banners. These settings provide a solid foundation for enhancing the aesthetic appeal and user experience of the shop.

Overview #

The Aspect ratio settings are a core part of the theme's settings, designed to control the visual presentation of images across the entire shop. These settings ensure that images maintain a consistent look and feel, enhancing the overall visual harmony of the site. They can be applied globally but also overridden at the section or block level for more specific customization.

Key components and functionality #

Aspect ratio

The Aspect ratio setting allows you to define the shape and proportion of images displayed throughout the shop. This setting is crucial for maintaining a cohesive visual identity and ensuring that images are presented consistently.

  • Options:
    1. Default: The standard aspect ratio applied if no specific ratio is chosen. Default
    2. Landscape: A wider aspect ratio, suitable for panoramic images.
    3. Portrait: A taller aspect ratio, ideal for vertical images.
    4. Square: Equal width and height, perfect for uniform image presentation.
    5. Ultrawide: An extended width, often used for cinematic displays.
    6. Widescreen: A common aspect ratio for modern displays, balancing width and height.

Aspect ratio - Mobile

This setting specifically tailors the aspect ratio for mobile devices, ensuring that images are optimized for smaller screens without losing their intended visual impact. It allows for different settings on mobile to accommodate varying design needs, such as different padding values or aspect ratios.

  • Options:
    1. Default: The standard mobile aspect ratio applied if no specific ratio is chosen. Default
    2. Landscape: A wider aspect ratio for mobile, suitable for panoramic images.
    3. Portrait: A taller aspect ratio for mobile, ideal for vertical images.
    4. Square: Equal width and height for mobile, ensuring uniformity.
    5. Ultrawide: An extended width for mobile, often used for cinematic displays.
    6. Widescreen: A common mobile aspect ratio, balancing width and height.

Usage examples #

  1. Consistent Image Display: You might consider setting the aspect ratio to "Square" for all product images to create a clean and organized look across the shop.

  2. Responsive Design: For mobile devices, you might consider adjusting images to "Portrait" to ensure they are displayed optimally on smaller screens.

  3. Cinematic Banners: You might consider applying the "Ultrawide" aspect ratio to homepage banners for a dramatic, cinematic effect that captures visitors' attention.

These settings provide a good starting point for maintaining a cohesive visual identity across different devices and screen sizes, enhancing both the aesthetic appeal and user experience of the shop.