Collection Page Above-the-Fold Optimization: $13K/Month Case Study
[ SUMMARIZE WITH AI ]
[ FREE CRO TEARDOWN ]
Find the 3 biggest revenue leaks on your store.
Every day a conversion leak goes unfixed, you're paying for traffic that doesn't buy. Get a 5-minute Loom through your PDP, cart, and checkout, with mockups of the fixes. No pitch.
Get My TeardownAbove the fold is expensive real estate. Don't waste it on clutter.
We tested the collection page layout for an 8-figure adult wellness brand. The control had a dark banner, separate filter dropdowns, and products pushed below the fold.
The winner? A lifestyle banner with benefit-driven copy, consolidated filters, and products visible immediately.
Results: +$13,730/mo revenue.
The Problem With Cluttered Collection Pages
The control page had good elements in the wrong arrangement.
A banner that took up space without adding value. "Shop All" with a promotional bundle callout. Then a "FILTER BY" dropdown. Then a "SORT BY" dropdown. Two separate rows of UI before you even saw a product.
On mobile, that's a lot of scrolling before shopping starts.
Every element above your products is a barrier. It better be earning its space.
The Hypothesis
Improving banner clarity, reducing unnecessary UI elements, and making products more visible on the ATF section of the collection page will enhance user experience.
By minimizing distractions, adding leading copy, and ensuring key products are seen immediately, this redesign will increase engagement, reduce drop-off rates, and drive higher conversions.
Three changes to test:
- Consolidate filter/sort UI into one row
- Make products visible above the fold
- Test different banner approaches
Test Setup
Page: Collection Page
Location: ATF Banner and Filters
Platform: Intelligems
Test Type: A/B/n with 4 variations
Control
Original layout:
- "Shop All" banner with dark overlay
- "The Crowd Pleaser | BUNDLE" promotional element on banner
- "FILTER BY: SHOP ALL" dropdown (separate row)
- "SORT BY: FEATURED" dropdown (separate row)
- Product grid below with "BESTSELLER" badges, names, descriptions, color swatches
- Products pushed below the fold on mobile
Variation 1
Redesigned layout:
- Colorful banner with product imagery on blue background, "Shop All" text
- Consolidated filters: "SHOP ALL" and "FEATURED" in single row
- Products visible above the fold
- "BESTSELLER" badges retained
Cleaner UI, faster path to products.
Variation 2
Same layout as Variation 1. Different product-focused banner design. Consolidated filters.
Variation 3 (Winner)
Same consolidated layout. Different banner:
- Lifestyle image showing product in use (hands visible)
- "Sensory satisfaction starts here" benefit-driven copy
- Same filter row and product cards as V1/V2
Emotional hook plus clean layout.
Results
Winner: Variation 3 (Lifestyle Banner + Benefit Copy + Consolidated UI)
| Metric | Improvement |
|---|---|
| Monthly Revenue | +$13,730 |
The lifestyle banner with benefit copy outperformed the product-only banner, even with identical layouts below.
Why It Worked
1. Consolidated UI reduced friction
Two rows of dropdowns became one row. Simple math: less scrolling, faster access to products.
Filter and sort options are utilities. They help customers refine, but they're not why customers came. Don't let utility UI push products below the fold.
2. Products above the fold increased engagement
In the control, you had to scroll past banner and filter rows to see the first product.
In the variations, products were visible immediately. "BESTSELLER" badges, product images, prices, and "ADD TO CART" buttons all above the fold.
Customers came to shop. Show them products.
3. Benefit-driven copy beat product-only imagery
Variation 3 beat Variations 1 and 2. Same layout. Different banner.
V1/V2 had colorful product shots. Nice, but purely visual.
V3 had "Sensory satisfaction starts here" with a lifestyle image. That's emotional. It speaks to why customers buy, not just what they're buying.
For intimate products, the emotional promise matters more than product photography.
4. "BESTSELLER" badges still earned their place
All variations kept the "BESTSELLER" badges. Social proof on collection pages works. It's been validated in multiple tests.
The win here wasn't about adding new elements. It was about removing friction and optimizing what was already there.
What This Means for Collection Page Layout
Audit your above-the-fold real estate. Is every element earning its space?
Questions to ask:
- Can filter/sort UI be consolidated? One row beats two rows
- Are products visible without scrolling? On mobile especially
- Does the banner add value or just take space? If it's not helping, shrink it
- Is there emotional copy or just category labels? Benefits beat descriptions
The goal is getting customers to products faster while setting the right emotional context.
FAQ
Should we remove banners entirely?
Not necessarily. Banners can set context and create emotional resonance.
But they should be compact on mobile. A full-screen banner that pushes products below the fold is too much. A smaller banner with strong copy can add value without blocking products.
How do you write good banner copy for sensitive product categories?
Focus on the benefit, not the product. "Sensory satisfaction starts here" is about the experience, not the item.
Avoid clinical language. Avoid crude language. Find the emotional middle ground that resonates with your audience.
What if we have important promotions to feature in the banner?
Use the announcement bar, not the collection banner. The site had "20% for Valentines Day with Code VDAY20" in the announcement bar. That's the right place for promos.
The collection banner should reinforce brand/category value, not compete with promotional messaging.
This test was run using Intelligems as part of a CONVERTIBLES personalization program. Want to see what collection page optimizations could do for your store? Book a call to get 3 personalized recommendations for your store.