The Product page in Empire features advanced settings to control how the images are displayed.
Determine an aspect ratio for the images, the position for the Gallery thumbnail images, and activate the Image zoom feature using these settings.
Use the theme editor to select an aspect ratio, assign the gallery thumbnail position, and enable image zoom.
Access the product page settings
- In the theme editor (Customize), open the template selector
- Select Products, then Default product
- In the left sidebar, click to open Product information
Select an aspect ratio
Use the Aspect ratio dropdown to select Natural, Short, Square, or Tall. This setting controls how images fit within the gallery container.
Activate Enable image crop to avoid including white space in the image container.
Assign the gallery thumbnails position
Thumbnails are the small preview images that accompany the main image. To control the position of these, select an option from the Gallery thumbnails position dropdown.
Enable image zoom
Allow customers to get a closer look at high-quality product images by activating the image zoom settings. There are two options to consider: Roll-over image zoom or Click to zoom image.
This feature works with images above 1600px in width.
Roll-over image zoom
When a customer hovers their mouse cursor over the main gallery image, the Roll-over image zoom option automatically enlarges a portion of the image.
To enable, select either Enabled (separate box) or Enabled (replace main image) from the Roll-over zoom style dropdown.
Click to zoom image
For a more manual approach, consider using the Click to zoom image option. Customers are encouraged to click the image by a label in the bottom-right corner.
When a customer clicks the image, a dedicated modal window opens to provide a closer look.
To enable this, select Enabled (all devices), Enabled on desktop only, or Enabled on mobile only.
