Music store design - samples, downloads and non-digital cd as products all on one page

My new design for an online store especially for music downloads (with sample audio!)

Music store design - samples, downloads and non-digital cd as products all on one page

Musicians of all types, from Indi-Rockers to Death Metal monsters and even Classic Rock tribute bands need to be able to sell their music online. There are lots of sites they can join that will do it for them like e-music and cdbaby and they make it real easy… But the bands aren’t selling on their own terms, on their own web site, with their band logo and all of that extra nice nice-ness.

So when I was asked by ON to develop an online store for them of course I grabbed a fresh copy of WordPress + wp-e-commerce and got to it.

My 1st challenge was finding an audio player that was customizable with CSS (not Flash!) I was so happy to find this plugin Haiku minimalist audio player. This plugin let me paste a shortcode into the product editor so that before customers are ready to buy they can hear a sample of the song. Customers can add multiple tracks to the cart and they can also choose a format, wav or mp3. ON also wanted to be able to offer the option to download the entire album (in both formats) and/or the option to buy the physical cd.

So on one side of the product page there’s the artist name & photo (the cd cover art as a featured image) and under it there is a list of 3 products: Buy CD, Download Album (MP3) and Download Album (WAV).

The new version of wp-e-commerce makes it easier than ever to mold your product pages any way you need. I really love how much easier it is to handle Variations now. So well done! The best decision GetShopped made was to go with the way WordPress works now – quite a bold thing to do because it required a complete revamp of their plugin. So I have much respect for them. Talk about wanting to be Future Proof. I love that.

Why Beta? Because I used the Product Page template.I should have used the Category Page template. I haven’t yet handled Single Product Pages,either. But its a good start!

7 thoughts on “My new design for an online store especially for music downloads (with sample audio!)”

  1. I’ve been spending a lot of time on your site because I’m working on my first Lightspeed site. (Oy.) Imagine my pleasant surprise when I discovered that you’re using Haiku for one of your projects!


  2. This is fantastic! Any way you could give a breakdown of what you did or a mini tutorial? 😀 Fantastic work!

    1. Hey Matt, thanks! It was a lot of work but the end results were worth it. When I have time I might go into more detail about how I actually accomplished this. I have to say right off the bat that this was really experimental so my actual breakdown is kind of involved. But to tell the truth all you need is the latest version of the wp-e-commerce plugin and the Haiku audio player plugin and of course you need to know how to work it with CSS and WP themes.

      1. Thanks for your speedy reply! Did you just use a typical page or did you edit the products page php?

        Sorry for the questions, just need this exact type effect and not sure which direction to look? Fantastic work you’re really talented!

Comments are closed.