The Back to Top section allows users to quickly return to the top of the page with a single click, enhancing navigation and improving user experience—especially on long pages.
1. How to access the Back to top section?
Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click the Sections button > In the Sections tab, scroll through the list to the System Group section, click the Add section button > Select the Back to Top section.
2. How to customize the Back to top section?
2.1. Back to top
Back to top button helps you can move to the top of the page instantly with a click. Below are the available options for customization:
Enable hidden mobile: Toggle this option to hide the Back to Top button on mobile devices.
Design: Choose between two preset button styles — Design 1 and Design 2 — to match your store's aesthetics.
Progress bar options
Enable progress bar: Activate this to display a scroll progress bar that visually shows how far the user has scrolled down the page.
Progress bar color: Set the default background color of the scroll progress bar.
Progress bar active color: Choose the color that fills the progress bar as the user scrolls.
2.2. Custom CSS
Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.
Add custom styles to this section only.
To add custom styles to your entire online store, go to theme settings for detailed instructions.
