How to Design Your Own Artist Website Using Squarespace [Crash Course]

 
Horizon_–_Squarespace.png

Why You Need A Website

What is your website used for?

What info should your website have on it?

Your website is the “hub” of everything about you. It is your own piece of online real estate.

It’s the one place where people can go to learn everything about you and see all of your recent happenings.

If all of the other social networks shut down, you would still have your website. This is very important since social networks are forever changing and new networks are being launched all the time.

Think about it, Instagram is one of the largest social networks there is and it has been down three times in the last month! The last thing you want is for social media to go down and then BOOM you lost all access to your fans. How will you keep your fans updated if that happens? With your website of course!

While many people will say “fans don’t visit websites” - that isn’t entirely true. It’s up to you to make sure your website is enticing enough to visit. It’s also up to you to make sure you’re leading people to your website. If you aren’t, you’re totally missing out!

Plus look at it this way, every little thing you do sets you apart. Having a website makes you look like the professional artist that you are. It will help you stand out from the thousands of artists who don’t have a website. Don’t you want to stand out?

Also, would you buy from a company that doesn’t have a website? Doesn’t that make them look a bit fishy and untrustworthy? You don’t want your brand to look fishy do ya? We don’t think so.

But we’re not here to convince you that you should have your own website (as you’re obviously here for a reason). We just wanted to drive the point home a bit more just in case you’re still a bit weary about it.

Let’s continue on shall we.

What your website is used for

Aside from keeping your fans in the loop with new music, videos and tour dates, you can also use your website to sell merch, display press you’ve received, receive booking inquiries etc.

Your website is also extremely important to have when looking to get press. It’s the main place that press/media will go when they are scouting you and writing about you. They’ll visit your website to grab a few lines from your bio for their intro and they’ll head over to your photo gallery to grab a photo to use for their post.

You’ll also use your website to collect a database of email addresses from fans who want to hear from you. This is an extremely important feature. If you don’t already utilize a newsletter to stay in touch with your fans, check out our step by step guide to creating and utilizing your newsletter (hyperlink).

While websites can be costly to design if you pay someone, new technology has made the process much easier.

The truth is, designing your website doesn't have to be a hard and painstaking process. You can actually design it yourself and you don't have to be a computer nerd to do so. All you have to do is follow directions.

We’re going to break it down into simple steps for you to follow, but before we get started designing, let’s make sure you have your content handy so that you won't have to look for it later.

What Goes On Your Website?

Since your website is essentially the “hub” of everything about you, before you get started on designing make sure that you have the following things readily available:

  • Professionally shot photos of you (these will be used in the actual design and for the photo gallery)

  • Your logo (if you have one)

  • Your bio

  • Cover art to any albums or singles you want to have on your website

  • Links to albums or singles you want to have on your website (soundcloud and audiomack links are the easiest to embed)

  • Links to all of your social media accounts

  • Links to videos you want to display

  • Links to streaming accounts (apple music, spotify, tidal etc.)

At a basic level, these are the only things you’ll need to design your website.

Designing Your Website

Once you have all of your content ready to go, you’re now ready to start designing your website.

Our favorite platform to use to design websites is Squarespace (hence why this website was built using Squarespace).

I know you have probably seen those “Build your website in 10 minutes with Godaddy” or “Build your website with Wix” commercials, however after using all of them, Squarespace is our absolute favorite. Why? Because the layouts are clean and simple (yet they look awesome!), they are so easy to customize and there’s lots of functionality built in specifically for artists and musicians.

Squarespace also automatically turns your website into a mobile friendly version so you never have to worry about your website looking weird when someone visits it from a mobile device.

We used to use Wordpress to design artist websites but that’s because Squarespace wasn’t around back then. Though Wordpress is also great (we almost built this website on Wordpress), it’s way too complicated to design on and it’s also a pain in the butt to keep updated. So Squarespace it is.

Here's where things may start to get a little tricky (until you're used to maneuvering around Squarespace) but don't get discouraged. Remember, it's not hard, you're just learning something new. Walking was hard when you were first learning how to do it, and now look how easy that is!

Note: This crash course is written in a way that will allow you to follow along as you’re designing your own website. So open up a new tab and start designing while you’re reading!

Create a free squarespace account

To get started, open up a new tab in your browser, visit Squarespace.com and click on "get started."

You may be prompted to create an account (free trial).

The trial says that it's free for 7 days however if you don't finish your website in that timeframe you can always extend it (Squarespace will send you an email to remind you).

In order to make your website live you will need to upgrade your Squarespace account to a paid account, but it will be less than $30/month which is very cheap and should be chalked up as a business expense.

Choosing a Template

After clicking on “get started,” Squarespace will send you to a templates page where you can choose what template you want to start with for your design.

My favorite templates to use for designing artist websites are: Horizon, Aviator, Encore, and Polaris.

In this tutorial I’m going to use the Horizon template (so you may want to choose that template so you can follow along). You can always change the template later on if you want.

Once you choose the template you want to start with, it will ask you a few questions before you start designing. Check out this video we created to show you what it looks like.

Your Dashboard

Once you answer those few questions it will take you to your dashboard which looks like this:

Your dashboard is the main area where your site is controlled so lets explore this a bit:

PAGES - This is where most of the site designing happens. In this tab you can edit all of your site pages, menu and content.

DESIGN - This is where the other design options are. In this tab you can change the fonts, colors and the layout of your site.

COMMERCE - This is where the payment options are. You don't have to worry about this tab until you set up your online store [HYPERLINK ONLINE STORE ARTICLE].

MARKETING - This is where you can add things like subscriber pop-ups, add an announcement bar at the top of your site etc. We won’t get into this stuff yet as it’s not as important.

ANALYTICS - This is where you can see the analytics to your site (page views etc.)

SETTINGS - This is where you can add your domain name, upgrade your plan, add your social networks and streaming links, add a site contributor and more.

HELP - This is Squarespace's help guide. If you get stumped while reading this guide and need more info, use the HELP tab to search for topics.

I suggest clicking on all of those tabs and exploring so that you'll start to get familiar with the options.

But let’s get into designing your site shall we.

Add Your Logo and Title

Start by clicking on the DESIGN tab. You'll be brought to this screen:

You’ll see the menu on the left changes to give you design options.

Click on Logo & Title. You’ll see the menu change to this:

Screen Shot 2019-07-04 at 5.45.21 PM.png

Simply add a site title (which in this case should be your artist name) and feel free to add a tagline (if you’re into that sorta thing) but it’s not totally necessary.

This is also where you’ll upload your logo if you have one (upload it under where it says “logo image”). Your logo usually replaces your site title on most templates.

Once you’re finished, click the arrow at top left hand corner and you’ll be taken back to the DESIGN menu. Click the arrow one more time so that you’re on the HOME menu again.

Understanding The Page Menu

Once you’re back on the home menu, click on PAGES. You’ll be brought to this screen:

As you can see, your pages are displayed on the left. The template already has sample pages and content in there that you can edit to fit your brand.

Now before we go much further I want you to understand how the page menu on the left works. Once you understand what these things mean it’ll be easier for you to move forward with designing your site.

The menu on the left displays all of the pages on your website. It has a few sections: Main Navigation, Footer Menu and Not Linked.

Main Navigation: This section contains the pages that are publicly accessible and are shown on the main menu of your website.

Footer Menu: This section contains pages that you want to show up in the Footer (which is the section all the way at the very bottom of your website). For now you can leave this section blank.

Not Linked: This section displays the pages that are not displayed on the main menu. These pages are still live and accessible to anyone with the link.

You can drag and drop the pages to whatever section you want. For instance, if you don’t want your EPK page to be displayed on the main menu (and therefore accessible to anyone who visits your site), you can drag it down to the Not Linked section (that way only people you send the link to will be able to access that page).

Understanding the Types of Pages on the Menu

Within the menu sections explained above, you’ll see that there are pages. Some pages contain a few different sections (which are also displayed on the menu).

For instance, the “Welcome” page demo content contains sections for home, band, tour, news and music. This is called an Index. An index is simply a bunch of sections that all show up on one page.

If you scroll down your home page you’ll see that each of those sections is linked to a page on the “Welcome” index:

“Home” represents the header section at the top.

“Band” represents the section under the header where the bio is.

“Tour” shows the tour dates.

“News” shows the latest news.

And “Music” shows an album.

In the picture below, the first tiny red box on the left next to “Welcome” is the symbol for an Index.

Screen Shot 2019-07-05 at 2.42.43 PM.png

The second red box you see in the picture above is the plus sign (+) which is how you add new pages. Clicking the “+” brings up the 3rd highlighted box which shows you the many different types of pages you can add (including the index page that we mentioned in the paragraph above).

If this isn’t making sense yet, it will all click soon, we promise.

Building the Structure of Your Site

Now that you understand the basics of the pages menu, let’s create the actual structure of your website (by “structure” we mean the outline of your site). If you create the structure of the site first, it’ll be easier to add the details.

To start, we’re going to delete some of the sample content that comes with the layout, and we’re going to only keep the things you need on your website. Then we’re going to add a few pages that aren’t already included in the demo content.

Once we’re done, you’ll see that you have a basic site structure completed and all you’ll have to do is add your own content.

Let’s keep this as simple as possible.

You know that at the very minimum your website should contain pages that display your bio, music, videos, photo gallery, news (blog), and contact.

The current layout contains those things (as well as sections that display your tour dates, merch store etc.) but it’s not displayed how we want it to be so we’re going to make some adjustments.

First, lets start by deleting the tour, news and music section from the home page.

To delete something from the menu, simply roll your mouse over the section you want to delete and click the little trash can icon that comes up (as seen in the picture below).

Scroll over a section and click the trash can icon to delete it.

Scroll over a section and click the trash can icon to delete it.

After deleting the tour, news and music section from the home page, delete the Media index page entirely.

You should be left with the following menu:

After deleting the tour, news, music, and media sections, you are left with this menu.

After deleting the tour, news, music, and media sections, you are left with this menu.

If you look at the actual website (on the screen on the right) you should see that your main menu (at the top of the home page) has updated and now only displays items for home, band, merch and contact (as seen below).

The site menu automatically updates according to the changes you made on the page menu.

The site menu automatically updates according to the changes you made on the page menu.

adding new pages

Now that you’ve deleted some of the unnecessary demo content, it’s time to add the rest of the pages that are needed.

To do this, simply click on the plus sign “+” on the page menu. Once the new menu appears, click on “blank” page to add a new blank page (as seen in the pic below).

To add a new page, click on “+” and then click on “blank” page on the new menu that pops up.

To add a new page, click on “+” and then click on “blank” page on the new menu that pops up.

Once you click on “blank” you’ll see the new page added to your menu.

Screen Shot 2019-07-05 at 6.44.30 PM.png

Change the name of this new page to “Music” then drag it to display right over the merch section (as seen in the picture below).

As you can see, we changed the new page name to “Music” and we moved it down. It’s now below the “welcome” index and before the “merch” page.

As you can see, we changed the new page name to “Music” and we moved it down. It’s now below the “welcome” index and before the “merch” page.

Be careful not to add it to the “welcome” index (make sure it’s a page of it’s own, not a section on the index) because you want it to be its own page (not a part of the home page).

After you add the music page, add two more blank pages, one that’s titled “videos” and another titled “photo gallery.” Then, drag both of those pages to display under the music page (right before the merch page).

You should now have a menu that looks like this:

This is what your menu should look like after adding pages for music, videos, and photo gallery (and dragging them so that they show up in the correct order).

This is what your menu should look like after adding pages for music, videos, and photo gallery (and dragging them so that they show up in the correct order).

adding demo pages + changing page names

Most of the pages have been newly created by you, but there’s still some demo pages on there.

The other pages still have “demo” written next to them. This will disappear once the page has been created officially.

The other pages still have “demo” written next to them. This will disappear once the page has been created officially.

For instance the “band” section is still a demo page. We’re going to keep that page, however we’re going to re-name it and call it “Bio.”

To do this, on the left menu, roll your mouse over "band" and you'll see the small circle icon (as seen in the photo below), click there.

This is the “circle icon” that we’re talking about. It appears when you scroll over the page name.

This is the “circle icon” that we’re talking about. It appears when you scroll over the page name.

Since it’s demo content, before showing you your options, Squarespace may prompt you to "create the page" or “copy page” as seen in the photo below.

You may see this prompt when trying to edit a demo page. If you do, click on “copy page” so that you can begin to edit and add your own content to the page.

You may see this prompt when trying to edit a demo page. If you do, click on “copy page” so that you can begin to edit and add your own content to the page.

Once the page is created, you can proceed.

After you see the prompt, you should see a menu that pops up on the right. If the menu doesn’t automatically pop up, roll your mouse over the “band” page again and click the circle icon.

A menu will pop up that looks like this:

Once you roll your mouse over the “band” page and click the circle icon. a new menu will pop up that looks like this.

To change the name of the page from “band” to “bio” simply replace “band” with “Bio” in the Navigation Title, URL Slug, and Page Title sections (as seen in the photo above).

Once you’re finished changing everything to “bio”, click save.

You should see that the menu on the left as well as the menu at the top of your website is now updated with a page called “bio.”

Your menu should now look like this:

This is how your menu should look after changing the “band” page to “bio.”

This is how your menu should look after changing the “band” page to “bio.”

Adding a Background Photo or Video

Now that you’ve created the overall structure of your website, it’s time to start editing and adding content to the pages.

Let’s start by changing the background image in the header. The header is just a term for the first section at the top of your site.

On the menu on the left click on “welcome” so that it’s highlighted (this is to make sure that you can see the welcome page on the right side of the screen).

When you roll your mouse over the site itself (not the menu, but actual website design on the right) you'll see small tabs come up with the following options: EDIT, BANNER, and SETTINGS (as seen below).

Roll your mouse over the page (on the right of the screen) and you’ll see some options appear. Click on “Banner.”

Roll your mouse over the page (on the right of the screen) and you’ll see some options appear. Click on “Banner.”

Click on Banner and this menu will pop up:

Once you click on “Banner” this screen will pop up on the right.

On this menu you'll see that you have the option to add an image of your choice (make sure it’s a professionally shot photo of you).

You can also add a video instead of a picture (by clicking on the video tab on the menu above, and then inserting a Youtube or Vimeo link).

Note: If you have a really cool video, we suggest using that instead of a photo because it tends to “wow” people when they visit your site.

Sometimes video backgrounds don’t show up when people visit your website from a phone. To get around this, once you’re on the VIDEO tab and you add the link to your video, scroll down and you’ll see the option to “Add a Mobile Fallback Image” - this is where you can upload an image that displays if video isn’t available when viewing from their phone.

This is where you insert the image that will display in place of your video when necessary.

This is where you insert the image that will display in place of your video when necessary.

Once you add a photo or video, click SAVE and you'll see your homepage background change.

editing the content in the header

So you just changed the background of the header. Now you'll want to edit the text that shows up at the top and customize it to fit your brand.

To do this, roll your mouse over the site home page again and when you see the option tab appear, this time click EDIT (instead of clicking BANNER like last time).

Instead of the menu box appearing (like it did when you changed the background), your screen will widen and you’ll be able to edit the content that displays on your site

We clicked the “edit” option and we are now able to edit the text in the header at the top.

We clicked the “edit” option and we are now able to edit the text in the header at the top.

Change the text to your artist name and delete the “buy on itunes” text at the bottom.

Now we’ll want to make sure that the “listen to album” button links to your music page. To do this, simply roll your mouse over the “listen to album” button and click EDIT on the menu that shows up.

You’ll see this menu pop up:

Screen Shot 2019-07-05 at 10.24.42 PM.png

To make sure the “listen to album” button links to your music page, click on the dark grey highlighted box under where it says “Clickthrough URL.” Then click on the “content” tab (as you can see outlined in red in the photo above).

Find your “music” page and click on it so that it’s highlighted.

Note: If you do not have an album that will be displayed on your MUSIC page, simply change the text of the button from “Listen to Album” to “Listen Now.” You’ll see the option to do this on that same menu (as seen in the picture above).

Once you’re finished editing the button, click APPLY in the bottom right.

Once you’re done editing the header how you see fit, simply click “save” in the top left corner.

If you want to see this part in video form, click here.

We changed the text from “gravity” to “sample website,” deleted the “buy on itunes” text and linked the “listen to album” button to the music page.

We changed the text from “gravity” to “sample website,” deleted the “buy on itunes” text and linked the “listen to album” button to the music page.

add your bio to the home page

You have now created your site structure, added a background to the header, and changed the text that shows up in the header.

Now it’s time to replace the demo bio with your bio on the home page.

As you can see on the left menu, your home page contains two sections: home and bio. The home section is already edited (as that links to the header that we just edited).

Now it’s time to add your own bio to the “bio” section.

To do this, simply click on “bio” on the left menu so that it’s highlighted and the “bio” section is displayed on the right of the screen.

Roll your mouse over the bio (on the site displayed on the right) and click on “EDIT” on the menu that pops up.

You’ll see this screen:

You will see this screen by clicking on “bio” on the left menu, then scrolling over the bio on the actual site on the right, and clicking “edit” on the menu that pops up.

You will see this screen by clicking on “bio” on the left menu, then scrolling over the bio on the actual site on the right, and clicking “edit” on the menu that pops up.

Now you can edit the text and add your own bio.

You can also either delete the photo grid below the bio, or you can replace those photos with your own photos.

To add your own photos, simply roll your mouse over the photo grid and click on EDIT. You will see this menu pop up:

Screen Shot 2019-07-05 at 10.49.23 PM.png

You can upload your own images and delete the mock images that were included with the template. Once you’re finished uploading your photos, be sure to click APPLY in the bottom right.

BOOM. You updated your home page with a new bio and some photos to make it look pretty. Simple enough right?

Here’s how the BIO section on our home page looks after replacing the old bio and adding our own photos.

Here’s how the BIO section on our home page looks after replacing the old bio and adding our own photos.

Add Music to Your Music Page

To add music to your music page, start by clicking on MUSIC on the left menu. A blank music page will be displayed.

Just like we did in the previous sections, roll your mouse over the blank music page on the right of the screen and do the following:

If you want to add a banner to the top of this page, click on BANNER on the menu that comes up. Add the banner image or video just like we did for the header on the home page.

After you’re done adding the banner (or if you skipped that step and want to jump right into adding your music), roll your mouse over the blank music page again, and this time click on EDIT.

You’ll now be able to embed a music player, upload photos of your cover art and add any other content you want to your music page.

We’re going to start by adding our album cover art and linking it so that when people click on it it’ll take them to the song (or album).

Click the plus sign “+” and click on “Image.” You’ll see the “image” menu appear. Upload a picture of your album art.

Next, you’ll need to make sure it links to the song or album. To do this, click on the “Design” tab on that same menu box (as seen in the photo below). Then scroll down to where it says “clickthrough URL” and click on that box and insert the link to your song.

This is what the image menu looks like when you click on the “content” tab. Scroll down and add a link to your photo by adding a “clickthrough URL.”

This is what the image menu looks like when you click on the “content” tab. Scroll down and add a link to your photo by adding a “clickthrough URL.”

Be sure to click “apply” to save your changes.

Your image most likely takes up the whole page which is fine for now. We’ll make it look pretty in a second. But first, we need to embed some music.

Your safest bet is to embed a Soundcloud or Audiomack link, that way everyone can listen. You can also embed a Spotify or iTunes playlist, however if a visitor doesn’t have Spotify or Apple Music they won’t be able to stream the music on your site.

To embed music from Soundcloud, open a new tab and visit your Soundcloud page. Click the “share” button on the song or playlist that you want to embed and click the “embed” option (as seen below). Copy that highlighted code.

Screen Shot 2019-07-06 at 3.48.10 PM.png

Next, go back to your website and click the plus sign “+” - this time you’re going to click on “markdown.” Simply paste the embed code into the screen that pops up. It will look like this:

This is the “markdown” options menu. Paste the Soundcloud or Audiomack code then hit “apply” to save your edits.

This is the “markdown” options menu. Paste the Soundcloud or Audiomack code then hit “apply” to save your edits.

Once you paste the embed code into the markdown menu and click “apply” you should see your page updated with the photo and now the song embedded under it.

Now it’s time to make the page look pretty by making the photo smaller and moving it to the left, and moving the song embed next to it.

Squarespace makes it really easy to move things around on your page. You can simply drag and drop things where you want them to show up.

Click the song embed and drag it next to the photo/cover art. You should see a line appear that’ll show you where you’re about to place the song. Make sure that line shows up next to the image only. Then drop the song embed so that it shows up next to the image.

You should now see your album art on the left and the embedded song next to it on the right.

There’s also a text box at the top, so feel free to add the title of your song so that it shows up over the song and cover art.

Your page should now look something like this:

This is what our page looks like after following the instructions. The song title is at the top, with the linked cover art on the left and the embedded song on the right.

This is what our page looks like after following the instructions. The song title is at the top, with the linked cover art on the left and the embedded song on the right.

If there’s more songs you want to add, feel free to repeat this process. You can also embed a playlist the same way. If you don’t want to add images no need to, that is entirely up to you.

Adding videos to your videos page

To add video’s to your videos page click on VIDEOS on the left menu. Roll your mouse over the blank videos page on the right, and click EDIT.

To bring all the attention right to your videos, you may not want to add a banner to this page as it may look a bit cluttered.

To start adding videos, click the plus sign “+” and click on the option for VIDEO.

You’ll see this menu pop up:

This is the video menu that pops up.

This is the video menu that pops up.

Simply grab a link to the youtube video you want to display and insert the link where it says VIDEO URL.

If you scroll down on that same menu you’ll see that you can either display the caption, or not display it. You can also add a custom caption of your choice. We typically choose not to display a caption as it tends to clutter up the page.

You can add as many videos as you want, by repeating the above steps.

If you don’t want your videos to be displayed one on top of the other and instead you want to display a few videos in one row, simply drag and drop the videos next to each other (as seen in the picture below). You can also feel free to add a title in the blank text box at the top.

We added two music videos to our videos page and used the drag & drop feature to move them.

We added two music videos to our videos page and used the drag & drop feature to move them.

Adding a Photo Gallery

To add a photo gallery to your photos page, click on PHOTO GALLERY on the left menu. Roll your mouse over the blank page on the right, and click EDIT.

Feel free to add a banner by following the steps we mentioned in the previous sections.

To add a photo gallery, simply click the plus sign on the right, and instead of clicking on “image,” look at the options under “gallery” and click on the type of gallery you want to create. We’re going to choose the GRID option since we feel that displays best on both desktop and mobile devices.

You’ll see the grid gallery menu pop up (as seen below).

This is how our screen looks when we click to add a “grid” gallery.

This is how our screen looks when we click to add a “grid” gallery.

Simply upload the photos that you want to display on your photo gallery page and click “apply.”

BOOM, you now have a photo gallery.

This is what our screen looks like once we added the photo gallery.

This is what our screen looks like once we added the photo gallery.

Customize the contact page

The template already came with a mock contact page but you’ll need to customize it.

To do so, click on “contact” on the left menu. You’ll see that the contact page shows up on the screen on the right.

As you can see, the mock template already has a banner at the top and a contact form underneath.

To add your own photo and edit the text on the banner, simply roll your mouse over the header and click “settings” on the tab that pops up.

You will see this menu:

Change the header text by editing the PAGE DESCRIPTION.

Change the header text by editing the PAGE DESCRIPTION.

You can change the text in the header under the “Page Description.”

To change the background image, click on the “Media” tab at the top of the menu.

Click on the MEDIA tab (outlined in red) to change the header background.

Click on the MEDIA tab (outlined in red) to change the header background.

Be sure to click SAVE and you’ll see the header update with your new background and text.

Once you customize the header, roll your mouse over the contact form and click EDIT, then roll your mouse over the contact form itself and click the EDIT option.

You’ll see this menu pop up:

Use the options within the red box to customize and add form fields to your contact form.

Use the options within the red box to customize and add form fields to your contact form.

The contact form already contains fields for people to put their name, email, subject and message (which is perfectly fine as it is). If you want to change the fields that are on the contact form, you can do so on this menu (as seen in the picture above).

Now you’ll need to make sure that the form submissions get sent to your email address. To do this, click on the “Storage” tab at the top of the menu and add your email address (as seen in the picture below).

Add your email address so that the form submissions get sent to you.

Add your email address so that the form submissions get sent to you.

Be sure to click APPLY so that your changes are saved.

Adding your social media and streaming links

We’re in the home stretch! By now, your website should look awesome! We created pages for your bio, music, videos, photos and contact. Now it’s time to add some final touches.

Lets start by adding your social media and streaming links.

The template currently has the links in the website footer (which is the section at the very bottom of your website). This is a great place for your links because your footer doesn’t change. It shows up the same on every page which means your links will appear at the bottom of every single page on your website.

Since the template already has the links in the website footer, all you have to do is make sure that you connect all of your social media and streaming links to your site.

To do this, you’ll need to click the arrow in the top left to get out of the PAGES menu and back to the HOME MENU.

On the HOME MENU, click on SETTINGS then click on SOCIAL LINKS.

You will see this:

This is what you will see once you click on SETTINGS - SOCIAL LINKS.

This is what you will see once you click on SETTINGS - SOCIAL LINKS.

Simply copy/paste the links to each of your social networks as well as your streaming links right into that box. Hit ENTER for each link and you will start to see them being added:

Add links to all of your social networks and streaming channels.

Add links to all of your social networks and streaming channels.

Note: If you’re not sure how to find your Apple Music, Spotify and Tidal links are, do a quick google search for “[your artist name] apple music” then “[your artist name] spotify” and so on.

Adding a newsletter subscribe form

Now that you’ve added your social media links, the last step is to add a newsletter subscribe form so that you can collect email addresses from your fans that want to receive updates from you.

Just like your social media and streaming links, your newsletter subscribe form should show up in the footer section of your website so that it shows up at the bottom of every page.

To do this, go back to the HOME menu and click on PAGES once again (go back to where we’ve been designing your site this whole time).

Scroll down to the bottom of your website and roll your mouse over the FOOTER section and click EDIT.

Once you’re able to edit the footer, click the plus sign “+” on the right. This time you’ll want to scroll down until you find the NEWSLETTER option.

Click the NEWSLETTER option (outlined in red) to add your newsletter subscribe form.

Click the NEWSLETTER option (outlined in red) to add your newsletter subscribe form.

Once you click on the newsletter option a new menu will pop up.

Screen Shot 2019-07-06 at 8.52.18 PM.png

Here is where you can change the text that is displayed (under the “title” and “description” fields).

Next, you’ll need to connect your Mailchimp account so that the emails go right into your email list. To do this, click on the STORAGE tab at the top of the menu.

Screen Shot 2019-07-06 at 8.55.47 PM.png

To connect your Mailchimp account, you may need to click on “connect other services” (highlighted in red in the picture above).

Once you do so, you’ll see the rest of the options:

Screen Shot 2019-07-06 at 8.59.59 PM.png

From there, you’ll be able to click on the MAILCHIMP option and Squarespace will prompt you to login to your Mailchimp account.

Don’t forget to click APPLY once you’re done.

ADD MERCH TO YOUR STORE

The current template already has a MERCH page created. You can see it on your site MENU and on the PAGES MENU on the left.

If you do not have any merch just yet, either delete the merch page entirely, or drag and drop the merch page to the NOT LINKED section on the menu (that way it won’t show up on your website).

If you DO have merch that you would like to add, click on MERCH on the menu on the left. You may be asked to “copy page” (since it’s a demo page). Once the page is created officially it’ll take you to this screen:

Screen Shot 2019-07-06 at 9.08.49 PM.png

You’ll see that Squarespace has sample merch in the store. Delete those items by double clicking on them and then clicking DELETE on the screen that pops up:

Screen Shot 2019-07-06 at 9.11.04 PM.png

To add your own products to the store, click on the plus sign “+” in the top right hand corner.

This screen will pop up:

Screen Shot 2019-07-06 at 9.13.12 PM.png

Click on the “Physical” option (since your merch is a physical item that needs to be shipped) and this screen will pop up:

Screen Shot 2019-07-06 at 9.15.10 PM.png

This is where you’ll add the details of your merch item.

Upload a photo of your merch, add a product name and add the price of the item (as seen outlined in red in the photo above).

Next, click on the “options” tab at the top.

Screen Shot 2019-07-06 at 9.18.16 PM.png

Under the “options” tab, upload a thumbnail image and type in a custom URL that your product will be displayed on.

Be sure to click SAVE AND PUBLISH at the bottom right so that your merch item will show up in your store.

If you have more items to add, repeat the above steps for each item.

.

“Extras” (if you want to get fancy)

Delete the “Powered by Squarespace” text in the footer.

Squarespace automatically ads “Powered by Squarespace” text in the footer of their templates. I don’t suggest keeping it there because you want your website to represent your brand only.

To delete this text, simply scroll down to the bottom of your website, roll your mouse over the footer section and click EDIT. Delete the “powered by squarespace” text and either leave it blank, or put “Copyright 2019 [Your artist name].”

Add a Blog/News Section to Your Site

Adding a NEWS section to your website can be great to keep your site visitors in the loop of all of your latest happenings and press.

The NEWS section isn’t a regular page though, it should be a BLOG so that you can add different entries that will all show up on one page.

To add a “blog” to your site, go to the PAGES menu. If you scroll down to the “NOT LINKED section, you’ll see that the BLOG already came with the template. Drag the BLOG up to the MAIN NAVIGATION so that it shows up on your website.

Screen Shot 2019-07-06 at 10.01.24 PM.png

To add your own blog posts, click on BLOG (on the menu). Since this is demo content you’ll most likely be prompted to “COPY PAGE” as seen in the picture below.

Screen Shot 2019-07-06 at 9.29.34 PM.png

Once you click “copy page” you’ll see that Squarespace has already added a few sample blog posts.

Delete those blog posts by scrolling over them and clicking DELETE.

Add your own blog posts by clicking the plus sign “+”

Screen Shot 2019-07-06 at 9.32.17 PM.png

Once you click the plus sign “+” you’ll see this screen pop up:

Screen Shot 2019-07-06 at 9.58.05 PM.png

This is where you’ll add the title of your blog post and the content. Be sure to click SAVE & PUBLISH when you’re done.

Now if you don’t want your BLOG page to be called BLOG, and instead you want to call it NEWS, simply scroll your mouse over the BLOG page on your menu, click the circle icon and change the name from BLOG to NEWS.

Create a Cover Page (aka Landing Page) for Your Latest Release

A landing page is a page that is solely used to market a certain product. Unlike your website, your landing page doesn’t display a full menu. It only contains a product and a button to get that product.

We like to create landing pages to promote albums, singles and music videos (where the “product” is either your song, album or music video).

For example, check out this landing page we designed for South Florida artist, Splash Zanotti’s new “Everyday” music video:

This is the first page people will see when they visit his website.

Site visitors can click the “play” button in the middle of the page and his Youtube video will pop up for them to watch (without taking them off the site).

If they want to stream the song, they can click the “stream” button in the top right corner. If they want to visit the full website (where his bio, photos etc. are located) they can click the “view full site” button. And if they want to follow him on social media they can click on the icons at the top.

Believe it or not, this page took us about 15 minute to create (shoutout to Squarespace for making this such an easy process).

To create your own landing page, visit the HOME menu and click on PAGES (we’re sure you’re used to this by now).

Scroll down to the NOT LINKED section on the left menu and click the plus sign next to it. We’re adding this in the NOT LINKED section because we don’t want it to show up on your main menu. On the pop up, scroll down and click on the “cover page” option (as seen below).

Screen Shot 2019-07-06 at 11.16.06 PM.png

Your new cover page will show up on the menu on the left. Rename it to fit whatever you’re cover page will be promoting (we usually use the song or album title for the name).

Click on the “cover page” on the menu and Squarespace will take you to this screen:

Screen Shot 2019-07-06 at 11.20.06 PM.png

Use the menu items on the left to completely customize the look and feel of your landing page. Start by changing the layout, then add your background, logo, heading, buttons and media.

To make your cover page the first page people see when they visit your website, you’ll need to make it your home page. To do this, simply click the circle icon next to the cover page title. On the menu that pops up, scroll down to the bottom and click the “set as homepage” button. BOOM, you have now made this page your home page.

Screen Shot 2019-07-06 at 11.25.51 PM.png

Create an EPK Page

Adding an EPK (electronic press kit) to your website is great when looking to solidify press for your releases (hyperlink to press series) because it allows you to send out one link with all of your information on it.

For instance, check out this EPK page we created for Splash Zanotti. We used that page to land him some press before he performed at Rolling Loud Festival in Miami.

To create your own EPK page, go to the PAGES menu, scroll down to NOT LINKED and click the plus sign “+” next to it. Add a BLANK PAGE and title it “EPK.”

Add the following to that page:

  • add a press photo at the top

  • add your bio underneath the photo

  • embed your latest releases (album, single or video)

  • embed a video of you performing (if you have one)

  • add your press contact email

Use the Splash Zanotti EPK and this Brian Chinn EPK as examples.

Adjust Your Site Fonts and Colors

If you want to change the fonts and colors used on your website, you can do so by clicking on the DESIGN tab on the HOME menu, then click on SITE STYLES. On that page you’ll see all of the different options that will allow you to customize your site even more.

Add More Sections to Your Home Page

You may want to add other things to your home page such as a music player, some news, a flyer for an upcoming show etc. You can do this by clicking the plus sign “+” under the “welcome” index on the left menu and adding a new page to the index. You can name it as you please and add the content to the section the same way you added content to the rest of your site.

Add a Subscriber “Pop Up”

You already have a newsletter subscribe form in the footer on your website, however if you want to get fancy, you can also add a “pop up” subscribe form that shows up when someone visits your website.

There’s a few options, one being a big pop up in the middle of the screen and the other being a little box that pops up in the corner:

Example of the big subscriber pop up that shows up in the middle of the page.

Example of the big subscriber pop up that shows up in the middle of the page.

Example of the small subscriber pop up that shows up in the corner.

Example of the small subscriber pop up that shows up in the corner.

To add either of these subscriber pop ups. go to the HOME menu and click on MARKETING then PROMOTIONAL POP UP.

From there you’ll be able to customize the look and feel of the pop up.

Add an Announcement Bar

If you have an announcement to make (for instance if you have a merch sale going on) you can add an “announcement bar” that shows up at the top of your site,

It looks like this:

Screen Shot 2019-07-06 at 10.28.39 PM.png

To add this to your site, go to the HOME menu and click on MARKETING then click ANNOUNCEMENT BAR.

Screen Shot 2019-07-06 at 10.42.12 PM.png

Click the drop-down to enable your announcement bar and customize the text in the text box.

Note: This is a premium feature that is only available on business and commerce plans.

making your site live

CONGRATULATIONS! You have now designed your own website! YAY!

Now there’s only a few more final steps we’ll need to take.

It’s time to add your domain name and make your site live for the world to see!

Add Your Domain Name:

To add your own domain name, on the HOME menu click SETTINGS then click DOMAINS. On the next screen, choose “Get A Domain” (if you haven’t bought your domain) or choose “Use A Domain I Own” if you already have a domain name (from a site like GoDaddy, Dreamhost, etc.) and follow the prompts.

Screen Shot 2019-07-06 at 11.30.10 PM.png

Upgrade Your Squarespace Account:

Once your domain is added you’ll need to upgrade your Squarespace account in order to make your site live.

You may already see an announcement bar at the bottom of your site. If you do, click the UPGRADE button.

If you don’t see this, go back to the SETTINGS menu and click on BILLING & ACCOUNT then click on BILLING then UPGRADE.

On the next screen, select the plan of your choice and follow the prompts to add your payment details.

Note: If your site has an online store you will need to choose the COMMERCE plan. If you do not have a merch store, you will need to choose the BUSINESS plan. If you choose the PERSONAL plan you will not be able to utilize all of the features (such as your newsletter subscribe form and merch store).

CONGRATULATIONS, your site is now LIVE!

Challenge

If you haven’t already finalized your website, use this guide to do so.

Be sure to jump in the MBHT Facebook page if you have any questions while designing, and do show us your final site!