I have been using Bandcamp for several years. Most of the bands we work with make use of this service also. It is a great e-commerce solution for selling merch and music directly to your fans.
After recently releasing their mobile-optimized version of the site and adding the ability to sell merchandise, I have become an even bigger fan. Actually, I had been anxiously waiting for the mobile-optimized site for a while. I jumped for joy the day they sent the e-mail letting everyone know it had launched.
I am also a huge fan of their packages feature. You can bundle your albums with your merch or other digital goods such as artwork, lyric sheets, or guitar tabs to create more value for fans. (Example: CD + digital download + T-shirt and 5 stickers for $35 as opposed to $12.99 for only the CD.)
In today’s How To, I will walk you through the steps of integrating Bandcamp into your website for a seamless user experience.
Step 1 – Create an Account or Login
This one is obvious.
If you are not using Bandcamp, you obviously need an account. If you are using Bandcamp, then login.
It is free to set up an account and you are able to set-up your store with ZERO up front costs. Bandcamp takes a percentage of your sales.
You will need a PayPal account. You will connect it to your Bandcamp account so that money is automatically deposited to PayPal when music and merch is sold. Also know that (sometimes) Bandcamp will hold your money for a period of time before releasing it.
Note that PayPal also takes out a percentage of money received (transaction fees) so you will be paying both Bandcamp and PayPal small percentages of your revenue.
If you are selling merch, you are responsible for shipping the items to fans. You will be able to set shipping costs and taxes inside your Bandcamp control panel.
If you have any questions, feel free to ask me. I am also using this tutorial to attempt to educate you as much as I can about the service and its features.
Step 2 – Header Image
You first need a header image to upload to your Bandcamp page.
The required dimensions are [show_to accesslevel=’free’] 975 pixels wide and 40 – 180 pixels high.
The graphic needs to be in .jpg, .gif, or .png formats and can not exceed 2 MB in file size.
Below is the image I will be using and manipulating throughout this tutorial.
**Note about your header image
We will be taking this image and creating an image map using HTML (hyper-text markup language aka website code).
Do NOT panic, I will give you the code and walk you through the process of manipulating the code to work with your header image.
With that said, the header image you use needs to have some thought put behind it. Mostly strategic thought.
To fully integrate your Bandcamp store with your website, you will want to include the header and navigation area of your website as your Bandcamp header. When people click from your website to your Bandcamp store and then click back to your website, it will be a seamless experience.
Below is an example of what I am talking about. The first image is the header and navigation menu on Joe Elmore’s website. The second image is the header and navigation menu on Joe’s Bandcamp page.
Website Header
Bandcamp Header (integrated with Joe’s website)
You can view this in action by visiting Joe Elmore’s website. Click the store tab then notice how you are able to click the links in the Bandcamp header as if you never left his website.
The easiest way to copy your website’s header and nav menu to your Bandcamp store is to use the Print Screen key on your keyboard to capture a screenshot of your website. You can then:
- paste the screenshot into your image editing software
- crop the screenshot to only include the header and navigation menu
- save and then upload this image as your Bandcamp header
- use HTML to create an image map that will convert the navigation menu into links
Step 3 – Creating links in your header with a HTML image map
After you have created your header image and uploaded it to your Bandcamp page, it is time to turn areas of your header and the items in your navigation menu into clickable links.
This is achieved by using HTML to create an image map.
First we need to get into the Profile section of our Bandcamp control panel.
In the upper right corner (when you are logged in), you will see your username. Click it to make a drop-down menu appear. Click Profile to edit your Profile information and settings.
Once the Profile Settings page has loaded, scroll down until you see the Custom Header section.
In the Custom Header area, you will want to select Uses an image map. The text box is where you will copy & paste the HTML code below.
<area shape='rect' coords='0,0,750,103' href='band URL here' alt='Visit our Website' target='_blank' >
<area shape='rect' coords='780,33,809,65' href='FB URL here' alt='Facebook' title='Facebook' target='_blank' >
<area shape='rect' coords='824,34,854,64' href='Twitter URL here' alt='Twitter' target='_blank' >
<area shape='rect' coords='869,34,899,64' href='YouTube URL here' alt='YouTube' target='_blank' >
<area shape='rect' coords='916,34,945,66' href='Myspace URL here' alt='Myspace' target='_blank' >
<area shape='rect' coords='777,87,959,103' href='other URL' alt='Buy on iTunes' target='_blank' >
Allow me to break down the elements of this code.
To make this look less confusing, here is 1 line (which is repeated 6 times in the above code). Each line of code represents a clickable link.
<area shape='rect' coords='780,33,809,65' href='FB URL here' alt='Facebook' target='_blank' >
- area tells your browser to convert specific coordinates of your header image into a clickable link.
- shape defines the area specificed by the coordinates (coords). Options include: rect, circle, poly.
- coords defines the area of the image that is clickable and will become a link.
- href is the link visitors will be directed to when they click the specificed area of the image (the rectangle with coords=’780,33,809,65′ will direct visitors to your Facebook page).
- alt is a tag reserved for SEO purposes but is used to describe the link.
- title is another tag with SEO benefits but it will also show a small pop-up when you hover over the link (when you hover over the Facebook link, a pop up would say Facebook).
- target tells your browser where to open the link when it is clicked. Options include _blank, _parent, _self, _top, or you can use a custom framename. The only target I ever use is _blank which causes the link to open in a new tab. If you leave out the target attribute, the link will open in the same tab (causing visitors to leave your website).
How do I find the coordinates?
Great question.
Each time I have had to create a HTML image map, the most confusing and aggravating part has been finding the proper coordinates.
I know of no quick and easy way to find them, but I will walk you through my process.
In this particular example we are using rectangles. Defining coordinates for circles and polygons will differ slightly.
In the image below, I have highlighted the areas which I will convert into links.
Taking another look at the code, we can visually connect the areas of the header image with their corresponding areas in the HTML code.
<area shape='rect' coords='0,0,750,103' href='band URL here' alt='Visit our Website' target='_blank' >
<area shape='rect' coords='780,33,809,65' href='FB URL here' alt='Facebook' title='Facebook' target='_blank' >
<area shape='rect' coords='824,34,854,64' href='Twitter URL here' alt='Twitter' target='_blank' >
<area shape='rect' coords='869,34,899,64' href='YouTube URL here' alt='YouTube' target='_blank' >
<area shape='rect' coords='916,34,945,66' href='Myspace URL here' alt='Myspace' target='_blank' >
<area shape='rect' coords='777,87,959,103' href='other URL' alt='Buy on iTunes' target='_blank' >
The coords 0, 0, 750, 103 represent the biggest area of the image (the band’s name) which links to their official website.
0, 0 is the upper left corner and 750, 103 is the bottom right corner of the rectangle which will link to BUNKS’ website.
Below is a screenshot demonstrating how I located the coordinates inside my image editing program (Paint.NET).
When defining rectangle areas in your image map, you only need to provide the coordinates of the upper-left and bottom-right corners of the area you want to convert into a link.
You can include as few or as many links as you want in your image map.
Once you have copied and pasted the image map code into your Bandcamp profile, changed the coordinates to match your image, and inserted your links into the href=”” attribute – you are ready to scroll down to the bottom of your Profile Settings page and Click Save.
If you forget this step, nothing will happen. If you try to leave the page without saving, Bandcamp should send you a pop-up alerting you that changes have not been saved.
Assuming your coordinates and your URLs are correct, you should now be able to fully integrate Bandcamp into your website.
If you have any questions or are confused, feel free to contact us.
Additional Note
In one of the screenshots above, you probably noticed the Custom Domain option. This is now a Bandcamp Pro feature, but since BUNKS were members before Bandcamp ever offered Pro features, they are able to use this for free.
Depending on what date you signed up for Bandcamp, you might able to use this feature for free as well. (I am not sure of the cut-off date.) New accounts must pay for Bandcamp Pro to use this feature.
To see the Custom Domain in action visit BUNKS’ website (click Store and notice how the URL changes from www. to store.bunksperience.com – you are looking at their Bandcamp store without bandcamp.com in the URL).