0
DOCUMENTATION

Product Image

Featured product image with responsive sizing, lazy loading, and customisable aspect ratios.

Overview

The Product Image widget displays the main product image on the Product Details page. It reads the primary image set against the product in Goose → Products → Product Images → Main Image and applies styling and effects configured in Elementor.

How to Add It

  1. Open the Elementor editor on your Product Details page template.
  2. Search for Product Image in the widget panel.
  3. Drag it onto the canvas in the product image area.
  4. Configure image size, border radius, and effects in the Style panel.
Note: The main product image is set per product in Goose → Products → Product Images → Main Image.

Settings Reference

SettingDescriptionDefault
Image SizeThe registered image size to output: Full, Large, Medium, ThumbnailLarge
Image FitHow the image fills its container: Contain, Cover, FillCover
Border RadiusRounded corners on the image0px
Show PlaceholderDisplay a placeholder image when no product image is setEnabled
LightboxOpen the full-size image in a lightbox on clickDisabled
Aspect RatioLock the image container to a fixed aspect ratioNone

Common Use Cases

Place the Product Image widget in the left column of your Product Details page layout alongside the product information column on the right. Enable Lightbox for products where customers benefit from examining high-resolution images, such as jewellery or detailed prints.

Tips & Notes

Tip: Upload high-resolution images in Goose → Products — Elementor will output the appropriate registered size, keeping page load fast while the full resolution is available in the lightbox.
Note: For products with multiple images, use the Product Gallery widget alongside this widget.
Powered by Goose