Back to Top

Key Features: Simple, Smart Back to Top Navigation

Give shoppers an easy way to return to the top with a floating button, scroll progress indicator, custom icon, responsive positioning, and flexible styling.

Get App

Scroll Progress Indicator

Show shoppers their scroll position with a progress ring around the button.

Automatic Button Visibility

The button appears after shoppers scroll more than 100px down the page.

Smooth Scroll to Top

Clicking the button smoothly takes shoppers back to the top of the page.

Custom Button Icon

Upload your own icon or use the built-in upward arrow icon.

Responsive Mobile Size

The button uses a compact 44px layout on mobile for a clean experience.

Flexible Positioning

Control the button's bottom and right spacing separately for desktop and mobile.

Custom Colors

Adjust the background, progress, border, and default icon colors.

Rounded Button Design

Set the border radius from square to fully circular to match your store style.

Back to Top Settings & Options

Customize the icon, size, position, colors, border radius, and responsive placement of your Back to Top button.

Section Settings

Applies to the whole section

Upload a custom icon for the Back to Top button.

Icon

Adjust the desktop icon size from 10px to 50px.

Icon Size

Set the button corner shape from 0% to 50%.

Border Radius

Control the button's distance from the bottom on the desktop.

Desktop Bottom

Control the button's distance from the right on the desktop.

Desktop Right

Set the bottom spacing for the mobile button.

Mobile Bottom

Set the right spacing for the mobile button.

Mobile Right

Choose the button's background color.

Background Color

Set the color used for the scroll progress ring.

Progress Color

Customize the button border color.

Border Color

Set the color of the default arrow icon.

Default Icon Color

Add Section

Where This Section Can Be Used

Use Back to Top on pages where shoppers may scroll through long content and need a quick way to return to the top.

Home Page
Collection Page
Product Page
Landing Page

Home Page

Make Long Homepages Easier to Navigate

Add a floating button to help shoppers quickly return to the top after browsing banners, collections, products, or other homepage content.

Make long pages easier to browse

Provide quick top navigation

Show scroll progress

Reduce unnecessary scrolling

Collection Page

Help Shoppers Navigate Long Collections

Use the button on collection pages with many products so shoppers can quickly return to the top after exploring the product grid.

Improve long-page navigation

Make product browsing more convenient

Provide quick access to the top

Keep scrolling interactions simple

Product Page

Simplify Navigation on Detailed Product Pages

Add Back to Top to product pages with detailed descriptions, reviews, information, or other long-form content.

Support long product pages

Make returning to the top easier

Add convenient floating navigation

Keep the shopping experience smooth

Landing Page

Keep Long Landing Pages Easy to Explore

Use the floating button on long landing pages to give visitors a simple way to return to the top after moving through multiple content sections.

Improve long-page usability

Add quick navigation

Show scroll progress visually

Keep visitors moving through content

Make Long-Page Navigation More Convenient

Give shoppers a clear, floating way to return to the top without having to scroll through the entire page.

Add Useful Progress With Simple Controls

The button combines smooth top navigation with a visual scroll progress ring and flexible styling for your Shopify theme.

Appears automatically after scrolling

Shows current scroll progress

Smoothly returns shoppers to the top

Supports custom button icons

Offers separate desktop and mobile positioning

Works with responsive button sizing

Lets you match your store's colors

Fits different designs with adjustable border radius

Do this, skip that.

DO

Use an icon that clearly represents moving upward.
Place the button where it stays easy to notice.
Choose a progress color that contrasts with the background.
Keep the button size comfortable for mobile shoppers.
Match the button colors with your store design.

DON'T

Use an icon that could confuse shoppers.
Place the button too close to the screen edge.
Choose progress and background colors with low contrast.
Make the desktop icon unnecessarily large.
Use styling that clashes with your store's visual design.

Frequently Asked Questions

Can I upload my own Back to Top icon?

Yes. You can upload a custom image through the Icon setting. If no custom icon is added, the section uses its built-in upward arrow.

When does the Back to Top button appear?

The button becomes visible after the shopper scrolls more than 100px down the page.

Does the button show scroll progress?

Yes. A circular progress indicator fills around the button as the shopper scrolls.

Does clicking the button scroll smoothly?

Yes. Clicking the button smoothly scrolls the page back to the top.

Can I change the icon size?

Yes. The desktop Icon Size setting lets you choose a size from 10px to 50px.

Can I position the button differently on mobile?

Yes. You can separately control the bottom and right spacing for mobile.

Can I change the button colors?

Yes. You can customize the background, progress, border, and default icon colors.

Can I make the button circular?

Yes. The Border Radius setting supports values from 0% to 50%, allowing you to create different button shapes, including a circular design.

Is the Back to Top section responsive?

Yes. The section has separate mobile positioning and uses a 44px button area with a 24px arrow.

Help Center

We're Here to Help: We believe in providing exceptional customer support!

For Support or any Questions Email Us: [email protected]

Ready When You Are: Help Shoppers Return Up Quickly

Install SectionHub and add the Back to Top section to your theme in minutes - no coding required.