[TomatoCart] Add a back to top link for your store

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:

Snip20150725_1Now, 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:

    if ($osC_Services->isStarted('google_analytics')) {

Add following code after it:

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

Find following code:

    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>

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!

Tags: , , , , | Posted under TomatoCart | RSS 2.0

Author Spotlight

Jack Yin

TomatoCart Developer & Co Founder - Arvixe Web Hosting / TomatoCart Community Liaison

2 Comments on [TomatoCart] Add a back to top link for your store

  1. Look says:

    Thank you! But not working on the glass_gray template. Button only works on index.php . Please help!

    • Jack Yin says:


      This plugin was implemented specifically for bootstrap template rather than glass gray template. Why you not use the bootstrap template for your store? The default glass gray template is out of date.

Leave a Reply

Your email address will not be published. Required fields are marked *