Overview
By default, popups are designed to occupy the full screen to capture maximum attention. However, sometimes, you might want to change it to a non full screen popup. In this guide, we will learn how to create a focused popup that sits neatly in the middle of the browser window.
Step-by-Step Configuration
Follow these steps within the Alia editor to modify your layout hierarchy.
Step 1: Open the Editor
Navigate to your popup editor and ensure you are working on the Desktop version of your popup.
Step 2: Duplicate the Container
Locate the Fullscreen Desktop Container in the element tree. Click the three dots (options menu) on the container and select Copy. Then, click the three dots again and select Paste as child element.
Step 3: Clean Up the Hierarchy
Because you pasted the container as a child, you now have a duplicate set of elements. Delete the elements directly inside the outermost container, leaving only the new child container and the elements inside it.
Note: The goal is to have an outer container acting as the "overlay" and an inner container acting as the "popup box."
Step 4: Align the Outer Container
Select the outermost desktop container and update the layout settings on the right-hand panel:
Direction: Vertical
Vertical Align: Center
Horizontal Align: Center
Step 5: Set Child Container Layout
Select the inner (child) desktop container and set its Layout type to Relative.
Step 6: Adjust Dimensions
In the "Size" section of the right-hand editor for the child container, set the Width and Height to 80% (or your preferred fixed dimensions).
Step 7: Style the Overlay
Select the outermost desktop container again. Set the Background Color to black (#000000) and adjust the Opacity to 50%. This creates the classic dimmed background effect.
💡Pro Tip: To give your popup a softer, modern look, select the child container and add a Border Radius (e.g., 8px or 12px) under the styling tab.
Remember to preview your changes and that's it! You've successfully modified your pop-up to not be full screen.
Allowing visitors to interact with the site while the popup is open
If you want shoppers to be able to click and browse the page while the popup remains visible, two things are required:
Disable the modal setting. While modal is enabled, the popup blocks interaction with the page behind it.
Make sure the main component is not set to 100vw or 100vh. It needs to size to fit its content instead, otherwise it still covers the full viewport even without the modal behavior.
Creating a flyout widget
A flyout is largely the same styling exercise as the steps above: set the popup to a non-fullscreen size, then adjust its positioning so it sits at the edge of the screen rather than centered. No additional setup is required beyond those layout adjustments.