How to Add Back to Top Button in Shopify (Scroll To Top)

In today's highly competitive ecommerce industry, it can be challenging for online stores to effectively differentiate themselves in a saturated market and attract and retain customers. The abundance of purchasing options available to consumers means that businesses must put in substantial effort to capture potential customers' attention and persuade them to stay on their website long enough to make a purchase. To succeed in the ever-expanding world of ecommerce, relying solely on high-quality products is not sufficient.

Fortunately, there exist numerous effective ways for small brands to compete with the larger, more established brands online without needing significant marketing budgets. One of the most effective strategies involves creating a frictionless user experience (UX) design that enhances the online shopping experience on their websites.

In this article, we will dive in the fastest and easiest way to improve your customer on-page experience that is using the Back to top button.

What is the Back to top button?

The Back to Top (or scroll to top) button is a functionality included in many websites that allows users to easily navigate back to the top of a page without having to manually scroll through content. It is typically represented by a small button or arrow that appears at the bottom or corner of a web page as the user scrolls down. The feature provides a convenient and efficient way for users to quickly jump back to the top of the page, especially on pages with lengthy content or infinite scroll.

This can greatly enhance the user experience by reducing the need for excessive scrolling and improving page navigation.

How to add the Back to top button on Shopify store?

There are various methods for you to apply the back to top button for your Shopify store, including coding and none- coding ways.

We will show out in detail each method, along with their pros and cons.

Using EComposer Back to top extension

Once installing EComposer Landing Page Builder, you will own a huge range of functional elements and pre-built templates to build all necessary pages for your Shopify store like Homepage, Landing pages, Product page, etc. along with advanced blocks and sections.

Moreover, EComposer provides you with various extensions serving for diverse store-building purposes, including Back to top.

 

To apply this extension for your store, let’s follow the simples steps below:

Step 1: 

Add the EComposer Landing Page Builder app to your store.

Step 2: 

Install EComposer Back to top extension by

- Click on the Extension library icon on the top left corner.

- Click on the Extension Tab, then choose Add more.

Step 3:

Now you go to the setting and configure your ideal Back to top

EComposer gives options that help you work and set your ideal Back to top button, such as: 

• - Adjust button dimensions
• - Add button label
• - Apply progress indicator

One of the biggest advantages of EComposer Back to top extension is that supporting you in choosing the position on the page to place your button

You can want the video below to understand the whole configuring process:

From now on, you completely have your customized “Back to top button” for your page.

Using EComposer Back to top extension has several advantages:

- Flexibly customize your ideal back to top button with no code.
- No reduce page loading speed

Try this function right now by upgrading to EComposer Paid Plan.

Using Back to Top feature on Shopify theme

Nowadays, there are various Premium Shopify themes having the Back to top feature. 

Like you can see this function on The4’s Shopify themes, such as Kalles, Gecko, Elessi, etc.

You can see this feature in the image below.

Back to top tool on Kalles Shopify theme

We suggest you use Kalles Shopify theme which is one of the best selling Shopify themes on Themeforest. 

Here are the steps to apply the back to top button by Kalles theme:

Step 1: Install and activate Kalles here

Step 2: On Shopify admin, go to Online store -> Choose Theme, then select Customize Kalles theme.

Step 3: On Theme section, seek and enable Back to top function

There are several options giving to you:

- Enable hidden mobile: choose to hide/ unhide this feature on mobile.
- Design: pick up the premade style for your back to top button
- Custom CSS

Once activating this feature, you will see when your back to top button is placed like the image below.

There are some pros and cons of this method that you can consider on:

Pros:

- Easily configuring
- No app needed
- No reduce the page speed

Cons: Limited options to customize

Add Back to top button to Shopify store by coding

Absolutely, you can create a back to top button on your Shopify page with code by following the steps below:

Step 1: From your Shopify admin, go to Online Store > Themes.

Step 2: Find the theme you want to edit, and then click Actions > Edit code.

Step 3: In the Snippets directory, click Add a new snippet.

Step 4: Name your snippet as back-to-the-top, then click Create snippet. Your snippet file opens in the code editor.

Then paste the following code into your newly created back-to-the-top file:

    {% comment %}

Reduce below value if you need the back to the top button to appear higher up on the page.

That value is in pixels.

    {% endcomment %}

    {% assign vertical_offset_for_trigger = 300 %}

    {% comment %}

Vertical offset from bottom of browser for the position of the button.

    {% endcomment %}

    {% assign position_from_bottom = '6em' %}

    <a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">

    <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>

    </a>

    {{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}

    <style>

    .back-to-top {

    position: fixed;

    bottom: {{ position_from_bottom }};

    right: 0px;

    text-decoration: none;

    color: #999;

    background-color: #eee;

    font-size: 16px;

    padding: 0.3em;

    -webkit-border-top-left-radius: 3px;

    -webkit-border-bottom-left-radius: 3px;

    -moz-border-radius-topleft: 3px;

    -moz-border-radius-bottomleft: 3px;

    border-top-left-radius: 3px;

    border-bottom-left-radius: 3px;

    z-index: 60000;

    }

    .back-to-top i {

    vertical-align: middle;

    }

    .back-to-top span {

    padding-left: 0.5em;

    }

    .back-to-top i + span {

    padding-left: 0;

    }

    .back-to-top:hover {

    text-decoration: none;

    color: #555;

    }

    .hide {

    display: none!important;

    }

    </style>

    <script>

    (function() {

    function trackScroll() {

        var scrolled = window.pageYOffset;

        var coords = {{ vertical_offset_for_trigger }};

        if (scrolled > coords) {

        goTopBtn.classList.remove('hide');

        }

        if (scrolled < coords) {

        goTopBtn.classList.add('hide');

        }

    }

    function backToTop() {

        if (window.pageYOffset > 0) {

        window.scrollBy(0, -80);

        setTimeout(backToTop, 0);

        }

    }

    var goTopBtn = document.querySelector('.back-to-top');

    window.addEventListener('scroll', trackScroll);

    goTopBtn.addEventListener('click', backToTop);

    })();

    </script>

Then click Save.

Include your snippet

In the Layouts folder, open the theme.liquid file.

Scroll to the bottom of the file. Right above the closing </body> tag, paste this code:

{% render 'back-to-the-top' %}

Click Save.

This method requires you to understand coding to create a back to top button as you want.

Using Shopify back to top apps

When going to the Shopify App Store and searching for the "Back to top" keyword, you will see lots of options to add the back to top button on your Shopify store. Those can be free of charge and easy to customize with no code.

But adding many third-party applications can affect the page loading speed significantly.

Conclusion

Adding a back to top button on Shopify pages is a simple but effective way to improve user experience and navigation. 

Let’s choose the best method for your store that makes you create a back to top button with ease. 

Also, if you have any questions, don't be afraid to contact us. We are delighted to hear from you at any time.

If you need assistance, don't forget to contact us via live chat within the EComposer app.