Source for best-priced products from millions of qualified suppliers at Sup Dropshipping    Start Sourcing

No credit card required to Start Shopify Trial or Try PageFly

Start Shopify trial Try PageFly freeTry PageFly free
Product page optimization

A Guide to Better Scrolling and Cross-Sell Placement on Product Pages

By Victor Bui | Mar 31, 2025 | 5 minutes read

Share

Main problems ❌

  • Full-width cross-sell sections placed above product details can cause users to stop scrolling, leading to missed product information, reviews, and specifications.
  • Mobile users face additional issues with tall cross-sell sections, which increase scrolling fatigue and potential scroll hijacking.
  • Split-scrolling layouts disrupt the expected scrolling behavior, causing confusion and frustration.
  • Some split-scrolling designs force users to scroll through one column before the other moves or change scrolling based on cursor placement, making navigation unpredictable.
  • These issues can lead to users abandoning the site due to poor user experience.
Amfora’s split-scrolling design

❌ Amfora’s split-scrolling design confused users because too much content was placed in one scrolling section. Users kept scrolling in that section and didn’t realize more information was in other parts of the page. This made them miss important details or leave the page too soon without seeing all the important content.

Solutions ✅

  • Place full-width cross-sell sections at the bottom of the product page to avoid distracting users from essential product details.
  • Consider partial-width or sidebar placement for cross-sells on desktop but ensure product images remain large and clear.
  • Ensure all product content scrolls as a single column to maintain consistency and prevent navigation issues.
How Batch uses vertically collapsed sections

✅ Unlike Amfora, Batch, a PageFly customer kept their product page simple and easy to follow on one screen, maintaining consistency and preventing navigation issues.

Learn // Optimize // GrowLearn // Optimize // GrowLearn // Optimize // GrowLearn // Optimize // GrowLearn // Optimize // GrowLearn // Optimize // Grow
Learn // Optimize // GrowLearn // Optimize // GrowLearn // Optimize // GrowLearn // Optimize // GrowLearn // Optimize // GrowLearn // Optimize // Grow

Table of content

Findings

Tips for desktop

Feature a wide selection of products

Showcase clear and attractive thumbnails

Highlight best sellers

Use engaging visuals

Tips for Mobile

Avoid autoplay carousels

Simplify navigation

Create clear visual links

Conclusion

Frequently asked questions

CRO side banner.gif__PID:b56d1244-9308-4d56-9fc2-86fdd229c567

Findings

Don't let your page design get in the way of making sales. When users have to navigate through multiple columns or disjointed scrolling sections, they're more likely to leave your site frustrated. Instead, keep it simple with a smooth, single-column layout that lets them scroll naturally through your product information. Think of it as creating a clear path to purchase – the easier you make it for customers to learn about your product, the more likely they are to buy it.

The data backs this up: putting your cross-sell sections at the bottom of the page, after all the main product details, helps maintain user focus where it matters most. This strategic placement ensures customers get all the essential information about your product before seeing related items. It's a proven approach that not only reduces user frustration but also increases the chances they'll stay engaged long enough to make a purchase decision.

Tips for a better scrolling & cross-sell placement on product pages

Tips for desktop

Prioritize product details

CRO Promo Box.png__PID:45c057f2-2abe-4e26-9048-6b90471930c6

Don't place product recommendations too early on your page. Why? Because customers need to see all the important product details first. When you put cross-sell sections near the top, shoppers might think they've reached the end of the page and stop scrolling. This means they'll miss important information like product specs, descriptions, and reviews that could help them make a purchase decision.

Tips for product details

✅ Built with PageFly, SwitchEasy highlights product recommendations near the footer, ensuring customers finish focusing on the main product first. This is the perfect moment to offer more options if the main product isn’t what they’re looking for.

This can done well with PageFly’s Product List element, you can structure your product details in a clear, easy-to-follow format, preventing clutter and ensuring that important information appears in the right order. This keeps users engaged with the main product before they encounter related suggestions, reducing distractions and improving their overall shopping experience.

Smart use of page width

Instead of taking up the full width of your page, try putting cross-sell items in a sidebar or partial-width section. This way, customers can still focus on the main product while seeing other suggestions. Just remember to keep your product images big enough to be eye-catching – if they're too small, people might ignore them.

Tips for page width

✅ SwitchEasy also makes smart use of page width by adding a sidebar or partial-width section while keeping product images large enough to stay eye-catching.

Tips for Mobile

Keep scrolling simple

Make sure your page scrolls normally, from top to bottom. Avoid designs where different parts of the page scroll separately (called split-scrolling). This can confuse shoppers and make them feel lost on your page. When customers get frustrated with confusing navigation, they're more likely to leave without buying anything.

tips for scrolling on mobile

✅ Powered by PageFly, FiberBorne keeps shoppers engaged with a single-screen product page, allowing them to scroll smoothly from top to bottom without interruptions.

Keep recommendations short

On mobile devices, long sections of product recommendations can be tiresome to scroll through. Keep these sections brief and to the point. If customers have to swipe through too many recommendations to get to important product information, they might get frustrated and leave.

tips for recommendation on product page

✅ Feinkost Käfer uses PageFly’s product list element as a carousel for product recommendations instead of a long section, making the page more compact and easier to navigate.

Instead of overwhelming users with long, cluttered lists, the Content List element on PageFly’s editor can help you present just the right amount of content in a structured way. This ensures customers can easily browse through recommendations without unnecessary scrolling fatigue, making their shopping experience more enjoyable and efficient.

Optimize carousel size

If you use sideways-scrolling carousels for product recommendations on mobile, make sure they don't get in the way. When these sections are too big, customers might accidentally swipe sideways when they mean to scroll down. Keep these sections compact and make sure they don't interrupt the natural up-and-down scrolling of your page.

tips for carousel size

✅ Feinkost Käfer's carousel might be slightly oversized for mobile screens, but Laballons, a PageFly-powered store offers a better example with product recommendations that fit perfectly.

Conclusion

To sum it up: Keep things simple and smooth! Place cross-sells at the bottom, avoid split-scrolling, and make sure your page is mobile-friendly. That way, your customers stay engaged and ready to shop!

Frequently asked questions

Why is split-scrolling such a problem on product pages?

Split-scrolling disrupts the natural way users browse online. When different sections of a page scroll independently, it creates confusion and frustration, making it harder for customers to navigate through product information efficiently. A single-column scroll matches how users normally interact with websites and helps maintain their focus.

Where should I put my cross-sell sections?

Cross-sell sections should be placed at the bottom of product pages, after the main product information. This placement ensures customers can first focus on the primary product details before seeing related items. It creates a logical flow that doesn't interrupt the customer's decision-making process.

How much does page layout really affect my sales?

Page layout significantly impacts sales conversion rates. A poorly designed layout that's difficult to navigate often leads to cart abandonment. A clear, intuitive design that presents information in a logical order helps keep customers engaged and increases the likelihood of completing a purchase.

Related posts

Jia - CRO Blog Thumbnail Updated version (2).jpg__PID:04e111bb-ec48-4f26-94e4-a167aabb86b6Homepage optimization

Make Top Products and Brand Strengths Stand Out on Homepage

Mar 31, 2025

use_sticky_table_of_content.png__PID:c6c383f1-55f0-4979-9dbb-11d5d4f69df9Product page optimization

Use a Sticky Table of Contents (TOC) for Long Product Pages (PDPs)

Mar 31, 2025

add_a_recently_viewed_items_list.png__PID:0ac6c383-f155-4089-b9dd-bb11d5d4f69dProduct page optimization

Add a Recently Viewed Items List for Better Navigation

Mar 31, 2025

PageFly CRO features

Check out our powerful built-in CRO features to help you grow

A/B testing

Coming soon

New analytic dashboard

Highlight your deals and engage shoppers to take actions.

Build your storefront that converts

Access all the tools you need to build your unique store!

Install PageFly now

Free plan forever. No risk.