Customizing Product Media Layouts in Your CRM Store

Control the presentation of your product images and videos on the product details page. This guide explains how to use the available layout options, zoom settings, and navigation features to create an engaging shopping experience.

What are Product Media Layouts?

Product Media Layouts determine how a product's images and videos are displayed to customers on the product details page. These settings are managed within the Product Details element of your store's page builder. You can choose from different layout styles, configure zoom behavior, and enable keyboard navigation to help customers thoroughly explore your products.

Available Layout Options

You can select a layout that best suits your products and store design.

• Carousel with Thumbnails: Displays a large main image with a strip of smaller thumbnails below or to the side. Customers can click thumbnails or use arrow buttons to navigate through the gallery. This is ideal for products with multiple images.
• Grid Gallery: Shows several product images in a grid format, allowing customers to view them all at once. This works well for products with a small to moderate number of images.
• Stacked Vertical: Arranges images in a single, vertical column that customers can scroll through. This layout is particularly effective on mobile devices or for products with many detailed shots.
• Single Image: Displays only the primary product image. This is a good choice for simple products or minimalist store designs.

Note: The specific layout names and options available may vary depending on your CRM version and theme.

Configuring Image Zoom

You can define how customers interact with your product images to see more detail.

• Open Lightbox: Clicking an image opens a full-screen overlay with zoom controls and navigation arrows. This mode also supports keyboard navigation for faster browsing and is best for products where detail is crucial.
• Click & Hover Zoom: Moving the cursor over or clicking an image triggers a magnified view directly on the page, without leaving the product details layout.
• No Zoom: Images are shown at their default size with no interactive zoom functionality. This is suitable for digital products or services.

Using Keyboard Navigation with the Lightbox

When the Open Lightbox zoom option is enabled, customers can use keyboard shortcuts for quick navigation.

• Press the Escape (Esc) key to close the lightbox.
• Press the Right Arrow (→) key to view the next image in the gallery.
• Press the Left Arrow (←) key to view the previous image.

When the lightbox opens, it is ready to receive keyboard input immediately. Navigation will wrap around from the last image back to the first.

How to Configure Your Layout

To set up your product media layout:

1. Navigate to your store's page builder and edit the Product Details page.
2. Select the Product Details element.
3. In the element's settings, locate the section for media layout.
4. Choose your desired layout option (e.g., Carousel, Grid, Stacked, or Single).
5. Select your preferred image zoom behavior (Open Lightbox, Click & Hover Zoom, or No Zoom).
6. Save your changes and preview the page to see the new layout in action.