Adelaide Pet Dog Training wanted a website to promote their dog training courses and an online shop to sell dog products. Twenty20 Graphics provided a dynamic and exciting design.

An eCommerce building using Sass + Compass

Adelaide Pet Dog Training is the first concrete5 site with eCommerce that we've built using Sass and Compass. Using Sass made the potentially tricky task of building an online shop with mobile responsive capability, smooth and efficient. We used the wonderful Susy for our grid system, which continues to impress us with its flexibility.

Instead of styling a site and eCommerce components using one large stylesheet, we utilised Sass's ability to have CSS in separate files, to be combined into one production stylesheet. In these seperate files we defined the styles for the different eCommerce specific components, such as the product lists, the cart and checkout pages.

In our 'partials' folder within our Sass files, we created an ecommerce folder and within that we split things up into the following files:

  • _ecommerce.scss  (a file to include the rest of the partials)
  • _cart_links.scss
  • _cart_popup.scss
  • _cart.scss
  • _product.scss
  • _product_list.scss
  • _checkout.scss
  • _finish.scss

The beauty of this approach was that not only did it make the task of styling the eCommerce components more manageable, these files can be used again for another project - they are now cleanly separate from the rest of the styling. Each time we style a shop we'll enhance these 'partials' further, making them more generic and programatic, rather than having hard coded values.

Fine grained stock control

To provide a finer level of stock control, we developed a package that installed an additional product attribute, an attribute that is controlled with stock levels. This meant that the dog harnesses of various colours and sizes can be ordered by customers, with the specific variation becoming unavailable when that specific stock has been exhausted (we'll talk more about this custom package in the near future).

Other site features include:

  • A fun and funky design by Scott Hutton of Twenty20 Graphics
  • A fully mobile responsive layout
  • A custom build expanding mobile menu
  • A heavily customised cart popup
  • Flexible sidebar areas for inner page and shop category navigation
  • Customised testimonial block
  • Integrated Google maps feature to display locations for training sessions 

Visit Adelaide Pet Dog Training.