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!
Thank you! But not working on the glass_gray template. Button only works on index.php . Please help!
Hi,
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.