Choose a product media layout for the product details page

Choose how product images display on the Product Details Page from the Product Media Layout setting, and how customers zoom into them from the Image Zoom dropdown, both in the Product Details element settings. The page supports four media layouts and three zoom options, and only the Open Lightbox zoom mode supports keyboard navigation.

Media layouts

The Product Details Page shows product images in one of four media layouts.

• Carousel with Thumbnails shows a large hero image with a thumbnail strip below or beside it. Thumbnails and arrow buttons change the main image.

• Grid Gallery shows product images in a grid. It works best for a moderate number of images, such as 3-6.

• Stacked Vertical arranges images vertically in a scrollable column.

• Single Image shows one primary product image with optional zoom.

Layout availability and naming may vary based on your JourneyCARE version and theme. Check the Product Details element settings for the exact options in your account.

Image zoom options

Set how customers zoom into product images from the Image Zoom dropdown: Open Lightbox, Click & Hover Zoom, or No Zoom.

• Open Lightbox opens a fullscreen lightbox overlay with zoom controls, navigation arrows, and a thumbnail strip. It is the only zoom mode that supports keyboard navigation.

• Click & Hover Zoom magnifies the image inline when the customer clicks or hovers over it, without a separate overlay.

• No Zoom keeps images at their default size.

Configure the layout and zoom

Set the layout and zoom behavior from the Product Details element settings in your store. If the store or Product Details Page is not set up yet, see Set up an ecommerce online store.

1. Go to Sites > Stores and select the store that contains the Product Details Page.

2. From the store's page list, edit the Product Details Page or your custom Product Details Page.

3. Select the Product Details or Product element.

4. In the element settings panel, locate Product Media Layout or Desktop Media and choose a layout.

5. Find the Image Zoom dropdown and choose Open Lightbox, Click & Hover Zoom, or No Zoom.

6. Click Save, then Publish.

Keyboard navigation

Customers can move through product images with the keyboard when Open Lightbox is the zoom mode.

• Escape closes the lightbox.

• Right Arrow moves to the next image, and Left Arrow moves to the previous image.

• The lightbox receives keyboard focus when it opens.

• Right Arrow on the last image wraps to the first image, and Left Arrow on the first image wraps to the last.

• Arrow keys do not scroll the page behind the lightbox.

• The thumbnail strip scrolls to keep the active thumbnail visible, and the current image is highlighted in the strip.

Keyboard shortcuts are designed primarily for desktop and laptop devices. Open Lightbox remains usable on mobile with touch navigation, and existing mouse and touch interactions stay available: the arrow buttons, thumbnails, close icon, zoom in/out and reset controls, and grid or view toggle controls. There is no in-app setting to remap or add keyboard shortcuts.

With a product that has a single image, Escape still closes the lightbox, but the arrow keys do not visibly move between images.

Frequently asked questions