Skip to content
Devoptly
Shopify back to top button app

Liftly: Back to Top & Progress for Shopify

A back-to-top button with a scroll progress ring

Add a floating button that takes shoppers back to the top of long pages, with a ring that fills as they scroll, and an optional thin progress bar. Set it up once, and turn it on with one switch in your theme editor.

Book a demo
  • One plan, every feature included
  • Turn on with one theme switch
  • Support from the developers who build it
  • Back to top button
  • Scroll progress bar
  • Progress ring
  • Scroll to top
  • Floating button
  • Add to cart mode
  • Custom icons
  • Desktop and mobile

Overview

What is a back-to-top button?

A back-to-top button is a floating button that appears once someone has scrolled down a long page and returns them to the top in one click.

Liftly adds that button to your Shopify store, plus a progress ring around it and an optional thin bar that shows how far down the page the shopper is. You choose the shape, size, icon, colors and label, and where the button sits on desktop and on mobile.

On product pages the button can scroll to your Add to cart button instead. You pick the pages for the button and the bar, and when the button appears, and turn it all on with one switch in the theme editor.

  1. Look like your store

    Shape, size, icon, label and colors, from 8 designs or your own.

  2. Show scroll progress

    A ring on the button and a bar at the top or bottom, driven by the real scroll position.

  3. One switch to turn on

    No code. Turn on the app embed in the theme editor and choose the pages in the app.

Features

What you can set on the button and the bar

  • Back-to-top button

    Choose a circle, rounded, square or pill shape, in small, medium or large (40, 48 or 56 px), with no shadow, a soft one or a strong one.

  • Progress ring

    Draw a ring around the button that fills as the shopper scrolls. Set its color, the unfilled track and its width from 2 to 5 px.

  • Scroll progress bar

    Show a bar along the top or bottom of the page, 2 to 12 px tall, in one color or a two-color gradient. Round the end, set the track color, or add a percent label.

  • 8 button designs, 4 bar designs

    Start from Classic, Soft light, Outline, Progress ring, Pill, Bold square, Minimal or Night ring for the button, and Thin line, Sunset, Ocean or Bold bar for the bar. Then change anything.

  • 20 icons, or your own

    Pick from 20 icons, or upload an SVG or PNG up to 8 KB. Add a label of up to 20 characters next to the icon.

  • Add to cart mode

    On product pages the button can scroll to your Add to cart button instead of the top, with its own label. It only scrolls, and never adds anything to the cart.

  • When it appears

    Show it always, after a share of the page (5% to 90%), or after a number of pixels (100 to 5,000). Show it only while scrolling up, and hide it when the footer is on screen.

  • Pages and devices

    Choose the home page, products, collections, blog, blog posts, pages, cart, search or everything else, and set side and distance from the edge separately for desktop and mobile.

  • Motion and a go-to-bottom button

    Pick a fade, slide or scale entrance and a lift or grow on hover, or none. Add a second, smaller button that scrolls to the bottom. Scrolling is instant for shoppers who ask for reduced motion.

How it works

How to add a back-to-top button to Shopify

Three steps, with a live preview in the app as you go.

  1. Step 1 of 3

    Design the button and the bar

    Start from a ready-made design on the Button and Progress pages.

    1. Choose a shape, size, icon and colors, with an optional label.
    2. Turn on the progress ring, and set its color and width.
    3. Turn on the scroll progress bar, and choose top or bottom, height and colors.
  2. Step 2 of 3

    Choose when and where

    Set the pages, the trigger and the spot on each device.

    1. Pick the page types for the button and for the bar.
    2. Show the button always, after a share of the page, or after a number of pixels.
    3. Set side, edge distance and visibility separately for desktop and mobile.
  3. Step 3 of 3

    Turn it on in your theme

    One switch in the theme editor makes it live.

    1. Open the app embed from the setup guide, or find Liftly back to top under App embeds.
    2. Switch it on and save the theme.
    3. Visit a long page and scroll to check the button and the bar.

Who it’s for

Where a back-to-top button helps

  • Long product and landing pages

    Give shoppers a way back to the menu and the buy button.

  • Blogs and guides

    Show how far a reader is through a post, and let them jump back up.

  • Mobile shoppers

    Set a separate spot on mobile so the button stays out of the way of thumbs and chat widgets.

  • Big collection pages

    Return to the filters and sorting after scrolling a long grid.

Pricing

One plan, nothing held back

Liftly has a single Pro plan at $1.99 every 30 days, with the button, the bar and every design option.

Billed in USD every 30 days. There is no free plan and no free trial, and the button and bar only show on your store while the plan is active.

Pro

One plan, every feature.

Every feature

$1.99/month

  • Back-to-top button, 8 designs
  • Scroll progress bar
  • 20 icons or your own, with a ring
  • Product page Add to cart mode
  • Page targeting, desktop and mobile
Book a demo

FAQ

Back-to-top button questions

What merchants ask before adding a back-to-top button and scroll progress bar to Shopify.

A back-to-top button is a small button that stays in the corner of the screen once a shopper has scrolled down, and takes them back to the top of the page when clicked. Liftly adds one to your Shopify store.

Install Liftly, choose a design in the Button page, and turn on the Liftly back to top app embed in the theme editor. There is no code to paste. Save the theme and the button appears on the pages you chose.

Yes. The Progress page adds a thin bar along the top or bottom of the page that fills as the shopper scrolls. Choose its height, a solid color or a two-color gradient, and whether to show a percent label.

A ring drawn around the back-to-top button that fills as the shopper scrolls down the page. You can turn it on or off, and set its color, track color and width.

Yes. Turn on Add to cart mode and on product pages the button scrolls to your Add to cart button instead of the top. It only scrolls to the form, and if the form is not found it goes to the top. Nothing is added to the cart.

Yes. Desktop and mobile each have their own side (left or right), distance from the side (0 to 200 px) and distance from the bottom (0 to 300 px), and you can hide the button on either one. Mobile means a screen up to 749 px wide.

You choose: always, after a share of the page has scrolled, or after a number of pixels. You can also show it only while the shopper scrolls up and hide it near the footer. It does not show on a page too short to scroll, or while a menu or cart drawer is open and locks scrolling.

Yes. Upload an SVG or PNG up to 8 KB, or pick one of 20 built-in icons. You can also add a label of up to 20 characters beside the icon.

It is a real button with a name for screen readers, and the progress bar has a progress role. After a keyboard click, focus moves to the top of the page. The names are translated into 20 languages besides English, and smooth scrolling is switched off for shoppers who prefer reduced motion.

Home, product, collection, blog, blog post, page, cart, search and everything else, chosen separately for the button and for the progress bar.

One plan, Pro, at $1.99 every 30 days with every feature included. There is no free plan or free trial, and the button and bar do not show without an active plan.
Still have a question? Ask us

Key terms

Scroll terms, explained

The words you will meet when you set up a back-to-top button and progress bar.

Back-to-top button
A floating button that returns the shopper to the top of the page when clicked.
Scroll progress bar
A thin bar along the top or bottom of the page that fills as the shopper scrolls down.
Progress ring
A ring around the back-to-top button that fills with the scroll position.
Scroll trigger
The rule for when the button appears: always, after a share of the page, or after a number of pixels.
Add to cart mode
A product page setting where the button scrolls to the Add to cart button instead of the top.
App embed
An app feature switched on for the whole theme. Liftly uses one, so there is no block to place.
Reduced motion
A device setting for people who prefer less movement. Liftly then scrolls instantly instead of smoothly.
Track
The unfilled part of a progress ring or bar, shown behind the filled part.

More apps

More apps from Devoptly

Ready to add Liftly: Back to Top & Progress to your store?

Talk to the team that builds it and we will set it up with you.

Talk to us