Introduction
Using timely popups in your store encourages activity, boosts engagement, and increases loyalty-driven sales. Let's dive in and go through how to set these up in your shop within a few minutes!
✨ Loyalty popups are available on all paid plans.
Types of popups
Boosting member sign-ups
This popup encourages guests to sign up for your loyalty program. It will show on the first page view for any new visitor on your store, and any subsequent page they visit unless they click Join Now or close the popup.
Boosting points engagement
This popup encourages members to spend their points on the /cart page. It will show when a customer is signed in to their account, is on the cart page, and has points to spend.
Boosting reward engagement
This popup encourages members to redeem their rewards on the /cart page. It will show when a customer is signed in to their account, is on the cart page, and has a reward available to use.
📝 Note: Since the Points Engagement and Reward Engagement pop-ups follow the same display rules, they can’t appear at the same time.
Pop-up Trigger Logic: Reward Engagement vs. Points Engagement
On the cart page, Reward Engagement and Points Engagement are two separate pop-ups that help encourage customer actions. Only one pop-up will appear at a time, based on the buyer's account status. Here's how it works:
✅ Case 1: Buyer has at least one valid coupon
→ Show Reward Engagement pop-up
✅ Case 2: Buyer has enough points to redeem any coupon, but no valid coupons
→ Show Points Engagement pop-up
✅ Case 3: Buyer has both a valid coupon and enough points to redeem one
→ Show Reward Engagement pop-up
(Reward Engagement has higher priority)
⚠ Important:
To keep the experience simple and clear, only one pop-up will appear at a time.
Priority order:
Reward Engagement > Points Engagement
Enabling your popups
1. From your Loloyal dashboard, go to Program > Popup
2. Click on the pop-up you want to edit
3. Adjust pop-up settings in the pop-up editor
Let’s take the Member Sign-up pop-up as an example:
Trigger - Set how long to wait before the pop-up shows up.
Visibility - Choose which pages the pop-up should appear on.
Icon - Use the default icon or upload your own.
Translations - Customize the popup language. All widget texts support multiple languages, and customers will see the version that matches their selected language.
Content - Edit the message or info shown in the pop-up.
Button - Change the text on the CTA (Call-to-Action) button to match your brand tone, like “Join Now” or “Get Started.”
4. Save changes.
5. Make sure to enable your popup program.
Customizing pop-up design to match your brand
1. Navigate to Program > Popup > Design, and click Edit
2. Adjust pop-up placement, change button color and text color, and set the popup container shape.
3. You can use the following Loloyal CSS element classes to customize the appearance:
Popup Container:
.loloyal-popup-iframe
Use this to style the overall layout and background of the pop-up.Popup Logo:
.loloyal-popup-logo
Customize the size, position, or look of your pop-up logo.Popup Close Button:
.loloyal-popup-close
Adjust how the close icon appears—size, color, or placement.
Apply these classes in your theme’s custom CSS to create a polished, on-brand experience for your customers.
4. Apply Loloyal CSS code snippets to personalize your popup style.
Want to quickly customize the look of your pop-ups? We’ve prepared a set of pre-made CSS snippets that you can simply copy and paste into your CSS or code injection box.
Change the background color, metal gradient
.loloyal-popup-iframe { background: linear-gradient(to bottom right, #f0f0f0, #e0e0e0 ); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
Change the background image use url()
.loloyal-popup-iframe { background-image: url('https://replace-to-your-texture-image.jpg'); /* Replace with your image URL */ background-size: cover; color: #fff; /* Change the text color, if needed */ }
Add a Google font to the Popup
/** * @import Must be on the first line! */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap'); .loloyal-popup-iframe { font-family: 'IBM Plex Sans' !important; }
Change the color of the close button
.loloyal-popup-close path { fill: black !important; }
Adjusting the size of the Logo
.loloyal-popup-logo, .loloyal-popup-logo-placeholder { width: 120px; height: 120px; }
Popup analytics
In the Analytics section, you can gain valuable insights into how your popups are performing. Keep track of key metrics to understand customer engagement at a glance:
Views - Number of unique views
Clicks - Unique clicks on the CTA button.
Click-through rate - The percentage of views that resulted in a click, helping you measure how effective your popup is.
Use these metrics to optimize your messaging and design for better results!
Common Questions
1. How do I remove a popup?
To remove a popup, turn off the toggle switch next to the popup you want to disable.
2. Is it possible to change the link the popup button directs to?
No, the button opens the Loloyal widget panel to provide a seamless experience for signing up or redeeming points and rewards. However, you can add a link in the pop-up content section to direct customers to any page you want.
