Nowadays everyone prefers the responsive website which can be easily used in small devices like tablets, and mobiles. Online shopping websites are no exceptions.
And 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.
Let’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.
In your mobile specific css or the media query targeting the small screens, just paste the below code.
1 2 3 4 | .QuickViewBtn{display:none ;} |
Go 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.
Write below css code to your mobile specific css or the media query targeting the small screens.
1 2 3 4 | .prevbtn{display:none ;} |
Now 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.
First off all download the common.js by downloading the template from admin panel.
Follow below instruction to write code into the common.js.
Find 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.
1 2 3 4 5 6 7 | if( /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ){if( isMobile.any() ){config.FastCart=0;}} |
Attach 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.
And check in mobile device that addtocart popup will not come on click of the addtocart button.
With the above solution all three popup is hide in mobile devices which is good not to have such things in a small screen.
We’re certified BigCommerce design services and can help you with anything you need. Contact us here.
BigCommerce is not just another excellent solution for eCommerce wholesale in the B2B space. As…
Success in the fast transforming world of e-commerce depends on staying ahead of the curve.…
In eCommerce, the concept of "headless commerce" is gaining traction. But don't disregard it because…
Welcome to "Designing a React E-Commerce App for Digital Products," the first instalment of our…
The two main options available to eCommerce organisations today for their technology architecture are headless…
Node.js has revolutionized digital innovation since its 2009 founding. Node.js popularity has soared as more…