By Victor Bui | Mar 31, 2025 | 8 minutes read
Share
Main problems ❌
❌ Crutchfield’s product page uses tabs to display important information, but the majority of visitors struggle to find user reviews as they often overlook the tabs. Source: Baymard.
Solutions ✅
✅ JYSK implemented a sticky TOC, allowing customers to easily navigate to the information they need. Source: Baymard
Meet Keychron
Challenge
Solution
How Keychron found PageFly?
Hightlight solutions that PageFly provides
Product Details Page
Results
Baymard’s research, based on extensive e-commerce usability testing, provides strong evidence for using a sticky Table of Contents (TOC) and reveals several interesting insights:
Content Discovery Rates:
User Behavior Analysis:
Layout Performance:
Position it high on the product page, within the browser's initial viewport. Research shows this is crucial because placing the TOC outside the fold makes it impossible for users to view product page content sections upon landing.
This high placement is especially important for re-visiting customers, who need to quickly re-establish their bearings when jumping between different product pages.
During testing, when users couldn't immediately see the TOC, they often concluded that certain product sections simply didn't exist on the site. This occurs because e-commerce sites vary in their content offerings - some have FAQs, product videos, or comparison tables, while others don't. Without seeing these sections in the TOC immediately, users assume the content isn't available rather than looking for it further down the page.
Additionally, the TOC should be integrated with the Reviews shortcut for a critical reason: while users expect reviews at the bottom of product pages, testing showed they need them earlier for purchase decisions and finding alternative products. Integration with the TOC solves this by keeping reviews accessible regardless of their position on the page.
This store's "One Long Page" layout, combined with a sticky TOC at the top, has proven highly effective. The design ensures a seamless experience: while a small percentage of users rely on scrolling, the majority benefit from the always-accessible TOC for quick and efficient navigation. Source: Baymard
Use a not-too-tall and high-contrast design. Testing showed that overly large or graphical TOC designs are often ignored by users, being mistaken for advertisements or decorative elements. The TOC must provide a compact, efficient overview of product sections while remaining noticeable to users.
Section titles must be specific and accurate because there's no web convention for product page content. Research shows that when titles are vague or generic, users struggle to understand what content is available and may miss important information entirely.
The TOC needs to provide a very compact and efficient overview of the product page sections, as demonstrated by successful implementations in testing.
This store designs its TOC in a simple, intuitive way, ensuring that each section name is clear and effectively provides an overview of the product page content. Source: Baymard
Implement smooth scrolling animations when users click TOC links. This helps users understand their movement on the page and maintain context when jumping between sections. The permanent visibility of the TOC allows users to efficiently navigate back to previous sections without losing their place, particularly when comparing multiple products in different tabs.
The sticky effect creates an essential navigational anchor. This proves superior to horizontal tabs or collapsed sections, where users must first scroll to find navigation controls before accessing content.
A key consideration in content placement: users expect reviews and cross-sells at the page bottom, yet these are core elements for purchase decisions. Each additional section increases the risk of users missing content further down. The TOC resolves this by providing a clear overview of all available sections while maintaining their natural placement order.
Accurate section titles are crucial. Without them, users often miss important content simply because they can't recognize where it's located on the page. This becomes even more critical for sites with extensive product information spread across multiple sections. For example:
Poor titles: "Info", "More".
Better titles: "Product Specifications", "Size & Dimensions", "Technical Features".
At The Home Depot, most test participants actively engaged with the Sticky TOC, using it as a checklist to navigate key content and systematically assess whether a product met their needs during the evaluation process. Source: Baymard
With PageFly, you can easily build a Sticky Table of Contents (TOC) using the ‘Button’ elements and Sticky feature to enhance navigation on long product pages.
To begin, select the Button element and name each item based on the corresponding section title. You have complete creative freedom to design the TOC in your preferred style by adjusting colors, fonts, and backgrounds.
To ensure optimal visibility, enable full-width mode so the TOC spans the desired section effectively.
Once you’ve finalized the TOC design, enhance usability by linking each TOC item to its corresponding section. This way, when a customer clicks on a title, they are instantly directed to the relevant content without unnecessary scrolling.
Next, make the TOC sticky so it remains visible while users scroll, ensuring effortless navigation.
For those looking to add advanced customization, PageFly also allows for custom code integration to enhance the TOC’s functionality and styling. This option is ideal for users with coding experience who want more precise control over interactions and design elements.
By leveraging PageFly’s flexible design capabilities, you can create a highly functional and visually appealing Sticky TOC, improving navigation, boosting engagement, and enhancing the overall shopping experience for your customers.
A sticky TOC, while effective on desktops and tablets, presents significant challenges on mobile devices. The permanently visible TOC takes up too much valuable screen space, and TOC links often wrap to multiple lines on smaller screens, further reducing usable viewport area.
PageFly recommends implementing these mobile-optimized alternatives to enhance user experience and navigation efficiency:
The key is choosing the right approach based on your product's content volume while prioritizing efficient use of limited mobile screen space.
Implementing a Sticky TOC on long PDPs can significantly enhance user navigation, providing a structured and user-friendly experience. By understanding the nuances of placement, design, and responsiveness, you can optimize your PDPs to foster deeper engagement, ultimately leading to higher conversion rates.
In the fast-paced arena of digital commerce, small enhancements like these can create a competitive edge. With PageFly, merchants can effortlessly integrate a Sticky TOC, ensuring a seamless and conversion-optimized browsing experience for their customers.
Check out our powerful built-in CRO features to help you grow
Coming soon
Highlight your deals and engage shoppers to take actions.
Access all the tools you need to build your unique store!
Install PageFly nowFree plan forever. No risk.