Page Background

Each page within your popup can have its own unique background, allowing you to create multi-step popups with distinct visual styles for each stage. These settings are located within the Page Options section of the Live Editor.

The Page Background interface in the Live Editor

Page Image & Thumbnail

You can define a primary image for the page background and a separate image for navigation thumbnails.

Page Background Image

Click the image placeholder to open the Media Library, where you can upload new assets or select existing ones.

• Dynamic Content: You can use the dynamic content feature to automatically pull images from your PrestaShop products or other sources.

Thumbnail Image

By default, the module uses the background image for thumbnails. However, you can set a specific image here if you prefer a different preview for navigation purposes.

Image Display Properties

Next to the image selector, you can configure how the background image is rendered on the canvas using the Size and Position controls.

Background Size Options

• Auto: The default setting. The background image maintains its natural width and height.
• Cover: Scales the image to ensure the entire page area is covered. Some parts of the image may be cropped to maintain the aspect ratio without leaving empty space.
• Contain: Scales the image so that the entire picture fits within the page boundaries. This prevents cropping but may leave empty space if the image and page aspect ratios differ.
• Stretch: Forces the image to fill the exact dimensions of the page. Note: This setting does not maintain the image's aspect ratio and may result in a distorted appearance.

Positioning

Use the position fields to adjust the starting coordinates of your background image, allowing you to focus on specific parts of the visual when using the Cover or Auto sizing modes.

Background Color

Color

Assign a solid background color to the current page. If you are not using a background image, this color will fill the entire page. If you are using an image with transparency, the color will be visible underneath the image layers.