The Back to top section adds a round arrow button in a bottom corner of the screen. When shoppers tap it, the page goes back to the top. It helps on long pages, like a product page with many photos and reviews.
Add it
- Open the builder and go to the page you want.
- In the Sections tab, click Add new section and pick Back to top in the Layout group.
- Set its corner, size, and colors, then click Publish.
You can add one per page, on any page. Its place in the Sections list does not matter, because the button always floats in the corner.
When it shows
The button is hidden at the top of the page. It appears once the shopper has scrolled down about one screen, and hides again when they are back near the top. In the builder, it shows while the section is selected, so you can style it without scrolling.
Shoppers who turned on reduced motion on their device jump to the top at once instead of gliding.
Settings
Layout
- Position: Start or End corner at the bottom of the screen. These follow your store language: in a left-to-right language like English, Start is the left corner and End is the right corner. In a right-to-left language like Arabic, they swap. The default is End.
- Size: the button size, from 44 to 80 pixels (default 48). Even the smallest size stays easy to tap on a phone.
Appearance
- Scroll progress: shows a ring around the arrow that fills as the shopper scrolls down the page. It is on by default. Turn it off for a plain button.
- Color scheme: the button uses the primary button colors of the scheme you pick (background, arrow, and hover colors). To change them, edit that scheme in Color schemes.
Show it on every page
Each page has its own sections, so add the button once and use Apply to all pages. That only updates pages that already have a Back to top section, so add it to the other pages first. See Sections and blocks.
Good to know
- The button does not appear: the page may be too short to scroll one full screen. Try a longer page.
- It sits higher than expected: on pages with a sticky buy bar at the bottom, the button moves up so they do not cover each other.
- Other floating items: a fixed newsletter button uses the bottom left corner. If you use both, put Back to top on the other side so they do not overlap.
- Hard to see: pick a color scheme whose primary button color stands out from your page background.
- Hide it for a while: use the eye icon on the section. Its settings are kept. Hiding or deleting it only changes the page you are on.