CRO Manifesto
Make Buttons Big And Full-Width
context
Small or poorly designed buttons can be difficult for users to notice and interact with, especially on mobile devices. This can lead to missed opportunities and reduced click-through rates.
Why?
Larger, full-width buttons are easier to see, tap, and engage with, improving accessibility and usability. They also create a clear visual cue for users, encouraging them to take action.
Content
- Your mobile click-through rates on primary CTAs are below 3-5% and desktop rates are under 8-10%
- Google Analytics shows high bounce rates on mobile (above 70%) with users scrolling past key action areas
- Your current buttons are smaller than 44px height on mobile or narrower than 80% of container width
- You're running a Shopify store with moderate traffic (1,000+ monthly visitors) where button improvements can generate measurable impact
- Heatmap data reveals users are missing or struggling to tap your primary action buttons
Start with your homepage's primary CTA buttons - typically "Shop Now" or "Browse Collection" buttons.
- In Shopify Theme Editor: Navigate to your theme customization panel and locate button style settings under "Typography" or "Buttons" sections
- Set Mobile Specifications: Configure buttons to minimum 48px height and 90-100% container width. For desktop, maintain 44px height but allow 60-80% width maximum to avoid overwhelming larger screens
- Apply CSS Overrides: If theme options are limited, add this code to your theme's CSS file:
.btn-primary, .cta-button {
width: 100%;
min-height: 48px;
padding: 14px 24px;
font-size: 16px;
}
@media (min-width: 768px) {
.btn-primary, .cta-button {
max-width: 320px;
margin: 0 auto;
}
}
- Test Across Devices: Use Shopify's mobile preview and test on actual devices to ensure buttons don't break layout or become too dominant
- Implementation Timeline: This change takes 30-60 minutes for most Shopify stores and can go live immediately
- Click-through Rate: Expect 15-30% improvement in button clicks within 2-3 weeks of implementation
- Mobile Conversion Rate: Monitor for 8-20% increase in mobile conversions, with results typically visible after 1-2 weeks
- Bounce Rate Reduction: Track 5-15% decrease in bounce rates on pages with updated buttons using Google Analytics
- User Engagement: Use Hotjar or similar heatmap tools to verify increased interaction with button areas compared to pre-implementation data
- AVOID: Making desktop buttons full-width as they become overwhelming on larger screens and reduce visual hierarchy. BEST PRACTICE: Cap desktop button width at 320-400px maximum
- AVOID: Forgetting to test button text readability when increasing button size - larger buttons often reveal font size issues. BEST PRACTICE: Ensure minimum 16px font size and adequate contrast ratios
- AVOID: Implementing changes without considering button spacing, causing layout breaks on mobile. BEST PRACTICE: Maintain 16-24px margins around buttons
- AVOID: Making every button full-width, which eliminates visual prioritization. BEST PRACTICE: Apply full-width treatment only to primary CTAs, keep secondary buttons smaller
Get A Free Website Audit.
We’ll identify what’s leaking revenue on your site and show you how to fix it. The free audit includes:
Live Website Walkthrough
Technical Analysis
Conversion Checklist
Key Section Redesigns
Industry & ICP Research
Implementation Plan
Work with the #1 Team That gets you predictable results.
Strategy
DESIGN
COPYWRITING
DEVELOPMENT
Free Audit & Redesign
Get a Free Audit
See the difference for yourself. We’ll identify what’s leaking revenue on your site and show you how to fix it.
Free Forever
130+ Optimizations
Section Redesigns
CRO Strategy Call
Talk to Glued
This isn’t a sales call. It’s a hands-on teardown session where we walk through exactly what’s holding your site back and what fixing it would mean for your revenue.
No Sales Pitch
ROI Projections
Free CRO Strategy