This online shop needed to be slick, modern and mobile ready, inviting customers to explore its stunning array of Australian Arts and Crafts, regardless of their browsing device.
We absolutely love the design and layout of our new online shop- it’s beautiful and we get so many comments on the way it looks and how easy it is to navigate through.
A design that put the products in the spotlight
We were fortunate with this project in that Coco's products are simply stunning - we knew very early on that we needed to create a design that was fairly conservative, one that used the beautiful photos to their fullest.
We first wire framed the site, to help discuss usability, product layouts and how we'd use a banner on the homepage:
A 'wireframe' of the site layout - this helped us consider how content would reflow for mobiles as well.
A mobile ready online shop
It was critical that this new site was as easy to navigate and use on mobiles and tablets as on desktops. Not only can all the products be navigated and viewed on a mobile such as an iPhone, the entire checkout process is mobile ready, meaning visitors can shop using any device. We saw this as a critical requirement as we could easily imagine visitors sitting on their couch with their iPad or mobile phone (perhaps with a glass of wine), browsing for a present or something new to adorn their home!
Some features of the shop at a glance:
- Rollovers on the product images, to show their description.
- Lightboxed product images
- A scrolling banner, with banner images able to be linked directly to the product they are showing
- An editable piece of banner text, to make it easier to update
- Individual artist pages (added via the composer), with filtered lists of products to show their work
- Recently viewed products
- The ability to add product options, to offer different sizes, colours, etc
Each product has large 'lightboxes' to allow visitors to see the products in all their (delicious) detail.
Aliasing Product Pages
Without modification, eCommerce won't show products that are an alias, it will only show them if they are real product pages. Although product sets can be used to put products in multiple categories, we wanted to use sets for broader categories such as 'For Men', or 'On Sale', using the category pages for more specific categorisation.
We found that we were able to override the product_list controller: /packages/core_commerce/blocks /product_list/controller.php
changing line 408 (at the time):
// $query = "SELECT cID FROM Pages WHERE cParentID = ?"; // changed to $query = "SELECT IF(cPointerID > 0, cPointerID, cID) as id FROM Pages WHERE cParentID = ?";
We were then able to alias product pages throughout the shop's categories.
Checkout Shantala's shop at Coco Contemporary Connoisseur