2 Websites, 2 Code bases, 1 shop

The start of improving Superdrug’s front-end development standards.


Investigate and design a way to refactor the front-end code base to make it easier to maintain with minimal risk to the existing codebase.


The users: Front-end developers.

The owners: IT director, eCommerce director and AS Watson.


  • A code base for the mobile website
  • A code base for the desktop website
  • A single hybris database loading different themes based on header requests

Proposed solution

Lay foundation for transitioning to a responsive website:

  • Introduce scalable and resuable code components in areas with high usage from the business.
  • Use unified css and js basefiles
  • Identify components in hybris that need to be extended to allow for responsive behaviour without losing device specific content
  • Target a heavily used page by the business

Delivered solution

The product details page (PDP) was the first page converted and delivered to the business.

The content for these pages for both platforms are always identicle which makes it an ideal candidate to use component files that can be reused for both website platforms.

A total of 4 new components were required, with adjustments to 2 template files.

The result eliminated the need to update content on 2 platforms and eliminated the need to change the code in 2 different areas.

Training colleagues to understand the priciples of components was required. Once understood, it set in motion using the same princple whereever possible. This was the start to make Superdrug.com a responsive website.