CRO Manifesto
User Experience, Technical Performance
context
When collection and product links look the same, users may struggle to differentiate between browsing a category and selecting a specific product. This can lead to frustration and an inefficient shopping experience.
Why?
Use spacing, font weight, icons, or dividers to clearly separate collection links (e.g., "Men's Shoes," "Best Sellers") from product links (e.g., "Nike Air Max," "Adidas Ultraboost"). This ensures users instantly understand where each link leads, making their journey smoother and more intuitive.
Content
- Your navigation menu mixes category links (Collections, Best Sellers) with product links without visual distinction
- Analytics show high bounce rates (>60%) from navigation pages or users frequently using back button after clicking nav links
- You're running Shopify, Shopify Plus, or any platform where you can customize navigation styling via CSS
- Your store has multiple product categories and featured products in the same navigation area
- You receive customer feedback about difficulty finding specific products or categories
Focus on creating clear visual hierarchy between collection and product navigation links through strategic styling differences.
- Shopify Implementation: Navigate to Online Store > Themes > Customize > Header section. Identify your navigation menu settings.
- Add CSS Distinctions: Use theme customizer's Custom CSS section or edit
theme.liquidto add:/* Collection links */
.nav-collection {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Product links */
.nav-product {
font-weight: 400;
padding-left: 16px;
border-left: 2px solid #e5e5e5;
} - Add Visual Separators: Insert divider elements between link types using
|symbols or 1px borders with 8-12px margin spacing. - Mobile Optimization: Ensure touch targets remain 44px minimum height. Stack link types in separate sections for mobile menus.
- Implementation Time: 2-4 hours for basic styling, additional 2 hours for mobile optimization and testing.
- Navigation Click-Through Rate: Expect 15-25% improvement in users clicking correct link type on first attempt
- Page Bounce Rate: Look for 10-20% reduction in bounce rates from navigation landing pages
- Task Completion Rate: Track 20-30% fewer instances of users backtracking from navigation clicks
- Time to Purchase: Monitor for 8-15% reduction in average session duration before conversion over 3-4 weeks using Google Analytics Enhanced Ecommerce
- AVOID: Making differences too subtle - 1-2px font weight changes won't be noticed by users
- BEST PRACTICE: Use multiple visual cues (weight + spacing + color) for clear distinction
- AVOID: Overcomplicating mobile navigation with too many visual elements that crowd small screens
- BEST PRACTICE: Group similar link types into collapsible sections on mobile devices
- AVOID: Inconsistent styling across different navigation areas (header vs footer vs sidebar)
- BEST PRACTICE: Create a style guide ensuring collection vs product links look identical across all site locations
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