This explains how to set up an A/B test between Alia and another popup provider using an external A/B testing tool.
Common Use Cases
Testing multiple Alia campaigns against a different popup provider
A/B testing popups in different themes
Running simultaneous A/B tests where identical variants are consistently shown across experiments (i.e., all “A” popup variants are shown only to users in variant A)
Implementation Overview
To run an external A/B test with Alia alongside another popup provider, the goal is to ensure that only one popup appears per variant while keeping targeting aligned.
Step 1: Identify the Existing Popup Selector
Locate the existing popup on the site and determine a reliable CSS selector for it.
You can:
Inspect the popup element directly on the live site
Identify a unique class or ID tied to that popup
Step 2: Set Up Your Variants
Create your A/B test with two variants:
Control Variant → shows the existing popup
Alia Variant → shows the Alia campaign instead
Each variant should clearly define which popup is allowed to appear.
Step 3: Hide the Opposing Popup in Each Variant
In each variant, use CSS to hide the popup that should not be shown.
For the Alia Variant, hide the existing popup:
.other-popup {
display: none !important;
}For the Control Variant, ensure the Alia campaign does not appear (this will be handled via targeting in later steps).
Step 4: Set a Variant Flag for Alia
In the Alia Variant, add the following JavaScript:
window.SHOW_ALIA = true;
This flag will be used to control when the Alia campaign is allowed to display.
Step 5: Update Alia Campaign Targeting
In the Alia dashboard, update your campaign targeting to include a custom code condition:
return window.SHOW_ALIA === true;
This ensures the campaign only appears for users assigned to the Alia variant.
Step 6: Validate the Setup
Before launching:
Publish the Alia campaign (it will remain hidden unless the condition is met)
Preview the Control Variant and confirm only the existing popup appears
Preview the Alia Variant and confirm only the Alia campaign appears
Ensure both popups never appear at the same time
Platform-Specific Setups
The exact implementation may vary depending on the A/B testing tool you’re using. Below are examples of how to configure your variants to control which popup appears in each platform.
Intelligems
Setting up the A/B test in Intelligems is straightforward. In one variant, allow the Alia popup to appear and hide the X popup using CSS. In the other variant, allow the X popup to appear and block Alia using JavaScript.
Create a new test
Name your A/B Test and select Onsite Edits or Template Test depending on the test’s nature
Set your test groups
Go to the Modifications tab and set the CSS to hide the other variant’s popup. Make sure you are on the right variant drop down. In this case, we’re hiding Attentive from the Alia variant.
Set JavaScript signal matching the campaign’s custom code. Set this to false on the other variant where X should popup.
Shoplift
Shoplift only allows A/B testing between different theme templates. To set this up, duplicate the theme you’ll be testing (usually the live theme). In the live theme, hide the Alia popup using JavaScript. In the duplicate theme, allow the Alia popup to appear and hide the X popup using CSS.
Start by Duplicating the live theme in Shopify
Open Shoplift and create a test
Select “Test a theme”. This is the only way to A/B test that includes all the pages.
Select the themes for your A and B tests. A should be the live theme / X popup. B should be the duplicate theme / Alia popup.
Edit the codes to the A variant. Go to theme.liquid and the line above </head> and insert the code to hide Alia using JavaScript. Warning: Be careful with inserting the codes as you are editing the live theme.
Edit the codes to the B variant. Go to theme.liquid and the line above </head> and insert the code to show Alia and the CSS to hide the X popup.
Convert
Setting up the A/B test in Convert is also straightforward. In one variant, allow the Alia popup to appear and hide the X popup using CSS. In the other variant, allow the X popup to appear and block Alia using JavaScript.
Inside the specified project, create New Experience.
Add the variants.
Edit the Variation JS and CSS for the X popup variant to hide Alia by adding window.ALIA_SHOW = false;
Edit the Variation JS and CSS for the Alia variant to show Alia by adding window.ALIA_SHOW = true; and adding the CSS to hide the X popup.
Variant Specific Setups
Each variant uses a simple JavaScript flag to control whether Alia appears. Setting window.SHOW_ALIA = true allows Alia to run, while false prevents it from showing. This variable is then referenced in the Alia campaign targeting using a custom code condition, ensuring that the popup only appears in the intended test variant.
In most cases, the control (competitor) popup is already active by default, so no extra setup is needed on their side—we only need to disable Alia in the control variant.
Below are the codes used to hide Alia or the control popup in each variant, ensuring only one popup appears at a time.
Alia
To show or hide Alia, we usually use:
window.SHOW_ALIA = true; // to show
window.SHOW_ALIA = false; // to hide
Alia x Klaviyo (CSS)
.needsclick.kl-private-reset-css-Xuajs1 {
display: none !important;
}
Alia x Attentive (CSS)
html {
overflow: unset !important;
}
div#attentive_overlay {
display: none !important;
}
Alia x Postscript (JS + CSS)
window.SHOW_ALIA = true;
setInterval(() => {
document.body.classList.remove('ps-scroll-lock');
}, 500);
div#ps__widget_container {
display: none !important;
}