Design and development of dynamic, e-commerce website for Serein. Invites the user to explore the label’s output with colour coded interface and uninterrupted music streaming. Integrates with 3rd party shop, Snipcart. Serein is my own record label that I started in October 2005.

Serein Records - Responsive Front Page

The site uses Statamic as its CMS. This is a flat-file system requiring no database, as such page load times are really quick. It also means that the entire website can be put under version control. This allows all revisions to the site’s code and content to be tracked over time.

The site integrates with Snipcart, a 3rd party e-commerce provider. Snipcart provide webhooks which can be used to add deeper integration with your site. I utilised them to create custom shipping rates based on a user’s location, as well as providing customers with download codes for any CDs or vinyl they buy.

I developed an addon for Statamic which provides an interface for adding and keeping track of download codes for each album. The site admin is notified by email when codes for any album fall below a certain threshold.

The video shows what Statamic looks like at the back-end.

I use SPA-style rendering to make browsing feel responsive and immersive. The music bar I developed, which sits in a fixed position at the bottom of the site, can stream music uninterrupted between pages.

Serein’s physical releases (CDs and records) are all colour coded – CDs have a circle of colour on the spine, while records use the colour coding on their centre labels. On the site, album pages have key elements highlighted in their representative colour. The Serein logo (a perfect circle), morphs colour according to whichever album or mix is being viewed.

Git / HTML5 / Javascript / jQuery / Laravel / PHP / SCSS / Snipcart / SoundManager2 / Statamic