Adobe Business Catalyst is an excellent eCommerce Content Management System, but the static shopping cart is a drawback. We’ve addressed this and you can download our code to turn a default static layout into a fully responsive cart.
The problem
At Colour Rich, we use Business Catalyst for the majority of websites that we create which require non-bespoke features. The robust eCommerce module is something we particularly like about the BC system, which can be customised to seamlessly fit a site’s branding without too much additional development.
Applying a customised template to the Business Catalyst “Online Shop Layouts” is particularly easy. And with the growing number of mobile and tablet users buying online, you probably have developed your site with a responsive design too.
However, even with the most perfectly designed and extensively tested responsive templates, your Business Catalyst eCommerce website will not be perfect for mobile users.
The issue is that the current version of Business Catalyst uses a tabular layout with fixed width cells for the “Shopping Cart” Module template.
This looks fine on a static site or desktop computer. But as soon as the user’s device size scales down, the cart overflows off the page. (See left.)
This ruins the shopping experience and causes visitors to click away, increasing the cart abandonment rate.
The solution
We’ve seen so many Business Catalyst eCommerce web sites with responsive catalogs and product pages that are followed by a static checkout, that we thought it was time to address this.
So we’ve created a set of files for you to download from the button on the left and apply to your website which will transform your BC cart into a responsive format.
There are 3 steps to changing the standard Business Catalyst table based cart into a fluid layout:
1. Edit the module template
Go to Site manager > Module templates > Online Shop Layouts > Shopping Cart.
Switch the editing window to HTML view, and remove all of the default code. Replace it with the code within cart.html, which uses the same fields as the default, but with a div-based structure.
2. Upload the CSS
Extract cart.css and upload this into the “stylesheets” folder of your site. Don’t forget to reference this file within the template used by your cart module. This will apply the necessary structure to the new div layout for desktop and mobile devices.
You can add further styling to the labels, fields and buttons where required to bring the cart inline with the rest of your site branding.
3. Upload the JS
With just the div layout and CSS file in place, things are starting to look great already. But when 2 or more items are added to the cart, Business Catalyst groups value types rather than displaying all values associated with a product together.
To stop all product titles, quantity boxes, and Remove links displaying next to one another, extract cart.js from the zip folder, upload it to your server and reference this within your cart’s template. This will re-group elements for each product together when a device screen is at 769px or less.
Lastly ensure you have a jQuery library reference within your template , or add the following to your template:
Conclusion
That’s all there is to it. By implementing these few steps, you can transform the standard Adobe Business Catalyst shopping cart into a seamless shopping experience for mobile and tablet users, which could lower your cart abandonment rate and increased sales.
Have you found the code useful for your Business Catalyst eCommerce developments? We would love to hear your feedback in the comments below.
Get in touch if your Business Catalyst cart requires a responsive layout with further customisation.