Modals

General

Modals appear on top of the main content and typically require user interaction before allowing them to return to the page. They are used to draw attention to specific content or actions.

Modals are used in the following sections: Promotional Popup, Popup Links, Product Media Gallery, Gallery, and Image With Hotspots. They are also present in product image hotspots and the country selector in the header and footer.

Color Scheme

Select the color scheme for all modals. This ensures a consistent design across different modal use cases.

Border Radius

The border-radius setting allows you to adjust the roundness of the modal's corners. Set the border radius in pixels, from sharp 90° corners to smoothly rounded edges. This customization helps align the modal’s style with your store’s overall design.

Overlay Opacity

When a modal is open, an overlay covers the rest of the page. Use this setting to adjust the opacity of the overlay, controlling how dark or light the background appears.

Overlay Blur

This setting lets you define how blurred the objects behind the overlay appear. Adjusting this creates a soft focus on the modal while minimizing distractions from the background.