The display editor is where you build and customize your Promolayer displays — including popups, bars, and banners. This article walks through the editor's layout: renaming a display, editing its contents, using the live preview, and the buttons available in the toolbar.
How it works
Changing the name of a display
Click the title to edit.
Edit the contents of a display
Note: Content editing is not available for Single Image type templates.
The contents can be edited in the content tab on the left. Here you can change the content by adding components, dragging and dropping to re-order and deleting.
Each component can be clicked to edit it.
Live preview and editor modes
The main window is a live preview of how the display will look with current settings. It is a 1:1 representation of what will appear on your website. Mobile preview can be activated by clicking on the mobile icon.
Changes made to the display will be instantly updated in the live preview.
Three states are available
Main - This the what the user will first see when the popup opens.
Thank you - This is the screen shown after the user enters their email or otherwise submits a form.
Teaser - if enabled a small 'teaser' can be shown after the user closes the popup allowing them to access it again.
Options
Item | Description |
1. Design tab | This is where you can edit the design and content of the popup with a live preview. |
2. Rules tab | This is where you set when the display should show, who to show it to, which page to show it on, how many times it should show etc. |
3. Actions tab | This is where you decide the post conversion (after a form is submitted) action. This tab will not appear unless the form is switched on. |
4. Draft / Live switch | Switches between draft mode and live mode. Read more about draft and live mode here. |
5. On site preview button | This button launches a preview on your site. We call this the "on-site preview" to distinguish it from the live preview. Please note the app must be enabled (Shopify / Wix) or the script must be installed (Generic) for this to function. |
6. Save button | Saves the current display. Displays will not auto-save and if you do not press this your changes will be lost. |
7. Close button | Closes the current display editor window and returns to the dashboard. Unsaved changes will be lost. |
Related articles