[TomatoCart]Several useful tips for bootstrap template

From now on, I will focus on improving the user experience of TomatoCart store for mobile device. Obviously, the PC will be given up by most of users. They will use mobile device to buy products online. In this article, I will show you several tips to improve bootstrap template in mobile.

Tip 1. Disable zooming capabilities on mobile devices.

If you access your store in mobile, you will notice that it is possible to scale the page or move it.


As you can see, this problem is annoying. We can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming so that your users are only able to scroll the page. It will make your site work like a native application.

Steps to apply this enhancement for your store

Step 1. Find templates > bootstrap > index.php and search following line:


Replace it with:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Tip 2. Show special price normally

In mobile device, there is a small issue that the special price is shown out of container. See following image.


Steps to show it normally

Step 1. Find templates > bootstrap > all.min.css to add following code at the bottom:

 @media (max-width: 767px) {
 	ul.grid li div.right span.price {
	  display: inline-block;	

Snip20150323_6Step 2. Find templates > bootstrap > stylesheet.responsive.css to search following code:

Snip20150323_12Replace it with:

  ul.grid li div.right span.price {
        display: inline-block;
        float: none;

After that, it will show as follow:


Tip 2. Add proper margin for add to cart button in product info page

Snip20150323_1Step 1. Find templates > bootstrap > all.min.css to add following code:

@media (max-width: 767px) {
	.ajaxAddToCart {

Step 2. Find templates > bootstrap > stylesheet.responsive.css to add above code too.


Final Word

In next month, i will begin to upgrade bootstrap 2 to bootstrap 3. After that, i will work on replacing the mootools and jquery with zepto in the store front. In this way, TomatoCart store will works more faster in mobile device.

If you need to contact me, you could try following methods:

Email: support@tomatocart.com

Skype: tocjack

Looking for quality TomatoCart hosting? Check out Arvixe Web Hosting.

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

Author Spotlight

Jack Yin

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

5 Comments on [TomatoCart]Several useful tips for bootstrap template

  1. jan says:

    what happened for new version of tomatocart?

    • Jack Yin says:


      Sorry for it. It’s really difficult for me now to complete the task as i expected before. I am working for company during days. As you know, it should be very very busy. So, i have limited time to work on TomatoCart. Anywhere, i will continue to do contribution for TomatoCart gradually including following two points:

      1. A new template works well both in mobile and tablet and pc.

      2. Clear the mootools. Just jquery or zepto will be used in new template.

      3. Make migration & export & import easily or automatically.

      4. Make system more faster and stable.

  2. lawfash says:

    Hi Jack, I have a problem. I am new to website development. I just designed a site using Tomatocart (glass-gray template). I did not know that the bootstrap template was for mobile devices responsiveness. Is it possible for me to somehow redirect users on mobile devices to the bootstrap template while those on desktop and laptop still access the glass gray template?

    • Jack Yin says:

      HI lawfash,

      It is possible to achieve it. You just need to detect the user client in the system. If the client is a mobile device, you have to change the template via the set method in the includes > classes > template.php. Just pass the template code into the method.

      But, i recommend you not to do suck kind of thing. It would be better to implement a responsive template both for mobile, tablet and desktop.

  3. Martin lyon says:

    Hi Jack,
    I have been looking through all the php files to find away to change or remove the text at the end of the checkout procedure where it tells the customer that the products will be with them in 2 days.

    Also is there an easy way to add a image box to the left area.
    Sorry I’m new at this an still learning
    Thank you in advance

Leave a Reply

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