Make Collection Names Readable in Empty Cart Suggestions
If collection names in the empty cart section lack contrast or are difficult to read, users may miss key product recommendations, reducing the effectiveness of this space.
Ensure high contrast and proper text sizing to keep collection names clear and accessible. Whether users are on mobile or desktop, readability is key to guiding them back into shopping mode and increasing conversions.
- Your empty cart page has a bounce rate above 70% or users spend less than 30 seconds on the page
- Collection names in your empty cart suggestions use low-contrast colors (below 4.5:1 ratio) or font sizes smaller than 14px on mobile
- Analytics show poor click-through rates (under 8%) from empty cart to collection pages despite having product recommendations
- Your store operates on Shopify, Shopify Plus, or other major eCommerce platforms where cart template customization is possible
- You have established collections with clear product groupings and generate 1,000+ monthly cart page views
Start by auditing your current empty cart collection name readability using browser developer tools or contrast checking tools.
- Access your cart template: In Shopify, navigate to Online Store > Themes > Actions > Edit Code, then locate
cart.liquidorcart-empty.liquid - Update CSS styling: Ensure collection names meet accessibility standards with minimum 4.5:1 contrast ratio and 16px font size on mobile, 18px on desktop
- Implement responsive design: Use CSS media queries to adjust font weights and spacing across devices
.collection-name {
font-size: 18px;
font-weight: 600;
color: #333333; /* Ensure 4.5:1 contrast */
margin-bottom: 12px;
line-height: 1.4;
}
@media (max-width: 768px) {
.collection-name {
font-size: 16px;
margin-bottom: 8px;
}
}
Timeline: Implementation typically takes 2-4 hours for a developer, including testing across devices. Allow 1-2 weeks for meaningful conversion data collection.
- Click-through rate from empty cart to collections: Target 10-15% improvement within 2-3 weeks
- Time spent on empty cart page: Expect 20-30% increase in average session duration
- Empty cart bounce rate reduction: Look for 5-10 percentage point decrease over 4 weeks
- Collection page traffic from cart: Monitor 15-25% increase in referral traffic using Google Analytics or your platform's built-in analytics
- AVOID: Using brand colors that create poor contrast ratios just for visual consistency. BEST PRACTICE: Test all text colors against backgrounds using WebAIM's contrast checker tool.
- AVOID: Making collection names too large and overwhelming the product images. BEST PRACTICE: Maintain hierarchy with collection names 2-4px larger than product titles.
- AVOID: Forgetting to test readability on actual mobile devices in various lighting conditions. BEST PRACTICE: Test on multiple devices and adjust font weights for better mobile legibility.
- AVOID: Using decorative fonts that sacrifice readability for style. BEST PRACTICE: Stick to system fonts or highly legible web fonts for collection names.
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: