Adobe Business Catalyst responsive shopping cart

Monday, July 13, 2015 by Richard Howe

Gaining website visitor trustAdobe 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.

Skip to the code

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.

Static Business Catalyst cartApplying 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.

Responsive Business Catalyst cartSo 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 <head>, or add the following to your template:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

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.

Your comments

Post has no comments.

Post a Comment


Captcha Image

Request a callback

Filter by category

Post archive

At our request, Colour Rich devised a website from scratch for Bagatelle Toys, a retail toy shop in Henley-on-Thames.

The website was attractive and we received positive feedback from it both in regard to its ease of use and design. They also assisted in uploading our products on to the website, as well as monitoring efficiently the amount and success of the traffic into the website.

What's next?

Get in touch with us today on 01993 883767 and let's kick-start your project.

Colour Rich custom website design

11 reasons why email marketing matters

Wednesday, February 14, 2018

11 reasons why email marketing mattersIf you think that e-mail marketing has become a dated marketing tool, you’re not alone. But whilst technology and web marketing in general may have evolved enormously, some of the old standards are just as relevant.  Read more

© Copyright Colour Rich. Privacy