Skip to main content

Product Image Gallery

Admin

Product detail pages on the storefront support a multi-image gallery. Instead of a single product photo, you can upload several images that customers can browse through -- showing your product from different angles, highlighting packaging, or displaying usage context.

On the storefront product detail page, the gallery appears as:

  • A main image displayed prominently at the top of the product detail section.
  • A thumbnail strip below the main image showing all available gallery images.
  • Customers click a thumbnail to swap it into the main image view.
  • The first image in the gallery is used as the default main image.

On product cards (category pages and search results), only the primary product image is shown. The full gallery is visible on the product detail page.

  1. Navigate to Products in the admin panel.
  2. Click on a product to open its edit page.
  3. Scroll to the Gallery Images section.
  4. Click Add Images to upload one or more files.
  5. Drag and drop images to reorder them. The first image becomes the main display image.
  6. Click Save.

Supported Formats​

FormatNotes
JPEG (.jpg, .jpeg)Recommended for product photos. Good balance of quality and file size.
PNG (.png)Best for images with transparency or sharp text/logos.
WebP (.webp)Smaller file sizes with excellent quality. Supported by all modern browsers.
Optimize image file sizes

Large images slow down your storefront. Aim for images under 1 MB each. Most product photos look great at 1200 x 1200 pixels -- this provides enough resolution for the gallery view without excessive file size.

  • Reorder: Drag thumbnails to rearrange the display order.
  • Remove: Click the remove button on a thumbnail to delete it from the gallery.
  • Replace: Remove the old image and upload a new one in its place.

The primary product image (set in the main product image field) is always included as the first gallery image automatically. You do not need to upload it again to the gallery.

What's Next?​

  • Product Reviews -- Enable customer reviews on product pages.
  • Images -- Managing the primary product image.
  • Storefront -- Overview of storefront setup and configuration.