{"product_id":"how-to-disable-popups-for-touch-device-in-bigcommerce","title":"How to disable popups for touch device in BigCommerce","description":"Nowadays everyone prefers the responsive website which can be easily used in small devices like tablets, and mobiles. Online shopping websites are no exceptions.\n\n\u003cimg class=\"alignnone size-full wp-image-560\" src=\"http:\/\/localhost\/dit\/wp-content\/uploads\/2016\/06\/popup.jpg\" alt=\"bigcommerce-pricing\" width=\"779\" height=\"657\"\u003e\n\nAnd being a BigCommerce design and development services you’re responsible to improve shoppers experience while they are using responsive online shopping website. One of the most painful things are the modal popups in smaller devices. For example, quickview popup, add to Cart popup and Gift certificate popup in BigCommerce. These popups should be disabled in small devices to improve the shopper’s experience while they are shopping.\nLet’s talk about how to hide each popup in BigCommerce. First of all download the theme backup, just to be safe. To do this go to your admin panel, go to design and click on download theme.\n\u003ch3\u003eHiding quick view popup\u003c\/h3\u003e\nIn your mobile specific css or the media query targeting the small screens, just paste the below code.\n\n[css]\n.QuickViewBtn\n{\ndisplay:none !important;\n}\n[\/css]\n\n\u003ch3\u003eHiding Gift certificate popup\u003c\/h3\u003e\nGo to admin area of your bigcommerce, then click on the design which is on the right top of the admin area. There you will find the Edit HTML\/CSS, click on it and look for “PurchaseGiftCertificate.html” In that panel, find the code shown in below screen shot and add a unique class (for example “prevbtn”) to the preview button.\n\n\u003cimg class=\"size-full wp-image-664 alignnone\" src=\"http:\/\/localhost\/dit\/wp-content\/uploads\/2016\/06\/Screenshot-at-Aug-26-15-26-56.jpg\" alt=\"\"\u003e\n\nWrite below css code to your mobile specific css or the media query targeting the small screens.\n\n[css]\n.prevbtn\n{\ndisplay:none !important;\n}\n[\/css]\n\n\u003ch3\u003eHiding AddToCart popup\u003c\/h3\u003e\nNow about the Add to cart popup. Obviousely we can not disable the button Add to cart which will prevent buyer from buying anything and it will be a huge loss in selling. What you need to do is, when they click on the Add to Cart button, instead of opening popup, it should redirect to the cart page.\n\nFirst off all download the common.js by downloading the template from admin panel.\n\nFollow below instruction to write code into the common.js.\n\nFind for the code config.FastCart=0; and wrap it with mobile specific condition like shown below in common.js. Save it and upload using webdev to js folder to your BigCommerce template.\n\n[php]\nif( \/Android|webOS|iPhone|iPod|BlackBerry\/i.test(navigator.userAgent) )\n{\nif( isMobile.any() )\n{\nconfig.FastCart=0;\n}\n}\n[\/php]\n\nAttach the common.js file in HTMLhead panel in the same position from where the master file is coming, no need to call both master and the webdev common.js just call webdev file.\n\nAnd check in mobile device that addtocart popup will not come on click of the addtocart button.\n\nWith the above solution all three popup is hide in mobile devices which is good not to have such things in a small screen.\n\u003ch3\u003eNeed Help?\u003c\/h3\u003e\nWe’re certified \u003ca href=\"http:\/\/localhost\/dit\/services\/bigcommerce-design-development\"\u003eBigCommerce design services\u003c\/a\u003e and can help you with anything you need. \u003ca href=\"http:\/\/localhost\/dit\/contact\"\u003eContact us\u003c\/a\u003e here.","brand":"DitDemo","offers":[{"title":"Default Title","offer_id":31632222290010,"sku":"","price":0.0,"currency_code":"USD","in_stock":true}],"url":"https:\/\/sportswear-8.myshopify.com\/products\/how-to-disable-popups-for-touch-device-in-bigcommerce","provider":"sportswear","version":"1.0","type":"link"}