Case Study: What It Takes to Support a BigCommerce Store

Our client is an engineering company creating hardware and software for engineers, scientists, and researchers around the world. While they are experts in what they do, their technology being used in hundreds of universities throughout the globe, they needed help with the issues they were facing with their eCommerce store. As their developers focused on other priorities, unresolved issues accumulated in the backlog. They also had trouble finding the right service provider that matched their needs—until they found scandiweb.

The company’s eCommerce store is on the BigCommerce platform. We resolved performance issues on the frontend and backend by fixing the underlying causes. Here are the challenges the client faced and our approach to solving them.

Challenges and solutions

Outdated custom theme

The client was running on a customized version of the BigCommerce Cornerstone theme that had become outdated as frequent updates to the theme were pushed out. Compatibility issues started to be a problem. We updated the theme twice (from 5.3.3 to 6.4.1 and from 6.4.1 to 6.7.0) until the issues were resolved, considering all the customizations the client had made so that the theme wouldn’t break. We updated and adjusted all customizations as necessary.

Cluttered backend 

There were several unused third-party integrations and scripts in the backend that affected the site’s performance. We cleaned up all the unnecessary clutter to unburden the system of additional load that only caused it to lag.

We also created a CI/CD pipeline on AzureDevOps for the client that integrated BigCommerce’s Stencil Engine and used it for bundling, uploading, and applying the store theme when new updates were merged to the client’s repository (staging and production). Before this, the client had to manually bundle, re-upload, and apply the theme on the sandbox store (staging) for testing and then repeat the same steps for production.

Broken ERP integration

Following a completed online purchase, customers often found that the product they bought was out of stock. After investigating the problem, we discovered that the ERP integration was broken. Product inventory was not getting updated properly because the script that triggered the update only ran every 24 hours. The script would check for available products in the ERP and then update BigCommerce. We had to decrease the run interval of the update script to ensure that the products displayed on the storefront reflected the stocks.

Poor PageSpeed scores

PageSpeed Insights only showed scores of 15-20 for the mobile site, which suggested very poor user experience on the store. To rectify this, we did the following:

• Reduce unused scripts
• Reduce unused rules from CSS
• Adjust injected scripts and their timings
• Compress images
• Reduce layout shifts 
• Adjust loading priorities and custom scripts

Cart pop-up

When we assessed the client’s website, we found a general lack of visual hierarchy when it came to CTAs. As adding items to the cart is one of the key steps in the user journey, where an intent to buy is strong, we redesigned the “added to cart” pop-up and improved the visual hierarchy of the CTAs there. This redesign facilitated upsells for the client and nudged the users to go further along the sales funnel. We also implemented a clear main CTA to direct users toward the checkout process.

Before the cart pop-up was updated, the client had no way of showing shipping and tax fees prior to checkout. Calculating shipping fees for destinations outside the USA before starting the checkout process was impossible, which was not communicated to non-US users. With the redesigned cart pop-up, this information is now readily available to users.

As we overhauled the cart pop-up’s design, we also made it fully responsive to different desktop and mobile screens. To do this, we implemented custom templates and components according to the BigCommerce theme flow. Following best practices and standards for BigCommerce, we integrated our own custom scripts and styles, too. 

We used the handlebars templating engine utilized by BigCommerce for the template customizations as well as for customer validation in the free shipping promo. For injecting product data into the handlebars engine context, and also for retrieving and rendering a full custom template with the desired data for the upsell products, we used the BigCommerce utility library API.

For recommended products on the pop-up, we implemented a custom solution for the upsells based on the related products generated by BigCommerce. 

Results

The solutions we implemented helped increase the performance score of the client’s eCommerce store by 10 points and reduce LCP time by up to 8 seconds on the PDPs.

The increase in the PageSpeed score of the mobile site was between 150% and 233%.

As for the add-to-cart pop-up, drop-off rate decreased by 2.5% within the first month of implementation. With the cross-sells added to the pop-up, overall revenue also increased by 4.12% YOY.

Need development support with your BigCommerce store? Get in touch with an expert today by sending us a message. Or read more about our services and other ways we can help you.

Share on: