Product Image Style Setting: Keep Your Gallery at a Consistent 16 : 9 Ratio

Overview of the Feature

The Product Image Style setting lets you lock the main product image and its thumbnails to a fixed 16 : 9 rectangle. When enabled, every product image—landscape, portrait, or square—fills the same space, preventing the “jumping” or flickering that can occur with different sized images as shoppers cycle through pictures of different dimensions. The result is a smoother, more polished storefront, particularly for static (non-editor) products that rely on rich, multi-image galleries.

Behind the scenes the platform adds responsive padding (using the 16 : 9 ratio), applies your theme’s Light colour to the image background, and shows a “+X” overlay on the fifth thumbnail if more than five images are available. The feature is available in Admin › Appearance Settings and is supported by the Arone default theme.

Use Cases

1. Mixed-Orientation Photography
   Sellers of posters, signage, or apparel often upload both portrait and landscape images. Enabling a fixed frame keeps the gallery steady as shoppers swipe between angles.

2. Mobile Shopping Consistency
   On phones, tall images can push the carousel down the page. Locking height ensures the gallery remains visible without extra scrolling.

3. Brand-Consistent Thumbnails
   Stores that rely on minimalist or colour-blocked thumbnails can use the theme’s Light colour as a background, creating uniform “cards” that match the site palette.

4. Large Catalogues with Many Shots
   Products with six or more images benefit from the “+X” overlay, hinting to customers that additional pictures are available without overwhelming the layout.

Step-by-Step Implementation Guide

1. Open Appearance Settings
   In the admin area, navigate to Appearance Settings for the storefront you want to update.
   Tip: The option currently appears for storefronts using the Arone default theme.

2. Locate Product Image Style
   
   

3. Choose an Option

   • Select With 16 / 9 aspect ratio to enable the fixed frame.

   • Leave Default selected to keep the existing behaviour.

4. Save Your Changes
   Click Save at the bottom of the page. The setting applies instantly—no theme rebuild required.

5. Review a Product Page
   Open any product with multiple images:

   • The main image should sit inside a 16 : 9 box.

   • Thumbnails should share the same height and background colour.

   • If more than five images exist, the fifth thumbnail shows “+X” (e.g., “+3”).

   • Updated Behaviour (16/9)

   • Default Bahaviour
     
     

6. Troubleshoot

   • Setting not visible? Confirm the storefront is using the Arone theme and that your user role has permission to edit Appearance Settings.

   • Images still jump? Clear browser cache or hard-refresh the product page to ensure new CSS is loaded.

Frequently Asked Questions

Does this affect MegaEdit or Dynamic products?
No. The setting targets static product pages. Editor canvases already manage image dimensions internally.

Can I use a different aspect ratio?
At present, 16 : 9 is the only ratio available. For custom ratios, continue using CSS overrides in your theme.

Will this slow my page down?
No. The change uses lightweight CSS rules—no extra scripts or large assets are added.