Scroll to Top Button
What This Section Does
Add a small floating button that appears when customers scroll down your page, allowing them to quickly return to the top with one click. This improves the browsing experience on longer pages and helps customers navigate your site more easily.
Perfect for:
- Long product pages with detailed descriptions
- Collection pages with many products
- Blog posts and article pages
- Any page where customers need to scroll significantly
How to Add It
Step 1: Add the Section
- In your Shopify admin, go to Online Store → Themes
- Click Customize next to your live theme
- Click Add section and choose Scroll to Top Button
- The button will appear in the overlay sections area
Step 2: Configure Where It Appears
- Choose which types of pages should show the button
- Select the best position (corner) for your site layout
- Enable for desktop, mobile, or both based on your needs
Key Settings to Configure
Page Selection
Where to show the button: Enable it on pages where customers scroll the most
- Long content pages: Definitely enable on blog posts, product pages, and collection pages
- Homepage: Consider if your homepage is long enough to warrant it
- Checkout pages: Usually best to disable here to avoid distractions during purchase
- Pro tip: Enable on pages where customers frequently need to return to navigation or search
Button Position
Where it appears: Choose a location that doesn't interfere with other elements
- Bottom right: Most common and expected location for most websites
- Bottom left: Good alternative if you have other elements on the right
- Bottom center: Less common but can work for centered layouts
- Best practice: Avoid conflict with chat widgets, cookie banners, or cart drawers
Device Strategy
Desktop vs mobile: Consider different user behaviors on each device
- Desktop: Usually helpful since pages are longer and scrolling is more common
- Mobile: Very helpful since mobile screens show less content and require more scrolling
- Testing: Try both and see which provides better user experience for your customers
Pro Tips for Success
Best Practices
- Enable the button on your longest, most content-heavy pages
- Position it where it won't conflict with other floating elements
- Test the button on mobile to ensure it doesn't block important content
- Consider your page layouts - some pages don't need it if they're short
- Check that it works well with your theme's existing navigation elements
Common Mistakes
- Enabling it on very short pages where it's not needed
- Placing it where it blocks other important buttons or elements
- Forgetting to test how it looks and works on mobile devices
- Not considering how it interacts with chat widgets or other floating elements
- Enabling it on checkout pages where it might distract from completing purchase