Merchants use popups to turn visitors into customers. Most merchants also wish they could run personalized offers for their VIP customers. In practice the experience can be conflicting.
How often have you clicked through a link for an exclusive offer from an influencer, only to be bombarded by conflicting offers when you get to the site?
In this tutorial we will show you how to hide your popups when running promotions to increase your conversions.
Understanding Abra Promotions
Abra gives you a simple system to activate promotions via links or JavaScript events. This gives you the power to show or hide anything, and dynamically update prices.
This allows you to improve the shopping experience, increase conversions, and reduce friction. In this guide we will dive into how you can reduce friction.
Preparing your environment
Tools needed:
- Klaviyo email or SMS popup
- Chrome dev tools
- Shopify theme editor
Setting up:
- Navigate to the Shopify theme editor
- Add custom CSS to your theme
Step 1. Inspect your popup
We need to identify a unique class or ID in the DOM that we can target. We will use this to hide the modal later.
In the example on our store—which uses a Klaviyo popup—the class .kl-private-reset-css-Xuajs1 gives us control of the modal. Even though it seems like an unusual class name, it has proven to be stable in tests.
Step 2. Add your custom CSS
Abra offers helper CSS classes that can be activated depending on the promotion’s state. From the Shopify theme editor - add some custom CSS using the Abra class
| Name | Description |
|---|---|
.abra--initialized |
A modifier class applied to the body element when Abra is initialized |
.abra--activated |
A modifier class applied to the body element when a promotion is active |
.abra--applied |
A modifier class applied to the body element when a promotion is applied |
.abra--{{ code }}-activated |
A modifier class, where {{ code }} is your promotion code, applied to the body element when a promotion is active |
.abra--{{ code }}-applied |
A modifier class, where {{ code }} is your promotion code, applied to the body element when a promotion is applied |
Step 3. Putting it all together
Next we will apply the Abra class to the DOM element we highlighted. Here is an example of the code we wrote.
.abra--activated .kl-private-reset-css-Xuajs1 {display: none !important;}
Now whenever an Abra promotion certain components such as this offer popup will be hidden.
Conclusion
Abra can help you reduce friction and create a true VIP experience, having your website compliment the offers you have so thoughtfully planned.