Loading Similar URL's on BigCommerce's 404 Error Page

Created Sunday, 08 May 2016 00:00 Last Modified Sunday, 08 May 2016 18:31

Recently I helped migrate a Joomla/Virtuemart store, AmericanExpedition.us, to BigCommerce, an advanced e-commerce solution. While there's a lot about BigCommerce to like on the backend, some things were extremely frustrating, like the 404 error page, which by default has minimal content: http://classic-next-demo.mybigcommerce.com/alligator-stuff.

If a customer sees this page, they're likely to bounce because there's not much here to help them and no suggestions of what to browse on the site instead. Contrast this to the solution I implemented here: https://americanexpedition.us/alligator-stuff or here: http://classicmagnets.com/arizona-magnet - the customer is much more likely to continue on to another page that interests them, even though the page they navigated to isn't on the site.

Keep reading to find out how I came up with this solution, or if you need help customizing your BigCommerce store, feel free to reach out to me at This email address is being protected from spambots. You need JavaScript enabled to view it.

How to suggest similar URL's on BigCommerce's 404 Error Page

Basically, I used BigCommerce's search feature to search for the string of the visitor's request (in the above example, 'alligator stuff') and load the result on the 404 page below the error bullet points.

<!--you'll want to find the code below on your 404.html file in your template, as of May 8, 2016 this should be located under store settings > design > edit html/css > 404.html -->
<!-- Now comes the stuff you'll need to insert. You'll want to include some empty placeholders for the content we're going to load. I want to load the category results and product results from the search page, so I'll make it easy on myself and use the classes that page uses so I don't have to write a bunch of new css. -->                
<p class="results-text"></p>
<ul class="category-results"></ul>
<ul class="ProductList List clear"></ul>
<!-- Now you'll need some javascript -->
    $(document).ready(function() {
        /* Get the url of the page the visitor is currently on, then take out the store's url so we can use it as a search string. Note you may or may not have to change http to https */
        locate = window.location.href;
        locate = locate.replace("http://yourstore.com/","");
        var link = "http://yourstore.com//search.php?search_query=" + locate;
        /* Now we'll run a search on BigCommerce with an ajax request. */
        jQuery.get(link, function( data ) {
            /* Success! We'll populate the results. */
<strong><em>Based on the url you were trying to visit, here are some suggested pages on our site:</em></strong>");
            var categories = jQuery(data).find('#SearchResultsCategory ul').html();
            var items = jQuery(data).find('.ProductList').html();

This was error handling functionality that we had on our previous Joomla/Virtuemart store, and I didn't want to miss it. It's "Defensive Web Design" - basically you build a better 404 page by recommending products that are related to the pages the visitor was trying to access. I really feel a lot of BigCommerce stores could reduce the bounce rates on their 404 pages if they implemented similar url suggestions of the 404 page. I was very happy that I was able to make a solution for my client that didn't require an app with a monthly subscription.

Again, if you need help customizing your BigCommerce store or need an e-commerce consultation, please reach out to me at This email address is being protected from spambots. You need JavaScript enabled to view it.. Or if you plan to implement this code on your BigCommerce store to reduce the bounce rate on your 404 page and suggest similar url's and products to your customer, feel free to buy me lunch using the donate button below. I mean, seriously, this is one nice customization that you don't have to install an app and pay $9.99 a month for, so you can at least get me a plate of hot wings!

Web Analytics