Setting up a Scroll to Top Button

Modified on Mon, 22 May 2023 at 03:26 PM

A Scroll to Top Button is a sticky button on the store page that allows users to navigate the site easier. Customers can quickly scroll to the top of any given webpage with one button click. The button scrolls quickly through the webpage and has a smooth animation.


On this page


Configuring button appearance


You can easily configure the Scroll to Top Button display and to make your button look good and fit your theme by following these steps:

  1. From your Shopify admin, go to the BolideAI admin.
  2. Open the Scroll to Top Button app.

Here, you can customize the button design template and choose its display position on the Shopify store page.


Tip: After you’ve made changes to the settings, a pop-up notification will appear at the top of the page reminding you to save them: “Unsaved changes”. You can then Save or Discard them.


Design template


A Scroll to Top Button can be an arrow of any type or shape. You can select from the following ready-made templates:

  • Default icons: Select a standard icon that best fits your store theme.
  • Themed icons: Select an icon for special event offers, for example, Black Friday, Halloween, or Christmas sales.

If you want to use your own image as the button icon, you can upload it by adding a file to a Custom icon.


Note: A Custom icon should be in PNG or SVG format. Max resolution is 500 × 500 pixels.



Appearance


Here, you can change the Icon color of the default button icon. You can select it on the palette or enter the color hex code.


Note: You cannot change the background color for Themed icons.


If you want to make the page scroll smoothly, then check Enable smooth animation.


Display position


You can also select a button position on the page to improve your customer user experience. There are the following position options:

  • Top right
  • Top left
  • Bottom right
  • Bottom left



Managing button visibility


You can activate the Scroll to Top Button by switching the toggle at the upper right.

After you hit Activate app, the app redirects you to the theme editor's App embeds tab. To activate the app, switch the toggle on and save the changes.



To deactivate the app, follow the steps above and switch the embed app off.


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article