How do I customize the discount pop-up for different screen sizes?
Muhammed Tüfekyapan
Founder & CEO
TL;DR - Quick Answer
Complete Expert Analysis
Customizing Discount Pop-Ups for Different Screen Sizes
A pop-up that covers the entire mobile screen or clips on a small phone kills conversions before they start. Responsive design ensures every visitor sees a clean, functional offer - regardless of device.
Core Responsive Principles
| Screen Size | Recommended Pop-Up Width | Font Size |
|---|---|---|
| Mobile (<480px) | 90-95% viewport width | 14-16px body |
| Tablet (480-768px) | 70-80% viewport width | 15-17px body |
| Desktop (>768px) | 400-500px fixed or 40% | 16-18px body |
CSS Media Query Pattern
@media (max-width: 480px) {
.discount-popup { width: 92vw; padding: 1rem; }
.discount-popup h2 { font-size: 1.2rem; }
.discount-cta-btn { width: 100%; font-size: 1rem; }
}
Mobile-Specific Design Adjustments
- Bottom sheet layout: Slide-up from bottom works better on mobile than centered modals
- Large tap targets: CTA buttons minimum 48px tall, close button clearly visible
- Single-column layout: Remove two-column designs for screens under 480px
- Shorter copy: Mobile users read less - cut text by 40% from desktop version
- No hover states: Replace hover interactions with tap-friendly alternatives
Content Adaptation by Screen Size
| Element | Desktop | Mobile |
|---|---|---|
| Headline | Full headline with context | Discount amount only |
| Body copy | 2-3 sentences with benefits | 1 short sentence max |
| Timer | Full countdown with labels | Minutes:seconds only |
| Image | Product image optional | Hide or thumbnail only |
Growth Suite Trigger Campaigns
Growth Suite's Trigger Campaigns are built mobile-first with fluid, responsive layouts. The pop-up templates automatically adjust to any screen size - no custom CSS required. The built-in A/B Testing Module also lets you test different layouts per device type to find what converts best on each screen size.
Testing Checklist
- Test on actual devices (not just browser DevTools)
- Check iOS Safari and Android Chrome specifically
- Verify close button is always accessible
- Confirm keyboard doesn't push pop-up off screen on mobile
- Check landscape orientation on phones
Turn This Knowledge Into Real Revenue Growth
Growth Suite transforms your Shopify store with AI-powered conversion optimization. See results in minutes with intelligent behavior tracking and personalized offers.
+32% Conversion Rate
Average increase after 30 days
60-Second Setup
No coding or technical skills needed
14-Day Free Trial
No credit card required to start
With over a decade of experience in e-commerce optimization, Muhammed founded Growth Suite to help Shopify merchants maximize their conversion rates through intelligent behavior tracking and personalized offers. His expertise in growth strategies and conversion optimization has helped thousands of online stores increase their revenue.
Continue Learning
Discover more expert insights to accelerate your e-commerce growth
How do I write a Mother's Day cart abandonment recovery email?
A Shopify merchant wants to write effective cart abandonment recovery emails specifically tailored for Mother's Day g...
What is the best timing for a Mother's Day cart recovery email?
A Shopify merchant wants to optimize the timing of their Mother's Day cart abandonment recovery emails. They need to ...
Should I offer an extra discount in my Mother's Day recovery email?
A Shopify merchant is debating whether to include a discount code in their Mother's Day cart abandonment recovery ema...