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

I gave Richard a very vague brief about how we wanted the general feel for the Harley Wines website and said it'd have to please various parties and that this could lead to a lot of back and forth as we tried to please everyone.While it did lead to a lot of back and forth Richard was patient and helpful throughout, and I never waited long for any response or changes from his end while he had to often wait patiently while I got the green light from various members on my end.

However not once did anyone on my end ask for changes to the style or layout of the website and it's had nothing but praise since it's launch.

Considering we did not have a clear idea of what we needed Richard got the sense of the company and really captured the spirit in a wonderfully laid out and user friendly website. I cannot recommend him highly enough!

What's next?

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

Colour Rich custom website design

Web design trends in 2020

Wednesday, March 18, 2020

Web design trends in 2020Web design has changed an awful lot over the years. Most people would assume that web design is as changeable as fashion design - a constant flux of styles and trends which are hot one second and not the next. But, one of the biggest overarching movements within web design has been the growing dominance of focusing on user feedback to guide design decisions.  Read more

© Copyright Colour Rich. Privacy