Aspect ratio settings

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.