If your customer scroll product listing page in your store, it would be better to show a back to top button in the bottom of page as follow:

Now, let me teach you how to integrate it into your store.

Step 1. Download a package at https://www.dropbox.com/s/jvu5pxwmm79er5u/backtop.zip?dl=0

Step 2. Once you extract the package, you will see above file structure. Please just copy templates fold into your TomatoCart root directory.

Step 3. Find index.php under templates/bootstrap/index.php.

Step 4. Open index.php with your favorite editor to find following code:

<?php 
    if ($osC_Services->isStarted('google_analytics')) {
        echo SERVICES_GOOGLE_ANALYTICS_CODE;
    }
?>

Add following code after it:

<script src="templates/bootstrap/javascript/backtop.js"></script>

Find following code:

<?php 
    if ($osC_Services->isStarted('banner') && $osC_Banner->exists('468x60')) {
      echo '<p align="center">' . $osC_Banner->display() . '</p>';
    }
  }
?>

Add following code after it:

<div class="back-top align-vertical" data-toggle="backtop">
    <div class="text-center">
        <i class="icon-arrow-up icon-white icon-2x"></i>
    </div>
    <div>TOP</div>
</div>

How to custom the style?

There are following options for this plugin:

minScrollTop: 400, //minimum scroll top to show the button
fadeSpeed: 200, //the fade speed to show the button
right: 5, //the right position
bottom: 15,// the bottom position
color: '#FFFFFF', //font color
background: '#2c2c2c', //background
padding: '5px 10px' //padding

If you need to change  these options, you just need to add attribute for it.  For example:

<div class="back-top align-vertical" data-toggle="backtop" data-color="#2c2c2c" data-background="#000000">

That’s it. It’s not difficult to apply it for your store. Try it!