—What is an event page?
So in Squarespace we can create this page and then we can go create events for it and they’re listed like this. Now the events can actually show up in different ways. We can have the events listed like you see here. We can have them show in a calendar. There’s a couple ways to do it. Now I’m going to click on one of the events here and it’s going to, kind of like a blog post if you will, it’s going to show you just an excerpt or part of it if you want. And then you’re going to go and see the actual, the full event page if you will. This has a lot of great things.
These are things like let’s add it to a calendar. Let’s go in and let people sign up. Let’s have likes and shares, different things like that. It can also be categorized and organized. And you can see here that I can go back to all events and see them all. So an event page is a great way, very I guess you could say super useful way, for organizing and displaying any upcoming events you may have on your site. If you want to display the events in a different way, within an existing page, this is kind of neat, but you can also create an event page and make it not link so it doesn’t show up in the navigation like you see this one does.
Then you can insert the events in a page using a summary block. That’s pretty cool. We’re going to learn about summary blocks later on when we talk about working with different block types.
—Add an event page and set settings
– Now that you understand what an event page is and what you can use it for, in this video we’ll explore how to create a new event page. After creating an event page, it’s usually best to edit the settings for the page so we’ll also do that. I’ve got my Squarespace site set up here, and this is actually a paid account, this is a professional account. What I did if you want to follow along with what I’m doing, if I go to design here and I go to template, I’ve actually installed the Devlin template, so that’s what I’m working with. You don’t have to install this template if you want to do this, I’m just telling you what I did.
Come to pages here, and I’ve got a bunch of demo content, which is fine, that’s OK. What we’re going to do is we’re going to create a new type of page. If you come to main navigation you click on the plus, you’ll see we’ve got a lot of differnet kinds, and in here you’re also going to see what’s called an events page. Go ahead and click on events. That should create an events page. Go ahead and type in Events for the page name. Now it’s going to take us in and say OK, well here is the events page, this is the start, and if you scroll down there’s nothing in here.
The way an events page works is you simply add events. You come here every time you have a new event. Now what’s an event? It could be anything. It could be a live event, where people need to come someplace to have an event. It could be an event online, for instance. It could be a lot of different things. In order to add events, if you look over here you’re going to see click here to add your first item. This is where we’re going to add events. In this video all I really want to do is I just want to set some settings for the page.
If you come to the gear icon here, click on that, you’ll see typical page settings like navigation title. This is what’s going to show up in the actual navigation. You’ll see page title, that shows up essentially in the page title if you want to at the top of the browser window. Once again we can enable it or not. I’m going to keep this enabled for now, just so that it’s showing in our navigation. If you look, there’s a couple really cool things here that we can set. If you come to default event view and click on this, there’s two methods for showing your events.
You can show them as a list or a listing, and that’s what we saw in the last video, when I showed you what an event page was, or you can show them as a calendar. This is going to show a ginormous calendar out there with the event listed on each of the days that people could click on and then go to the individual event page. This particular template actually has different types of page layouts we can use. We can use a full width, we can use a left or right sidebar. I’m not going to mess with that right now, that’s something that you can explore on your own if you want to.
If you come to description, for SEO purposes, also for some of the templates it will show this information. We want to fill this out. We’re doing a party planning site here, so party planning for all types of events in San Diego, California. You can fill this out as best as you want. Just go in there and add some kind of SEO description, which makes sense, pepper in some keywords in there. Scroll down, you’re going to see the URL slug. This is the URL that’s going to show up in the browser.
You’ll see it right up here where it says events up there. We can change that to be something unique if we want. We can also set a password, we’re not going to do that. We can set a thumbnail image, which typically will take the place of a header. We’re going to do that a little bit later on. We’re actually going to talk about the Getty images down here, and using one of those for our images. Scroll down even further, you’ll see that we can set this as a home page, which we don’t want. We can also go to advanced, if you click on advanced, and if you scroll up you’re going to see that events pages actually can utilize or work with tags and categories.
This is for searching later on by users, filtering, different needs you might have. We’re not going to mess with it right now. Down here, we’re going to, later on in the course, look at injecting code in the header, but for right now we don’t need it so go ahead and click save. And we’ve got our events page. With our event page in place, and the main settings set, which you should be used to by now if you’ve created a whole bunch of pages, we can focus next on adding some events to the page.
—Add events
– An Events Page on your site, is really nothing without at least one event. An event can be almost anything you want, like I discussed before. Most likely something that is informational, or maybe requires people to register for something. In any case, in this video, we’ll add a few events to our Events page. So, with your Events page already created, if you look down here, you’re going to see that we can either click down here to create an event, or click the +; it really doesn’t matter. I’m going to click down here, and it’s going to say, well, let’s edit an event.
So, I’m going to enter an event title here. What we’re going to do is, we’re going to have a Garden Party for instance, and this is going to be one of the events that we’ll have. And, if you look here, you’re going to see when does the event actually occur? You have a Start and an End. Now, it can start and end in the same day, just at different times if you want, or start on one day and end a week later. It doesn’t really matter. If you click on here, you’re going to see a calendar. We can go in and of course your calendar’s going to look different than mine. You can see when I’m recording this essentially. Just pick a date, it doesn’t really matter.
I’m going to say Saturday, something, just pick a Saturday and some month, and we can say instead of 3 pm for instance, it can start at 1 pm, and then if you come over here to end on, if you click on the link, you’re going to see it’s going to automatically put it an hour ahead, which kind of makes sense. We’ll say we’ll end it about 6. It’s going to be a long garden party. Now, we can go in and we can do whatever we want, basically; we can add all different types of blocks. What I’d like to do is, I’d like to start with just a little bit of place-holder text.
So, you can either just type something in, or I’ve got a little text file that you can open up, and this is in the 01 Event page folder. I’m just going to copy a bit of text, and it’s just straight up Lorem Ipsum, and click inside the right here area, right click, paste it and then we can go in and we can do almost anything you want. Now, the great thing about adding an event like this is the fact that we could, if we want to, add a nice little picture, we could go in and insert any kind of block we want.
If you come in and insert a block, you’ll see everything. We can insert a picture, a quote, you can do a video, which could be kind of cool if you’re showing something. You could have a gallery of images, a summary, all kinds of things. The thing I really love doing with this kind of thing, is going in and maybe adding a calendar, or even have something like a form that people could sign up with; a really simple form. So, that’s kind of neat. We’re just going to keep it at text, and leave it really, really simple here, you can do what you want.
If you look down here, you’re going to see that we can have comments on this if we really want to. This is interesting because this really, to me, makes it seem more like a bit of a blog. This is actually a post, and that’s kind of what it’s like. If we want to have comments on, we can, and we can disable comments at a certain time. I don’t really want comments, so if you click on On, turn them off; we can always turn them back on. You can see this is going to be a draft, if you click on Draft, this is just like the blog, you can schedule it for a week out, you can say “Hey, we need to review this”, and somebody needs to go review it; it’s a Draft or it’s Published.
So, leave that alone for right now. If you come up top, you can click on Options, and you’ll see that we can have a little thumb-nail image, which is pretty cool. If you list your events not in the calendar, but as a list, you can actually have this show up as the thumb-nail image, which could be a little bit more interesting, if you will. So, click Add Image, and come out to the Exercise Files folder, and in the 01 Events page folder, you’re going to see just a simple image called Cactus. We’re going to open that up, once again, it’s following the rules, JPEG, GIF or PNG, and then we can go in and do things like, if we want, set a little focal point, maybe make this a little more interesting, edit it, editing with the editing tools, and we’ve got ourselves a thumb-nail image.
If you come here to Author, you’re going to see we could choose a different Author, if we had those set up, which we’re not going to. We could also set a Source URL, which might be the source of this story, where we got the source from, that type of thing. And we can also have an Excerpt. An Excerpt is just like the Blog post. It’s a, I guess you could say, a tease. So, it’s maybe a simplified version or just less of the content, that people can see on the main Events page, and, when they click the link to go to this, they’ll see the full event listing; all of it.
We can also make it a Featured Post. Some templates will flag this and put this typically up in a template, on the main Events page. We’re going to leave all of that alone. Click on Location; you could if you want, to set a location. You could do that; I’m not going to do that. And with Social, we can also tie this to Social, and it’s going to update Social Media as soon as you post this; as soon as it’s actually published. I don’t want to do this, just because this isn’t real. (laughs) If this was real, and I’m creating an event, heck yeah, I want to tie this to Social Media.
But, for right now, I’m going to keep it as-is. Go ahead and click Save and Publish. If you saved it, it would be a Draft. Once you do it, you’re going to see on the left over here, we have all the events we create on the left. You can go back to the Settings for the individual event right here, or delete it if you want. If you want to create a new one, you can always click the +. To test this out, click on the arrow up here, or press Escape; hopefully Escape will work for you, and you can hide a lot of that content. If you scroll down, you’ll see there’s the Garden Party.
Now, this is the Garden Party Event Page. This is not the main Events page. To see the main Events page, what we can do is, we can go back to it. Once you click up here, it should now be in your Nav, somewhere up there. You can click on Events and if you scroll down, you’re going to see there it is, right there. There’s the little thumb-nail we put out there, and what we can do is, we can click all over the place to be able to go to it. But if we click on the title, or the picture, you can go to the main Events Page for the Garden Party.
You can see that there’s some added, extra features, which are kind of neat, the Google Calendar, the ICS Calendar, and the full content for the event itself. Why don’t you press Escape, so that you can see the page over there again as well as the events that we have? What I’d love for you to do is, why don’t you go ahead and try making another event? Click on the +, try your hand at it; you can see a bunch of different events listed. I’m going to go back over to my Example page, here, and just show you for a second. Let me get back over to the pages and get to that Events page.
A bunch of events are going to look something like this. You can even see that we have a Past Events, that are listed separately. But if we wanted to go to each one, we can go to settings, and kind of start to work that way. One great thing about working with events, that I absolutely love, is if you go and click on the arrow in the upper left corner, and click once more, when you see Home there, come to Design, and then come to Style Editor. Typically what I would do, is I would come to the actual content that I want to change the styling for, but in this case it’s going to sort it a little too much.
So, what I’d like you to do, is just simply scroll down, and you should see that this template, this particular template, allows us to do some more things. You’re going to see, I love this; Show Export Links, which are Google Calendar and ICS, show social buttons, these are awesome; Like, Share. I love this one. Show Back Link. This actually goes back to all of the events, which is great. You could have a 24-Hour Time, you could have a Stacked View, which I don’t really like that often, but it’s your call.
Another thing that we can do here, is you’re seeing the actual settings or options for the particular Garden Party Event page. If we want to, we can go out and see all of the settings, if we want to do that. So, why don’t you go ahead and click Save, and you’re going to see that if we try and click on things, it’s going to go out, okay? So, click back out in Design, click on Back to All Events to go back to the main Events page, and scroll down a bit, and you’re going to see there’s the main Garden Party, come back to Style Editor and click on it, and scroll down again; you’re going to see that this time, we actually have a lot of events content we can change.
This template’s got a lot built in. You can do things like, Disable Item Pages if we want, Show Past Events; you can change the thumb-nail to be 4:3 Four Thirds, Widescreen, that kind of thing. We can say, Don’t Show Date; you can do all kinds of things in Date tag: Don’t Show Categories, Show Export Links, here if we want to, Social Buttons here, if we want to, we can say Don’t actually show the Excerpt, which is kind of neat. Show Button, View Event, I kind of like that, I’ve got to be honest.
And then, a couple other things, you can try and set some of these. Once again, you can only take this so far; it is Squarespace, but some of these templates give you a lot of options. I’m going to go ahead and click Save in the upper-left corner, click back on Design to go back out, and we’ve got our Events Page. We’re on the main Events Page. I really love Events Pages, mostly because they remind me of Blog posts in how they appear, The fact that you can tie it into a calendar, or add a sign-up form, or simply using them to display information, makes them really useful to me.
Later on, in the Work with More Block-Type Section, you’ll see how to take the events you created and add them to an existing page, using a Summary Block.
—What is a cover page?
– In this section, you’ll learn all there is to know about cover pages. Cover pages can be used for a simple single-page website or maybe for a coming soon or like a construction page. And they can be the homepage of your site or just a page in your site. I usually use them for a simple one-page event site that just has to have information on it about maybe like where to go, how to sign up. But I have used them to hide the site as I work on it as well. In this video, we’ll take a look at a cover page I’ve created.
So for this video, just sit back. You don’t have to go in and do anything. I just want to show you quickly what a cover page is. This is a cover page. If we go to create a page, we choose the type of page called a cover page, and what it does is it either gives us a single-page website or a way to put a page in the front of your website that doesn’t allow people in unless you choose to let them. These types of cover pages are typically for you know, clicking a button to sign up for something. Maybe stay tuned, our site is coming, etc.
That type of thing. Cover pages are relatively simple. They have layouts that you can change. They also have content like branding and text, a location if you have a map on it. You can have a call to action, something like a button, for instance. And you can go into styling and even, you know, change colors and fonts and do different things like that. We can also go into the template styling in some cases and make some changes to these. Now it all depends on the main template that you’ve chosen here.
Cover pages are awesome. I mean, you’ve seen them all over the place. They could be just a really quick website that, you know, maybe is an event page and that’s it, okay? Or it could be a coming soon, wait for our new site, that type of thing. Like I said earlier, they can be used for all sorts of things. But now that you have an idea of how they work and what we can do with them, the next step is to create one for yourself.
—Insert a cover page
– Now that you have an idea of what a cover page is and how it works, in this video, we’ll jump into creating one and then we’ll set up some main page settings. So let’s get started. Now I’m back in the site that we’ve got here and you can see that I’ve got my advanced page showing. I’m going to click on Pages again if you’re not in there, and what we’re going to do is we’re going to add a cover page. Now, you’re really going to use this if you want to have a really simple site. We may not have all these pages out here, we might just have one cover page, or we might use this, like I said earlier, to make it so that we can have a construction page or a coming soon or something simple like that, that actually looks a lot better than a construction page.
If you come up here and click on the plus, you’ll see Create New Page, Cover Page. Click on that, and we’ve got New Cover Page and we’re just going to call this Cover Page, really simple. I’ll press Enter return and we’ve got it. We’re going to go to it. That’s it, that’s all it takes to make a cover page. It’s actually pretty simple. Now there’s a lot of things to look at in here, which we will jump into, but the first thing I want to go through is just look at the page settings quickly, ’cause for me that’s best practice, get it out of the way.
If you click the gear icon here, go to cover page settings. We can change the Navigation Title, the Page Title, etc. If you scroll down, we also have enabled this template, particular template can have a left sidebar, right sidebar. This page, a cover page, is not meant to have a sidebar. It’s really meant to be just a single page, that’s it. If we want to, for SEO purposes, we can put in a description. Once again, this is best practice, so I would put something like this in here.
Party planners that plan all types of events, you can list the type of events, we can list location, do all kinds of things, in California. I can spell it, I used to live there, California, there we go. You’re going to make your description a little more well, descriptive, than I have here, okay. URL Slug, Password, we can put a thumbnail image if we want. We can set this as the homepage, this is super duper important, if you want to use this as your site, for instance.
If you want this to be your site, just a really simple, one-page site, you are going to set this as a homepage. If you’re going to make it so that this is a construction page, for instance, or a coming soon, we call that, you need to set it as the homepage, so you’re going to do that. I really don’t want to do that because we’re going to use this just as an example, okay. But for right now, I am going to click Set As Homepage, just so we can see it. Click Confirm and you can see if you go to Advanced, you just have Header Code Injection, it’s called.
We’re going to look at that way later on. Go ahead and click Save, and we’ve got it. Now to prove this to you and to myself, what I’m going to do, is I’m going to take this URL and Copy it. I’m going go to another browser like Safari, and I’m just going to Paste it in there, and this is a paid site, which essentially means that I actually have a URL associated with this, but this is what the world is going to see, and if you look, it’s a cover page. It’s dead simple, all right.
There’s not a lot going on and if I make it a little bit smaller, a little bigger, you’ll see we’ve got a few things happening. If I click on View Work, it’s going to take you, like, to the Squarespace website, simply because you need to change the content, okay. But this is the idea behind a coverpage. It’s either the site or it could be an intro for people to get into the site. So I’m going to switch back over to the actual admin area here, and you can see the cover pages are definitely unique. I don’t use them on every site, but when the occasion arises, I am glad they’re there.
With our page set up, and ready to receive our formatting and content, next we’ll edit the layout.
—Add content to a cover page
– When it comes to cover pages, you have some formatting control. And the page actually starts from one of several templates that are specific to cover pages. Now, these are outside of the templates that come with Squarespace. In this video, you’ll pick a template to use and then you’ll add content like contact information and social media to the cover page. If you look at the content down here, you’re going to see what’s called Change Layout. To me, this is the first thing we should discuss and do. If you click on this or the button Change Layout, it’s going to show you a series of layouts that you have.
Now, the layouts are filtered according to what you want to use the cover page for. We actually have a Landing page, okay? We have a Profile. We have a Video that can show up which is kind of neat. And we have Location. If you click on one of these, such as Landing, it’s going to sort the page types by whatever it is, so these are Landing pages, essentially, okay? Now, Landing page can be an introductory, you know, page to the site itself, just something a little more aesthetically pleasing, for instance.
I’m going to click on All Layouts. Why don’t you choose that? And then scroll down and you’ll see all the different types of layouts we have. Now, we can of course edit the content. This is not stuck in place here. But some of these are, actually, really well designed, I think. We’re going to go with one that’s kind of simple. As Party Planners, we’re going to have an office and we’re going to open up some kind of place for people to come, essentially. So we want to announce that as well, so if you come to Flagship here, and you can choose any one you want, but just know, going forward, that your content and things are going to look different.
Click Select, and it’s a little different from the actual, the main templates that we have in Squarespace, where, it’s not really going to preview it, it’s just going to say, Okay, there it is. You’ve got it. Go ahead and click Save, and if you click back on the arrow there in the upper left corner to go back to Cover Page, you can see that we now have this layout. If you scroll down a bit, you can see all the different types of content we now have to set. Let’s start with Branding & Text. Go ahead and click on that, and we can do things like add, you know, text.
You can see right there, it’s, you know, it’s Chy-dale or Chi-dale, or whatever that is. We can also upload a logo if we want to. Once again, logos within the guidelines, JPEG, GIF, or PNG. Let’s just put a little text here. We’re just going to type in Party Planners, something like that. You’re going to see it’s going to do an uppercase for us, automatically, and we also have a headline, if you scroll down. This is kind of like, to me, this is sort of like the heading and the sub-head, okay? That’s your call. We can say something like Site Coming Soon, and you guys got to be careful about doing things like that because, you know, people will never come back.
I mean, that’s something we have to be very careful of. And then we have a body of text, and we can have this if we want, or we can simply delete it. You can do that too, keep it really simple. It’s your call. You also see an option down here for displaying the Social Icons, if we have those. Now, those Social Icons are set up in the main settings for the site itself. All right, well we’ve got our main content here. Not too bad. Go ahead and click Save. Go back to Cover Page, and if you scroll down, you can see Map Location.
Now, I’m going to scroll up so I can see, this is the map right here. Click Map Location, and you can see that it’s just putting a location out there for us. If we want to, we can change this. Let’s come down here and enter a different address. We’re just going to do, like, 6410 Via Real, and I love the fact that it’s actually filtering here. Whoops. There we go. Carpinteria. Nice, United States. Beautiful. There’s our map location, and we can also, if we want to, kind of drag the pin around, change the location a bit, you can do that too.
Go ahead and click on Save, and go back to the Cover Page. Okay, so there’s our Map. If you come to Action here, I’m going to scroll down first, actually, so you can see this. Click on Action, and you’re going to see, we have buttons, if you want, right here. This button is an Action, which means somebody clicks on it, it goes somewhere. We can also have Naviation if we want to. If you click on Navigation, you can say, Hey, let’s go to a URL, and the URL, if I click on this, could actually be content that we have, like pages in our site.
Which is pretty neat. Go back to Button over here, you’re going to see Get Notified. If we really want to, we can get rid of this, okay? I’m actually going to do that. Right now it’s going to Squarespace.com. If you click on the trash can, you can see it’s going to remove the URL, but if you actually select the text and the Button, and delete it, you can see that it’s gone from the page, mostly, okay? Now, we can also add a form. We’re going to do that in a separate little video next, so why don’t you do this first. Go ahead and click on Save, and go back to Cover Page, and down here, we have Style.
Go ahead and click on Style, and you’re going to see, it’s going to take us over to the Styling, which is actually really, pretty cool. You can see a lot of the different things we can do here. If you want to, you can change all kinds of things. I love the fact that we can go into the Map and actually make it, like, light, scroll up a little bit. We can also make it blue. Got a couple different options there, if you want to do that. That’s what I was doing. I was just kind of playing with things. Go ahead and try some things. Try changing the positioning of the content, the coloring, the fonts, do things like that.
And when you’re done, go ahead and click Save. Go back out to Cover Page, and you should see the main formatting, once again. Like I mentioned earlier, it is important to have the right information on a Cover Page. It really is more than just a pretty picture. It can be used as a simple but powerful way to display the right amount of information, depending on the situation. Sometimes, simpler can be better.
—Add a form to a cover page
– On most of the cover pages I create, I add a form for people to sign up and receive news later on. That way, they stay informed as to when the site will be live, or anything else I need to contact them for, obviously related to the business. In this video, we’ll add a simple form to the page so people can be added to our mailing list for later. Now in order to add a form, if you come down here you’re going to see that we have what’s called Action. Go ahead and click on Action, and you probably want to scroll down a bit in the main section out here.
Down here we’re going to see Form. Go ahead and click where it says Button Label and we’ll put some kind of action in there, we’ll say Sign Up or something to that effect. If you click on Edit Form, it’s going to open up the Edit Form little dialogue here, that I always try and move around but it won’t let you. If you look down here you’re going to see Form Name. This is not a demo form, this actually part of my party planners form. So I’m going to call this cover page form. This is just information that will help you to remember what form this is, or where the data’s coming from.
Coming down here, you’re going to see the different form fields. If you want to collect a lot of information you can, clicking on the plus will let you add another type of form field, and you can see all the different types of form fields you can add. Don’t go crazy. Best practice here, just a couple fields. Keep it really dead simple. As a matter of fact, we’re going to get rid of Subject, just click on the trash can here, and Message, and confirm that. We really just want a name and email. Some people actually just say give us your email address, that’s it. You can do that.
You’ve got to think in terms of mobile, because on a mobile form, you don’t want to be sitting there typing forever with these, especially since we’re just going to send them some information, okay. If you click up here on Storage, this is where the rubber meets the road, so to speak. And this is where you can either make it very, I’m not going to say painful, but very manual, or relatively automated. If you come to Email Address here, you can type in an email address, I believe you can type in a series of email addresses, probably comma can separate it.
If I click Connect, it’s going to just make sure that the email address is an actual email address, and say okay, we’re going to email somebody with the data, basically the name and the email address, when somebody fills out the form. That’s awesome. That mean manually I have to go in and send them information or add them to a list, like an email list. If we want to, we can also take that data and send it to Google Docs. I love this. If you have a log in for Google Docs, and you have that kind of account, you can connect it.
I’m going to click on Click to Connect, and I’m already logged in, okay, now it’s probably going to ask you to log in right now. You can see my email address up there. If you are already logged in, which I am because I use Google a lot for a lot of things, I can simply click Connect. Now it’s going to ask me for a spreadsheet here, and you’re going to see, okay, well what spreadsheet name do we want to put in? I’m going to say cover page signups, or something like that. Here we go.
Press enter return, and that should do it for us, okay. Alright, so we’ve got ourselves an email, if we didn’t want the email we could always click on the X, and let’s say that we just wanted the Google Docs here, that could be kinda cool. If you come down here, we can also connect with MailChimp. I’m going to show you exactly what this does, by the way, but if you have a MailChimp account you can connect it. I’m going to click on MailChimp here, and it’s going to say okay, what is your username and password for MailChimp? So they’re going to talk together, and say let’s send the data from Squarespace over to MailChimp.
So I’ll type in my username here, there we go, and I’ll put in my password, and I will log in, and it looks like it connected, that’s cool, there it is right there. What you need to do, is on MailChimp, you actually need to create a list first, okay, because it’s going to ask you to select a list. So if I come to Select List, you’re going see, oh, well, I’ve got one called Party Planners Newsletter, I could select that. I could also go over, and I’ve got MailChimp open out here somewhere, there it is, I could also go out and actually create a list.
So, in MailChimp, after I signed up, and I logged in, if I click on Lists here, you’re going to see, I have a list, I could go over and create a new list, and that way, over there in Squarespace, I could choose it. Now I’ve already got this Party Planners Newsletter, I know this isn’t a newsletter, but I’m going to use this one. So, let me go back over, and I’ll come to Select List and just choose Party Planners Newsletter, there we go, the thing I love about the MailChimp, is that if you have anything set up with that list, for instance, maybe a monthly newsletter go out, or some updating, somehow, something like that, an email to go out, it’s automated.
As soon as somebody signs up, then they’re on that list, and whenever you set up a MailChimp, it’ll just happen. That’s really cool. With Google Docs, if you do this, what’s going to happen, I’ve got Google Docs open out here somewhere, there it is, it’s just going to create a spreadsheet on Google Docs and you can see that I’ve got an example right here and it’s just going to put the information in there. It’s not going to go anywhere at this point. There are things we can do with this, but we have to go in and do it, it’s a little bit more manual.
Alright, there we go. So we can have it going to multiple locations, I’m going to say don’t go to Google Docs, for instance. I just want it to go in and send it to MailChimp. If you click on Advanced in the upper right corner, you can also do things like change the Submit button. Sometimes I don’t like it to say Submit, I could say something like Go, or some action word, or something like that. Down here you also see, there is a Post Submit Message. This essentially means that, if somebody fills out the form, and they click Go to send the data, what’s going to happen is this information right here is going to show up in place of the form.
And I’ll show you in just a minute. So we can say thank you for signing up, we will contact you shortly with new information or something to that effect, okay, that’s your call right there. You can also have HTML that shows up. This is what’s going to show up in addition to the message. So you could put in, anything you want, if you know HTML you can type it in there, okay. Click Save.
We’ve got the form, let’s go ahead and save it up here in the upper left corner, go back to Cover Page, and we’re going to test it out. So what we can do is, you can either press Escape or you can click to arrow in the corner up there, if you come down here you can see Sign Up, I’ll click on that, try it out, you’re going to see it actually covers the whole page with the form. You can then type in something, just to test it out. I’ll just put in my whole thing here, there we go. And there’s our Submit button, Go. And you’re going to see, thanks for signing up, we will contact you shortly with the new information.
You can then click the X, and go back over. So it’s a really simple way to be able to gather information. So after testing out the form, if you’ve set this up, you can then go see where the data is sent, and hopefully understand how powerful this could be just for collecting user information. The form in most cases should be kept really simple, like most data gathering forms on the web today, it’s just a quick way to get them in the pipeline and keep them up to date on any new site info, or offers, or things like that.
So there you have cover pages, simple yet very useful.
—What is an album?
– Another type of page I wanted to introduce you to is an Album page. Album pages allow you to add music in the form of mp3 files or other to your site and possibly even sell that content but not on the album page, or at least the way they set it up. If this sounds like something you might want then an album page is for you. So we’re going to take a tour of an album page I’ve created in just a dummy website here. You can see that under Main Navigation, you’re not going to have this site… I just want you to sit back for a second and kind of watch.
As we create pages… We’ve covered a lot of these types of pages out here but you’re going to see what’s called a Album Page. Now, I’ve already created one and I’m going to scroll down and kind of show you what’s going on here. On an Album Page what we can have is, I guess you could say, literally an album. So you can have things like Play tracks, different tracks if you want to, these are mp3 files that you put out here. Maybe you’re creating a band website or you want to share recordings that you have, it doesn’t have to be a band, obviously. But you can put these up here, and these are mp3 files that people can just play and listen to right here.
This is not for us to necessarily sell these tracks and there’s a lot of other ways to do that, but this is a way for us to take audio files that we have and, specifically, mp3 files and I believe they need to be less than 20MBs in size, which is not that big, and add them here. We can add things like Album Artwork and different content. You can see that there are social media sharing, if we want to do that. But if you come in here and I click on one of these, you’re going to see it’s going to play it and you’ll see we have a countdown. And these are kind of silly audio tracks that we can use to practice with.
These are just taken right from some of the videos that you’ve watched already, so it’s going to be a little boring. This is an Album Page. So, if you want to you can also go and take a look at squarespace.com/tour/band-websites and this is kind of an example of using this type of page and other methods to be able to get your audio out there. And you can see there’s example down here. Now, I’ve opened a few of these and if I come to this one right here, like, as you can see right here, OURS IS CHROME and these may have changed by the time you’re looking at this, but you’ll see that this is pretty much an album page.
You can see it’s got album cover right here, artwork, it’s got a description, etcetera. Over here it actually has a listing of what we can play. So I can go and play it, there we go, sorry about that. You’ll also see… Here’s another example here of… You can see this is called Chance the Rapper and if I scroll down, you’re going to see there’s merchandise to sell. But down here, you’ll actually see that there is SoundCloud content embedded here. Now, using this type of page, an album page, we’re not going to do SoundCloud or other social sharing sites.
We’re going to take files that we have, sound files we have, and put them in the pages. Okay, so hopefully that makes sense. Later on, much later in this course, we are going to talk a bit about embedding content as far as audio files that are maybe shared, maybe a podcast, that type of thing but for right now, we’re going to talk about working with an album page.
—Insert an album page
– Now that you have an idea of what an album page is, and, well sort of how it works, in this video, we’ll jump into creating one, and then set the main page settings. So let’s get started. With your site open, if you come to the Pages on the left over here, you’re going to see that we’ve got a lot of our pages out here, and a lot of this is demo content, because we chose this specific template. We’re going to create a brand new page now. So if you come to the plus here, click on the plus, you’ll see it says Create New Page, and you’re going to see Album.
Go ahead and click to select that, and it will create the album page. We’re just going to keep the name. You can call it whatever you want, obviously, but I’m going to type in Album, press Enter or Return, and it should create the album and jump right into it. Now unfortunately, you’re going to see, we have a rather large header here if you are using the same template, so I’m going to scroll down. It’s kind of annoying, because if the page refreshes, it goes to the top. Anyway, I’ll stop there. When you create an album page, there’s a lot of things we need to do here. We need to do things like add any artwork, which really kind of makes sense.
We want to add any information about it, general information, you want to add the actual tracks to it. But the first thing we want to do is set settings like every other page we set up. So the first thing I’ll do is come in here, it’s a little gear icon, and click Album Settings, and we’ll take a look. A lot of these are not new. If you’ve created any other kind of page before, you’ve seen most of these. I’m not going to take a look at every single one of these options, because we’ve already gone through this a million times. You’re going to see we have what’s called Navigation Title.
That’s what shows up in the Nav. Page Title, you can see right here. This is what shows up, I don’t need to say this, at the top of the browser window. There you go. Do we want to work on it and not have it be enabled? That’s a great way, if you remember, to work on something and not have it be live if the site is already live. We also have, because of this template, or rather with this template, we have different page layouts. You’ll see we have Full Width, Left Sidebar, and Right Sidebar. You’re not always going to see the same things here, because of the template that you’ve got attached.
You can try whatever you want. Go for it. I’m going to leave it as-is. The description, once again, this is meta information. Some templates will display this information, and almost all pages will simply use this for search engines, to be indexed. So as a description, we want to type in something that sort of encapsulates the page. This is best practice. You do want to do these. A lot of us get kind of lazy. I do, too. Our best album to date. You fill it in, okay? Best practice, you want to use keywords.
You want to go in and say, “Let’s do this. “Let’s make it so that if somebody is typing “on these words, what’s going to describe this,” okay? Scroll down here, you’re going to see that we have URL Slug if you want to change that. That’s just what shows up, essentially. You can make it unique here. We can assign a password. We don’t want to do that right now. We can set a thumbnail image, and a lot of times, this will replace the header image up there, if you remember that. We’re not going to touch that. And we can set it as homepage, which I don’t really want to do right now.
I’m going to click Save, so go ahead and click Save. That should save it out there for you, and we’ve got our page set up now, and we’ve got our settings, some pretty simple settings. And you can see that it is now showing up up here. We have Album, and we should be able to go to it. Now just one little thing I want to mention here. As far as an album page is concerned, this can only have one album on it. Now, an album can mean a lot of things to a lot of people, but that means you can only have one set of tracks. Or think of it like an actual CD or album you buy in iTunes, or something like that, where it’s maybe six songs, or 12 songs, or 30 songs, I don’t know, that encapsulate an album.
You can use this how you want, but you cannot have more than one album on an album page. Hopefully that makes sense. You can, if you want to, create this or put this on let’s say an index page for certain templates, but right now with an album page, you can only have one album. I do not need to mention this, but album pages are definitely not something everyone will use for every project, as you can see. I don’t use them at every site, but when the occasion arises, I am glad they are there. And I have used them on a site I used before, putting up MP3 content on lectures that I’ve given.
Not necessarily music, so it can be used for a lot of things. With our page set up, and ready to receive formatting and content, we’re going to add some more of that, we’re also going to add our tracks.
—Add tracks to your album
– With our Album page set up, in this video, we’re going to explore adding album art, information, as well as the actual tracks or MP3 files to our page, so let’s dive in. If you look at the page itself, after you’ve created it, you’re going to see that it shows this big play button. It also shows the word Album, social media sharing and a playlist. These are the different features or parts of an Album page. This big play button right here is your album art, so we can put artwork in here.
If you look, when you hover over, you’re going to see it says Music Album. We can add track, we can edit, and we can work on settings. Now Settings are settings for the page. Edit, if you click on Edit, it’s going to take you over here, which is where we already are and if you click on Add Track, it will let you add an MP3 track. Now the first thing we’re going to is add Album Art. So come over to the left here and click Add Album Art and you could see within the Album folder here within your Exercise Files folder, I have a desk picture. Click Open for that.
Once again, we’re going to follow the rules, JPEG, GIF, PNG, that type of imagery. You might want to crop it depending on how you want it to look because it’s going to be a little bit more… I guess it can be kind of square, so you’ll see once it’s done here, it should put it out there. If you don’t see it, you can always refresh the page. We do need to save as well once it’s done processing here. Okay, there we go. I’m going to go ahead and save. I do that just… You don’t have to right now, but I’m going to refresh, if you refresh the page, and then scroll down once it refreshes and you should see that it should show up out there if I scroll down. There we go.
Okay, now the next thing we can do with that, add a little bit of album information. This is just like the name and the album and the artist. So I’m going to type in and this could be anything you want. Honestly, it doesn’t have to be an album. I’ve used this before, like I said, for lecture files, things that I’ve taught. The Best of Us. So just come up with something. And you’re going to see how it structures it here. So if you want to see how it works, you can hit Save, you can refresh the page, go through that process, and it should do it.
Should be refreshing here. It’s not for me, but… There we go, you can see. We’ve got our headline. We’ve got our “by” line, if you will, our “by.” And then you’ve got social media sharing and you can see the playlist is empty. The next thing we need to do, if you scroll down, is to add a little description and then we can add some tracks. Now the description is going to fill up this whole area here. Now what’s interesting is yours may look different than mine because at a smaller screen, because I’m showing it this way with the editing capabilities on the left, it’s going to move things.
If you were to hit Escape or press the little arrow up here in the corner just to see the whole thing, you’d see it’s going to switch. The playlist are all the… I guess you can say audio content, it’s going to show up here as a list. And then down here is where all the information is going to be. So it switches depending on size. You can also view this, if you come up top, on a tablet and phone if you want to do that just to see what it looks like, but if you come to Description here, we’re going to describe what this is about. Once again, this can be used for search engine optimization, for helping you out and also to describe what it is.
I’m not going to be prolific here, so I’m just going to type something in. “This album constitutes “the best release we’ve had,” if we don’t say it to ourselves, “had to this point.” You can say different things, like where it’s for sale, when it came on, et cetera, there’s a lot of things you can do there. You can put links, a lot of information you can do out there. You could say, “Hey, go buy this on,” wherever you have it, that type of thing.
There’s a lot of information we can put in there. You can also paste in text if you want to bring that description from somewhere else. Down here is where we’re going to add the tracks and this is sort of where the rubber meets the road. Now to add tracks, we can click on Add Tracks here. So we can click on Add Tracks. You can also drag them in there if you want to. So if you’re on your desktop, you should be able to grab an MP3 file. That’s the key. If it’s not too big, drag it right in your browser window, drag it onto Add Tracks over there and add it. Now I’ve got three here that I want to add.
So if you go into the 03_Album folder in the Exercise Files folder, you should see I have three MP3 files. Click Open and it’s going to think about them for a minute and it’s going to add them as tracks. Now the tracks themselves, it’s going to pull from the metadata saved within the MP3 file. So if it finds things like title and artist and these different types of information, it will display it or put it out there. If it doesn’t find it, it’s not going to put it out there. You’re going to see Unknown Artist. We can change some of these if we want to and you’re going to see that it’s refreshing over here to the right and there it goes.
There they are right there. Now if you want to try it out, you can. You can either click play up here on the actual picture to play the entire thing starting from the first or you can come to one of these and click to play it and you’re going to see it’s going to highlight it and say okay. There’s pause. You’re going to see it’s got a track right here. I’m going to click Pause, and there we go. It’s actually kind of cool. There’s some cool things you can do with this. Now you’ll notice that there’s no selling here. There’s no sales buttons, anything like that. It’s a way for us to get this information out there.
Now I know you’re probably going to be asking, “Well, can I have other audio files? “What about my iTunes content? “What about this? What about that?” You got to be careful because this is stuff that people are going to be able to access on your site and you know, some people can get it if they want to. I know that if you go to iTunes, you can go into the iTunes folder, in the actual folder on your hard drive, and find the iTunes media files and bring those in here by dragging in or selecting them, but you have to be careful. You have to decide what you want to display or put in your website within reason.
Okay, so we’ve got our tracks differently set. The next thing we’re going to do is we’re going to go through and talk about how to work with these different tracks and what we can do as far as setting up some settings for them.
—Set track settings and more
– With our tracks in place, I wanted to go over some of the features or things that we can do to the tracks as far as setting up metadata and settings and even ordering them and also set a few design settings for the Album Page itself, so that’s what we’re going to do in this video. If you look at the tracks here that I already have and hopefully you have been along, and you have some out there, you’ll see that we can, if we want to, delete them with this little trashcan here. You can also click and drag to reorder pretty simply, kind of like layers in Photoshop or Illustrator or InDesign, and you’ll see that they will play out there.
There you go in the right order. You can also come to the tracks on the left over here and click, and you’ll see this rather large dialog box, which talks about, “Okay here’s what we can do.” Now this is the actual audio file right here. You can add some metadata or information about this if you want to. Some of this information was captured from the mp3 file and brought in with it. Okay, it’s metadata, but we can change it if we want to, so you can add Artist Name. We can say, “This is Brian Wood.” We can add a different title for the song itself.
I can say, “Make it a little bit more user friendly, “Create Cover Pages” and then add a little bit of description here. Now you’re going to see that in some templates, some of this content won’t show up, so you might spin your wheels on this a little bit. It will, a lot of times, put it in as information in the background, if you will, in the code, so it probably wouldn’t hurt, let’s say for SEO, but it will not show up in certain templates. I believe that it doesn’t show up in this one. So we could type in something like, “In this audio file, “we discuss how to create a cover “page in Squarespace.” You hopefully get the idea here.
You can, if you want to, link out, which is kind of cool to maybe a place to actually sell this, maybe to a place to buy content, et cetera, buy T-shirts, whatever you want to do. You’ll see down here that it’s kind of weird, but this is actually using sort of like the blogging template. It’s telling you that you can apply TAGS and CATEGORIES, which could be useful for searching. You can also apply Comments. But honestly, Comments are not enabled for these, which is weird because it says Comments On, but that’s the way it works.
If you look up here under Options, go and click on Options, there’s the Post URL itself. That’s the actual track information. If you want to change that, you can. This could be a custom URL for you. You can change the Author. If you have other Authors associated with your site, this is something you’re going to do in the settings. You could also have a Source URL, maybe from where this originally came from and some kind of Excerpt, but you’re going to find in this template, not a lot of this will show up, so you have to try some of this, if you want to try it, and see if it actually appears.
Doesn’t always appear, okay. We have a Location we can set. This is not going to show up. It shouldn’t show up really in this template, I believe. And then we have SOCIAL. If you want to make it to where as soon as you post an item or add a track, that type of thing, it can set it to maybe send out a tweet, okay, so I’m going to keep it off for right now because this is fake, so (chuckles) I’ll click SAVE. Go ahead and click SAVE. And it should save that content. I’ll scroll down a bit. And you’ll see, there we go. There’s the author right there or well the person who created this, the artist.
And you can see there’s the name. If I press escape or hit the arrow and take a look, you’ll see that it’s going to show up, but the description really isn’t showing in this template, and that’s fine. Now I’m going to try and refresh the page just to make sure here. So sometimes you’ll find that when you save, if you go back, let me actually go back here, if you save, it should refresh the page for us. There we go. There’s the actual description. But if it does not, you can always go in and refresh. If you want to do that, try that. So I’ll take a look and see, make sure.
Scroll down. There we go. There’s the description, and we got it. Now last thing I wanted to mention here as far as working with these, for Album Pages, depending on the template you’re using, you can set some options for the design. Come up to the upper left here, click on the arrow to go back. Back to home again and come to DESIGN. And then if you come to Style Editor, you can scroll down or you can try and click on let’s say the album area here. And if I scroll down a bit, you’re going to see what are called ALBUM OPTIONS.
Now hopefully we have all the options design-wise that we can see. You’re going to see that we can change the Album Text Color. You can also Hide the Share Link if you want. There’s not a lot going on here. There’s not a lot we can do. But depending on the template, this one is a commerce template, this is not a music-specific template or an album-specific template if you will, there might be more options here for you to check out. I’m going to click SAVE, but I really didn’t do anything. Go back to DESIGN, and we’ve got ourselves our Album Page. There are several methods for adding music and audio content to your site these days from iTunes to SoundCloud to podcasts.
Artists have a lot of options. Using the Album Page is a simple way to get your music heard or to get your audio files out there. Later you’ll learn more about how to add audio, like a podcast or even music from SoundCloud for instance.
—Sell Amazon products
– There are several ways to be able to sell on your Squarespace site. In this section, we’re going to explore those methods. Now, I always like to attack a low-hanging fruit when it comes to a feature, and selling is no exception. There are a lot of methods for selling goods and services on the web these days, and, lots of the sites that take care of most of the transaction part for you, like Amazon, make it easy. In this video, as a matter of fact, I want to show you how to add products from Amazon for sale on your site. I have a quick example here from a site that I just mocked up just really quickly.
You won’t have this, but I wanted to show you, so this is a Squarespace site, and you can see I’ve got some Amazon products that are just simply pulled from Amazon into our site. Now, we can make it either purely informational, so you can make it so that people click and go to Amazon to the product, or, if you look right here, if I go back rather, you’re going to see, we can add things like a button for buying, so we can add a button for buying on Amazon. There’s a couple ways we can do this. So let me go back over to our site. With your site, why don’t you go to Pages, and if you’ve been following along, you’ve probably got most of the pages that I have.
If you don’t, you can just go to a Squarespace site and just pick a page and do this. I’ll click on Welcome and you can see, I’ve got some content set here already. Go ahead and scroll down. And you’re going to see, there’s a bunch of stuff in this template already there. We’re going to get rid of some of it, and replace it with the Amazon content. So if you come in here to Page Content, you should see the little button here that says Edit. Go ahead and click on that. And it’s going to allow us to edit all this stuff, so, what I want to do is I want to take something like this Gallery Block here and delete it.
We can drag it to the trash can or just remove it, and we’re going to add, towards the top here, something from Amazon. So we’re going to insert, so go ahead and click on the little Insert point here, and you’re going to see that we’ve got a lot of things to deal with that we could use. Scroll down, and you’ll see that we’ve got our Commerce section. Now, there are three different types of Commerce we can work with using this method, using this insertion method. We have a Product, which is full on commerce. That’s like, kind of like a shopping cart you can use, and we’re going to look at that in just a little while.
You have Amazon. And then we have a Donation. Donation’s really pretty cool. We’re going to look at that later too, but, let’s start with Amazon, so go ahead and click on Amazon, and it’s really simple here. All it’s going to do is say, Well, what’s the product? We can search, and this is kind of weird, but we’re going to search on something. So, like, I’m going to search on picnic table cloth, or something like that. Picnic table cloth, and there you go, you got a bunch of stuff here. We can search on numbers, you know, all kinds of things, and I’ll say, Yeah, let’s grab this blue one.
You’re probably going to have a different listing, and that’s fine. But here you go. It just pulled the product from Amazon, if I scroll down, it’s got the name, it’s got the product, all the information that we’ve got set by default. We can, if we want to, then go in and align left, center, right. It’s going to align the content beneath. I’ll keep it at Left. We can have it not show an image if you just want a listing, for instance, if you want a listing of things. We can have it not show a title or author. We can have it show a price and add a Buy button.
Now, obviously, if I have something like this, it might just be informational. Say, hey, this might be good, might want to go take a look at it. Maybe I’m not telling them that they need to buy this, but if we want to, we can show an actual price, and you can say, Add a Buy Button, and that’s pretty much it. I’m going to click on Save, and you’re going to see, it’s pretty much full width here. If we want to, we can insert another Amazon Block. We can add a Spacer. As a matter of fact, if I click on the Insert button here, you’re going to see that I can scroll down a bit and find a Spacer.
So we could use a Spacer here, and I could just drag the Spacer maybe to the right or to the left, and we could use that Spacer to make it smaller, to make it bigger, see what I’m doing here. If you decide you want to add text in there, you can do that. If you want to put this as a side or however you want to work it, this Amazon Block is ready to go. Once we’re done, I can click Save, we’ve got it. You can then test it out if you want. You can either click on the product, the title, or click on Buy on Amazon, and you’re going to see right here. Let’s add the item.
I mean, that’s pretty easy. Adding Amazon products for sale on your site, or even just information, is pretty straight forward, although there aren’t a ton of options as we can see for you to set. In the next video, I want to take it just a step further, and show you how to add an Amazon Associate tag for Amazon commissions, if you want to do that.
—Add an Amazon Associate tag
– Squarespace offers a pretty easy way to set up your own, I guess you could call it, shopping cart, complete with products which could be physical, digital, or even a service that you set up, a payment processor called Stripe that’s easy to integrate taxes, shipping, and setting up emails, returns, pretty much everything you need to sell products. In this video, we’re just going to take a tour through the commerce set up and even purchase something to show you a bit of the process here.
So I’ve got a site set up that’s a dummy site once again. You’re not going to have this, I just want to show you what the process might look like and it’s really simple for what I have set up here. I only have one single product set up. You can imagine a bunch if you will. If you look down here you’ll see the honor site, we can have a shopping page. Okay, this is our shop page, and I can see either a listing of products or a single product. I can click on a product. It’s going to take me to the actual product page and we can see more information about that product.
A lot of things we can do here. We can set pricing and variants, and descriptions, and all kinds of stuff. You can see all the different pictures available here. And if I decide I’m like, eh, let’s buy this. I can add it to cart. it’s going to take me through the process here. Now, I set this up, I said, “You know what? “I’m going to capture a little bit more information from this user.” This is not going to show up by default. I can add it to cart, and you’re going to see that this is going to stay in their cart, okay, and they can go and surf the rest of the site if they want to, go take a look at stuff and the cart is always going to be there, just like any other site.
So if I come out here and say, “Oh okay, well let me go to the cart now, I’m ready to buy.” And I scroll down, it says, okay, there’s a shopping cart. I can adjust the quantity, I can change it, delete it, get more details, etcetera. I’ll click Checkout. You’re going to see, notice up here, it’s actually HTTPS which is secure, okay. So if I take a look up here and take a look at the connection, you’re going to see that is a secure connection, which is good, that’s what we need. And this is all done through Squarespace, you don’t do that, it just does it for you. Now, this is not a live site, meaning it’s not a live test site we can test by using fake credit cards, which is really, really helpful because you’re going to screw this up.
And then I can go in and set up something like a shipping address and say, buh-duh-buh, something, something, and just pick some kind of city. I’m faking this to test this out, that’s all. Bam, okay, you can see right there, I’m going to continue, and you can see delivery, billing, etcetera. It’s going to keep going here. We can set up things like delivery options if we want, something like shipping so we can have it set up based on parameters we decide. I’ll click Continue. I can do billing and say, “All right, I’m doing a fake sale.
“‘l’ll show you guys how to set this up.” You get to fake credit card, submit the order. And notice this is all secure. It’s all doing it through Squarespace. We don’t have to touch anything. It’s really easy to set up and the order is now confirmed. There it is, so that’s what the end user is going to see. What they’re also going to see is this. They’re going to get an email. This is mine to Gmail, its says, hey, here’s your thing you got, blah, blah blah. Here’s contact information, typically the things you’re going to see, okay. Now, let me take a look on the back end here and see what we’ve got.
So that’s what the end user’s going to see, but for us, what we’re going to do is, we’re actually going to go to the Commerce section of our site, when we login. And we’re going to start with what’s called Getting Started. So if I click on Getting Started, it’s going to take you through using a guide the process to sell things. What’s cool about Squarespace, what I think is very useful and very easy, is that we can act with something called Stripes. Stripe is used to be the payment processor, so we don’t have to deal with any of that. You do have to pay a percentage and a fee, that type of thing, per sale, and I’ll talk to you about that a little bit later on, but there’s a ton of flexibility with this.
It keeps it really simple for us. We can make it go live, we can pull it back. There’s a lot of ways to find information about it, helpful articles, you can see right here, a lot of things to do. But I wanted to show you, quickly, just what commerce was and where we’re going to go to set it up. Now lastly, you can if you want to go to squarespace.com/home/commerce and it’s the navigation but, and you’ll get an overview of commerce, what’s there, what’s available, etcetera.
And they’ll even show you that there are transaction fees through Stripe. This is what they charge us currently. If I scroll down though, I wanted to point out a couple things. First, the big thing, you can only sell one product but you can accept donations on a personal site. If you want to sell more than one product, you got to bump it up. This is per month cost, right. So you got to do that and that’s built annually and you guys can figure that out, but that is one of the big things that I wanted to mention. The other thing I did want to mention is that some of the templates, I don’t know if they have it up here.
Whatever, some of the templates are actually built for shopping. So they make it look better, more options, that type of thing. But know that you can make products and insert them in pretty much any of the templates. It just may not look as cool, okay. Not as many options, I’ll say that. So if you’re ready to step into Commerce, as you can see, Squarespace makes it pretty easy to do. Next, we’re going to take the first step on our way to selling and set up what’s called a products page.
—Set up a Product Page
If you’re ready to sell, there are a few things you need to do, in order to get started. The order in which you do these things, mostly doesn’t matter. In my process, one of the first things I do, is set up the page we’re going to use and products to sell, then work my way to setting up the back-end stuff, like Stripe, the payment processor, taxes, shipping, etc. Your method might be a little different, and that’s okay. I do want to show you how to get started and where to go, to get it going. In your site, if you come back out to the main section here, you’re going to see Commerce.
Click on that, and you’ll see Getting Started 0 of 4. This is important. That 0 of 4 is going to tell you that you have completed x number of steps in this guide. So, it’s actually going to give you a guide, which I think is great. It’s going to say, okay, we have Squarespace Commerce, that’s great, you can use Stripe, as a payment processor, It may not work in every country. That’s something you have to consider before you jump into this, so you might want to go to Stripe and see what’s available.
You need to add products, create shipping, and then connect the Stripe account to do the processing for the payments, and flip it to go live, and you’re pretty much done. This is a dead-simple overview. The first thing we’re going to do, is we’re going to add products, but I want to go through and we’re going to create a page to put them on. You can create products, and insert them in an existing page if you want to do that, using one of the widgets. But, we’re going to go through and create a page. So, go back out, one more time, come to pages, come to the + up here and click on that to add a page, and you’ll see that we have Products.
Click on that, and it’s going to add a Products page. We’re just going to call it Products; imagine that. You can call it whatever you want. Press Enter or Return to accept; it should create the page and bring us in. If you look here, you’re going to see okay, it’s using the template, if I scroll down, nothing. Down here, out in the main section where we’ve got content or we should have content, you will see Add Product, Manage Products, and settings. This is the same for most of the things we’re doing here, as far as pages. Add Product is going to do just what it sounds like.
It’s going to allow you to add a book you’re selling, or a service you want to sell; that type of thing. Manage Products is going to take you right over here and let you see all the products you’ve already created, and over here in Settings, it’s going to do just what every other page type does and bring you to the page settings, essentially. So, we can either click the Gear icon, or we can click on Settings over there. Why don’t you click on the gear up here, where it says Product Settings, and let’s take a look. Nothing new here, really, Navigation title which shows up in the Nav, we have the Page Title, which shows up in a bar up top; you can see right up there in the tab, typically.
You can make it so it’s not enabled to start with, that way you can build it and it’s not in your site, now this is if your site is already live. This is key, you’ve got to watch that. You can add page layouts depending on the template; we can have a little side-bar on the left or the right. Not all templates are going to have Page Layout options. That doesn’t really matter right now. Description; we want to make sure that we put in for SEO for search engines. We want to put in information here. We want to put in something that we’re going to do. Party Planner, Inc. products for sale, which include…
and you can go in and you can give descriptive information etc., etc., but your job is to try and describe what this page is for, what it does, what people are going to get out of it. You’re going to try and use some key words, and do that to everything. This is best practice, okay? URL Slug, Password, Thumbnail Image to change the header if we want, we can do that. Much later, we’re going to learn about how to go to Get Images and grab an image. We can do that and buy it; we can do that, too. Click save; and we’ve got ourselves our Product Page. That’s pretty much it. Okay.
We’re ready to go, we’re ready to receive. A Products Page is one of the first steps in the selling setup, but a step that you need to do, nonetheless, if you want to have a page devoted to products. Next, you’ll start to add products and see how that’s done.
—Add a product
– Of course, if you want to sell something, you need to have a product, right? Well that product, in the case of Squarespace, can be a physical product like a book, a digital product, maybe like a pdf download or a zip file, or even a service like a training class or consulting like I do. I’m going to take this time to show you how to create a product that you can then sell. So with our product’s page created, you’re going to see that we can start to add products to it. Now what’s interesting about adding products is that we can add products in different places, but you have to create a products page per say in order to create and use products.
Ok, I know that sounds kind of weird. What I’m trying to say is that we can have a products page that specifically lists all the products we want to sell. We can also use a products block to insert in another page, but you have to create a products page first. You can just not link to it if you don’t want to show the products page, but you have to create one, ok? To create a product, come over to the left and click on the plus. You’re going to see what kind of product type. You can do a physical, a digital, or a service.
We’re going to do a physical product just because I want to show you shipping. Digital is going to be a little bit more because it includes a link and a service as well. Click “physical,” and no matter what kind of product we create, we’re going to come to these options. The options are going to vary just a little bit depending on the type of product. First thing we’re going to do is add a product name. So with your cursor in the product name here, we’re going to add something. So we want to make sure we’re very descriptive here so the people know what we’re talking about, so we’re going to put in some information.
Touch screen computer, whoops, touch screen computer, if you, think about this, if you’re selling on eBay or something like that, you want to put as descriptive a title in here as you can, maybe the size, maybe the processor speed, things like that. But this is our site, so I’m going to keep it a little simpler than that. We can input a description down here, and a lot of times I will grab a description from the manufacturer, or if it’s your own product like a book you’re selling or something like that, you can obviously write what you want.
The HP Envy is a touch screen full size computer complete with… I’m not going to write everything here. Ok, complete with… and then we can put a bullet list if we want to and put in different product listings, features, processor speeds, things like that. Information about the product, because this is going to show up as a description, and descriptions can be very helpful for people. We can put linking to maybe the manufacturer or other locations: blogs, whatever we’d like, paste in information, et cetera.
We can also add images. So if I click “upload images” here, we can go into the exercise files folder, the 04_SellStuff folder, and we can select a series of images. We can put a bunch in here if we want. They’re going to follow the rules, jpeg, gif, or png, and you’ll see how crops and sets them up so you can change them to match what you want. The great thing about these images is when you click on one of them, it’s going to show as a light box. So they’re going to get bigger. People can see these a lot easier. We can also come in and set up pricing. Pricing is really important, obviously, because we want to tell people what it costs.
We want to get it the right way. We could if we want to right here, click on pricing and variants, it’ll take us over to pricing and variants. Now pricing and variants for a physical product is going to be a little bit different possibly from other products because a physical product has dimensions. It’s got shipping, it’s got possibly different sizes and weights and colors and things like that. If we have something like a digital product, it’s probably going to be like a pdf or a zip file or something that people are going to download, and we’re going to put maybe a price on it if it’s something like a, something you’re selling as far as like a custom training, or something like that.
That could also have what are called variants to it, but physical products have a little more. If you look in here, every time you have something that’s represent out here as a product, we can use what are called variants. A variant could be something like, we sell t-shirts, and we have a small, medium and large. That’s three variants right there. So we’re going to give different prices, numbers in stock, possibly weight and dimensions if it’s going to effect shipping, and you can always come to this little question mark here and see, “Alright, this is calculated for shipping,” which is kind of cool actually, and we can add additional options such as size, color, things like that, if we wish.
Come into pricing here, and we’re going to sell a computer, so it’s going to be pretty easy. Price: $800, you can say it’s on sale for $799. Ok, that’s ridiculous. $740, I don’t know, whatever. You could put it on sale later on if you realize it’s not selling, you could put it on sale now, it’s your call. I’m going to put it on sale, why not? We can say we have x number in stock. Or it’s unlimited, think of a digital download. We can make it unlimited. I’m going to say there’s only one. That way if somebody tries to purchase it after this one sells, it’s going to tell that consumer, that person, “Hey, we’re out of stock.” Weight. We want to make sure we do this because when we go to sell this and somebody goes to buy it, it’s going to calculate the shipping cost for us or at least get us a rough estimate.
And then we could set dimensions because this is actually a box. Alright, so I’m going to say it’s this, this, and this. And I’m just putting in, you can see there’s inches and pounds, we can change some of these measurement units, and I’ll show you that a little bit later on. And if you look up here, you can see there’s a plus, and if you click on the plus, we could add different options. Like I said, if you look right here, actually: color, size, style, material, et cetera. You could say an option is size, and then it’s going to ask you what the option value is. We could say, “small,” so I could put in, I’m going to, you know, get rid of this, I’ll show you.
So size, you don’t have to type this, save option, and then we could some in, say, “small.” That is one variant. Ok, that’s one variant on this single product. If we want to create a medium then, we’d go down here, click on the plus, and we’d basically reproduce this, and we can say, “medium.” There’s another product variant. Hopefully that makes sense. Some of you are probably thinking, “Well, ok, I’m selling t-shirts, I’ve got six colors, four sizes of each, how many product variants do I have to create?” You’re going to have to create about a million, ok? There’s no automated way to do this, unfortunately.
Some cart systems will make this easier on you, but in here, you got to go through the pain, so… I’m going to delete this. You can delete a variant if you want. We’re only selling computers, so we’re keeping it simple. If I want to delete an option, I can click on the option here, and it’s going to say we can save it or remove it. I’m going to remove it. Are you sure? Yes. There we go. We got it. We got our pricing down, that’s good. Now we can go over to additional info, and you an start to add some additional information such as a longer description, maybe video or other content.
I actually like this because sometimes what I’ll do is I’ll put in some video content or something like that. Maybe, you know, paste a YouTube video, at least a link to one, and that way people can go and look and maybe see the thing in action or see it on someone. Maybe its a t-shirt. They can see what’s going on. So this is a little bit of additional info that we can put in there. Let’s just type in something like, just so you can see where it shows up, “This touch screen computer has the power to work seam…” Why am I doing that? “Work easily with graphics and video,” and I love the fact that it has spell check and video production, there we go.
Now you’re going to see where this goes. So we’re just putting in a little bit of information there. If you click on “form” up here, we can also make it to where if somebody says, “Alright, I’m going to buy this thing.” They click the buy button, this form will come up. You can collect a little bit of information from them. I don’t want to create one of these, I just want to show you this. But I I click “create new form,” you’ll see new form. I can call it something like “additional info.” We’re not going to keep this, I just wanted to show you this… “additional info” And if you look right here at “manage form fields,” I’ll click on the plus, you can do things like, “Hey, if you’re going to buy this, I’m going to find out maybe, are you interested in something else?” We could actually ask them a few questions, you know, just something, this is really simple.
It’s a very simple form. You could say, “Hey, here’s a survey.” You could say, “Let’s see your… what’s your email address? I want to be able to send you additional information. What’s your phone number?” That type of thing. If you click on, let’s say, currency or something, you can ask a lot of questions here. I clicked survey, I love this. You could see right here that there’s a form that you can set up. You can set up a description, you can set up options, you can say, “Do you like computers?” That’s really dumb, but… and then you could say option one yes or no and, you know, that type of thing.
So let’s just quickly do this here. We’re going to ask a couple of survey questions here. So I’ll type in something like, “Help us help you.” Wow, that’s lame. Alright, help us help you. You can do something like this. “Our customer service is awesome.” And you could say, “strongly agree, disagree,” etc. etc. Come down here and you could say, “We really need picnic supplies.” Ok, so you can see what’s happening here.
And we can do things like this. You can actually come in and say, “You know what? I want to get rid of this one.” And it would just have one. So we can have a survey that has, you know, multiple things in it every time we hit a return. Go ahead and save it. It should save it in there, and you’re going to see there’s the additional info. We can edit it, we can delete it if we want to. Come to options here, and you’re going to see that we can do some different things here. We have a thumbnail image that we can do things like edit it, we can set focus on it, these are all things that you probably know how to do already.
We can set what’s called a product URL if we want to. This is something that… it’s a custom URL, so if you don’t want it to be some random string of numbers and letters, you can go in and put something real, like you know, HP computer, something like that to make it more readable as a human. You can also use a custom add button label, and if you do that, instead of saying “add to cart,” you can type in whatever you want, that’s your call. And some templates will feature products. So if you have a series of products, you could click on “feature product,” and I like this because it’ll actually take the feature product in some templates and stick it up in a header.
So it’ll say, “Hey, look. This is the one that’s featured.” I’m not going to do that. We only have one product. And then if you go to “social,” if you have any connected social accounts, which you may or may not, you may not see anything here, you could say, “Hey, as soon as I post this, go out to Twitter, go out to, you know, any social site, and post it for me.” Telling the world, “I got this product.” I don’t want to do that because this is not real. I’m going to click “save and publish,” so go ahead and do that. And we’ve got ourselves our product. Scroll down, you’ll see.
There it is right there. Now we are on the product page, ok? Meaning we’re on this specific page for this product. If you look right here up in the URL, that’s where we are. If you go back to the actual products page, the main products page, by clicking up there in the nav, you’ll see that it’s listed right there. So once you click on it, it goes to the actual product page with all the information and shows you what’s going on You’ll see the thumbnails, if you click on those it’ll actually go and change them. If you click on the big picture, it’ll bring it out as a light box, which is really great.
There we go. We’ve got ourselves a product. Now you can see over here that the product is listed. We can go back to the settings and edit those. We can delete the product if we want. One thing I need to mention here, and we already said this earlier in a previous video, if you are on a free trial, or if you’re on the eight dollar a month plan, you can only add one product. Wow. I just said that, right? If I click on the plus, it’s going to say, “select product type,” physical, et cetera, I’ll say, “physical.” Now for me, it’s, if you look right here, I’m on a paid plan. I’m going to cancel this.
So it’s going to let me do it. If I was on a free one, let me go back over to the free site that I had, and I’ll go back to my pages and my products page. Go back to shop, and I’ll add another one here. You can see I already have one product, this is a free trial. It’s gonna say, “Whoop. You can do that because you’re on a free trial.” You gotta be on something else, ok? A business plan, etc. The site I’m working on is actually a business plan, so that’s why it’s letting me do this. Now one thing I do want you to remember about products is that you can create or edit them at any time.
As you see, they’re pretty easy to set up except when you get fancy, maybe like a lot of options you’re setting up like sizing and color for t-shirts. Then it can be a bit cumbersome and a little overwhelming actually, but with our products set up, I want to go through and connect the cart or connect the actual selling here. With our products set up, what I want to do now is set up some shipping options, and then we’re going to set up what’s called the payment processor.
—Set shipping options
– If you sell a physical product on Squarespace, you’re going to need to insure that it shipped properly to your customers, obviously. Squarespace has a few ways to make shipping a little bit easier by collecting a shipping fee that’s calculated. Or using a service I’ll show you. You still have to ship the product yourself in a lot of cases, but in this video we’ll take a look at some of those shipping options. With your product page set up, and with at least one product set up, and I’ve created a physical product rather than a digital product or a service.
Go back out in the upper left corner there. Click on the arrow a couple times, and come to commerce again, and you’ll see getting started. Now, we will see shipping down here. It’s going to take us basically to the same place. Click on getting started. You’re gonna see, okay, we’ve added a product, now we need to create a shipping option even just so we can test. If you are not selling a physical product, you can skip this. So we can click on skip. If you are selling a physical product, go ahead and click on create a shipping option. And it’ll take in. Now, as far as shipping options are concerned, we need to decide what to do.
If we’re gonna ship it via Fedex, or UPS, or USPS, or however you want to do it, and where you want to ship to, you need to decide that. So you can set up manual shipping options, it’s called. You can also set up shipping automation, but if you look right here, don’t click, you’re going to see you need to have a commerce plan to do this. If you want, if you have a commerce plan and you want to learn more about ship station, I’ve got a website you can go to, it’s theshipstation.com/partners/squarespace. You can see the URL right up here.
It has a video which talks about what you can do here. You can try this for free, I’m sure it’s, pricing wise, I’ve never used this, I’ve got to be honest, I do my own shipping, but you can watch a video, and it’ll take you through the process of how to integrate the two together. Ship station, from what I’ve heard, from what people have said, allows you to do things like track, and all kinds of different things, monetize, etc. I’ll go back, and for us, we’re gonna add just basically manually shipping options. So click add shipping option, and it’s gonna ask us a couple things.
It’s gonna say, do you want to use flat rate shipping, do you want to use depending on weight? Or if you have a commerce, once again, a commerce plan, do you want to calculate it via USPS? United States Postal Service. It really depends on what you’re shipping here. If you wanna go flat rate, you can and say, hey, if I’m shipping any product, it can be five bucks, it can be 20 bucks, to a certain area. I want to really kind of do it depending on weight. It’s your call, you have to decide. I’ll click on depending on weight.
And we’ll say something like, I’m gonna send it UPS, because that’s my main option. I’m putting in UPS here as one option, but we can offer a bunch of options, Fedex, UPS, USPS, etc. For UPS here, you’re going to see that it’s going to say, okay, weight, from zero to one pound, and this is in pounds, we can set a cost. I’m going to do something like this, I’m going to click on a plus here and add another one. And we can even add other ones if we want to, and if you click in here, you can start to edit these. I can say from one pound to ten pounds, I want it to be five dollars, for instance.
Now you have to go check shipping costs. Because you’ve got to make sure this is going to make sense, right? We can also say ten pounds plus, I’m going to make it ten dollars for shipping, not 100. You need to, once again, go check UPS website, you need to check and see what shipping costs would be generically, as far as creating these. One thing I also will do as far as the name is concerned, I will put in how long it’s gonna take to ship, because they won’t see that. So I’ll say something like five day, or you could say something like next day, or you can see some examples here.
Just to give the customer an idea of how long it could possibly ship, you could say something like five to eight day, you know, they give you a range. If I click on country restrictions, you can restrict where you ship to. Now right now, according to what I see here, it’s going to only ship to the United States. Those are the only ones that will be served by a shipping option. If you want to shit to the rest of the world, you can, you can say ship to the rest of the world, it’s going to make it available everywhere. That’s your call, okay.
We can also add other countries if we want to. So if you want to ship to Italy, for instance, you could do that. Alright, now I don’t want to do that. So I’m going to ship just to the US. This gets a little sticky because of costs and you know, vats, and all kinds of taxation and different things, so you need to kinda figure it out, but this is where we do it, go ahead and click save. And you can see we have one shipping option. We can always add more, and after you just learn how to do it right there, you should be able to kind of do it yourself next time. Just check the shipping carrier, whatever company you’re using for shipping rates, you’ve got to keep these up to date as well.
So now we have it ready to go. And I just wanted to mention again, like I said in the beginning of the video, you may not need to set these shipping options if you have a service or digital download, but I figured i’d point you in the direction of shipping options just in case, because we have a physical product. Go ahead and click back on getting started. You can see now that it says create a shipping option is grayed out, we’ve done that. the next thing we’re gonna tackle here is connecting our Stripe account.
—Connect Stripe
– In order to sell using the products within Squarespace, you need a payment processor or essentially a company who does the heavy lifting of accepting those payments on your behalf, like credit cards. Now luckily in Squarespace, we can use what’s called a Stripe account that we’d set up separately, and it’s free, so let’s take a look at that process of how to set up a Stripe account and connect it to Squarespace so you can sell stuff. Now first things first, I want to take you through just a 10-second overview of what a credit card processor is.
This is something called authorize.net which we’re not talking about. It has nothing to do with what we’re doing, but they have this cool little diagram I wanted to show you. Just quickly, if somebody is going to buy something from your website, somebody has to be able to grab that credit card information and process it with a credit card processor with the actual company, collect the funds, transfer them from bank to bank, do that kind of thing, and get it done. If we did this ourselves, it would take a lot. But luckily, we have– Now this is called authorize.net.
Luckily, Squarespace uses something called Stripe which would replace this right here. It is the intermediary, the step between that will grab the credit card info, go to the credit card company, collect the funds, bring it to the bank, do all the stuff and make sure everything’s done securely. If I click over here, I’ve got the Stripe open and this is actually kind of cool because Stripe is going to different countries now and this is something you have to think about because when you use Stripe, it’s not accepted in every country, but it is going around now.
You can see UK, Ireland, et cetera. This is Stripe. What we need to do is we need to set up an account with Stripe. So, I would go in and set up some kind of simple account. It’s free to start. You give it a bunch of information and they’ll set you up. Back in Squarespace, make sure that you’re in the Commerce. Now let me just… Stay right where you are if you’re already there, but let me show you this. If you have your product set up, your product page, come into Commerce. You can see Getting Started, and if I scroll down, you’re going to see Connect Your Stripe Account.
Click on that. And down here, it’s going to say Connect Stripe. Click on Connect Stripe and what it’s going to do is go out and authorize Stripe and Squarespace to kind of work together. You’re going to see right here that… You can if you want to, go down here and fill out a whole bunch of information. You’ve got to give it a lot of information, your Social Security if you guys are just an individual. If you’re a corporation, you got to give it your FEIN, et cetera. You also have to give it things like credit card statement, details, bank information, routing account numbers.
You got to think about it because what’s going to happen here is it’s going to take the funds and transfer to your account. That’s the whole idea, or at least one of the ideas behind Stripe. Now this right here is actually going to create an account for you, which is kind of cool. I actually went to Stripe and created the account because, well, for me, it was actually a little bit easier to do it that way. If you already have a Stripe account, you’ve set it up, you can click Sign In. I’m going to go ahead and sign in here. Now you can see it’s kind of cool. It’s actually putting me in here.
I’ll make sure I got the right password. Okay, and there we go. So, after I log in, give it the information, it’s going to do that. If you have to fill out, if you don’t have a Stripe account, you can fill out all that information, connect, it will eventually go through and close that window, probably come back over here and it will say, “All right, we’re connected with Stripe now,” it will show you “Stripe account information “is now connected “and your store can now process credit cards.” This is awesome. That was super easy. A little bit of information of course, that’s the pain point, but now with our Stripe account set up and ready to receive orders with shipping done and a product created, we can actually start testing out our payments and that’s what we’ll do next.
—Test commerce
– Testing is an important part of the selling process anywhere, Squarespace, any site you’re creating, whether you’re giving content away for free or selling the latest products you have to offer, you need to make sure the process is smooth and what you expect. This means setting up email correspondence and more, so, let’s go through and test the product to see what’s up. Now, first thing’s first. I want you to check something real quick. So with your site set up, your products, you’re connected to Stripe, you’re ready to go here.
Go into Commerce. Let me back out so you can see all this, okay? Go into Commerce, and you’re going to see, we have Getting Started. Click on Getting Started, scroll down, and you’re going to see Flip the Switch to Go Live. Now, this means that we are ready to actually launch this to the world, meaning, people can actually purchase products. There’s no testing, there’s nothing like that. You really only want to do this when you are sure that everything’s working properly. Click on the arrow to go back here and scroll down here to Store Settings.
Go ahead and click on that. And you’re going to see right here, it says, Your store is not live. You can flip the switch. Right here, it’s not enabling live orders. It’s connected to Stripe, which is great, but it’s not ready to go. That’s great. That means that we can test and we can work. Matter of fact, I did want to show you a couple things here. You can actually change currency, measurement standards, go to metric if you want to, set up ordinals, all kinds of different things here, and we’re going to look at some of this in just a little bit later, all right? But let’s go ahead and test things out for ourselves.
Press “escape” or click the arrow in the upper corner there so we can get back to where we were. Click on Products in the navigation there to go to the Products page, and we’ve got our products set up. Click on that, come into the actual individual Product page, and let’s start this out. So, let’s come in here and let’s Add to Cart. Now, if we had set up Options, like size and color and different things like that, we would select those right here. You would actually see drop-down menus, and you would choose those before we Add to Cart, obviously. Go ahead and click Add to Cart. Here’s our survey.
This is what we said. I’m going to say, Eh, I’m Neutral on that. Our customer servivce is awesome. I don’t know, whatever. Click Add to Cart. Once again, that is optional. We didn’t need to set that form in there, but that’s something I decided to do. You can now see that the shopping cart has 1 item in it. No matter where you go, what page you go to, this is going to be there. If you click on that, it’ll take you to the actual cart. Now, this is not something that we created. This is just something that is there, okay? Part of Squarespace. You’ll see everything that they added to the shopping cart.
They could keep going if they wanted to. They can change Quantity here, they can delete it. They can go to Details, look at it. We want to Checkout. Let’s test this out. So click Checkout. It’s going to take us in, it’s going to say, Store’s Not Live. Test all the features without charging a real credit card. We can add bogus information in here. This is the best part, so, I am going to add my real Email Address. The reason why you want to do that for your Email Address is so you can test the auto responders, test the emails that are happening. Let’s give it a Shipping Address, and the Shipping Address can be whatever you want.
It can be fluff. You can type in anything you want there. Try and give it something real as far as, like, a zip code and state and that type of thing. Then we can click Continue. Now notice the Shipping over here. I wanted to draw your attention there. Shipping, 10 bucks, flat rate right there. Click Continue, that’s based on weight. You can see Delivery Options. We only have one. If we have more than one, they could choose it, telling me how long it’s going to take, how much it’s going to cost, it’s part of it already. Click Continue. Now it’s going to say Billing. Just for testing purposes, choose Use Shipping Address.
It’s going to put it all in there. It puts in a dummy credit card, so we don’t have to worry about this. Now we can Submit the Order. Click Submit Order. It’s going to go through and place it, run it through, all right? And there we go. Order Confirmed. You can see. It’s been submitted, confirmation was sent to brianwoodevolve@gmail, and we’ve got it. So I’m bringing you over to Gmail here to see what is received by the customer, and this is really important. This is stuff that you have to test, not just that orders are going through and things are working, but that you actually are, you know, people receiving what they should, the information in a timely fashion, et cetera, contact information, all that type of thing.
Also, when people are purchasing products, you want to get them in the pipeline. You usually want to get them on some kind of newsletter or email list. That way you can send them more information about upcoming products and keep them interested in what you have to offer. So now that we have a quick test under our belts, we can see, I can see a few things that we might want to change, add, et cetera. So next, we’re going to take a look at setting up things like auto responders, emails, settings, and a few other things.
—Add coupons
– Whenever you deal with selling, coupons are a great way to entice new shoppers to buy or even incentivize existing customers to purchase again from you. Squarespace has pretty powerful coupon capabilities as you will discover in this lesson. In your site, if you go to the commerce section, take a look down here, you’ll see coupons. Click on that, and we can set up different types of coupons.( namesilo coupon code) This is where we create them and manage them. Now as soon as we start creating coupons, we’re going to be able to see this when people purchase, so you’re going to see them in the purchasing process.
Click add coupon, and you’re going to see there’s a ton of kinds we can make here, which is pretty crazy. We can say hey, we’re going to make a coupon that… you’re going to apply a percent, a dollar, this that to anything, if you want. If you order at least a hundred dollars or more, we’ll give you something off, or something to that effect. You can say certain products are on sale, all summer items, I love that. Or a specific product, single product. We’re going to create one that’s just generic, and you can kind of go into each of these and take a look, they’re similar, but there’s differences obviously.
So click ‘Any Order’, and it’s going to say, alright, let’s make a discount, what do you want it to be? You want it to be a flat discount, maybe like ten bucks off? Or percentage based, or free shipping? We’re going to do a percentage discount, just because I want to. Go ahead and click percentage discount, and it’s going to say alright, what do we want to name this thing? Well, we’re going to give people a discount off of our products. We’ll put in something like ‘Rainy Day Special’. And what we’ll then do, let me type this in…
we’ll put in a promo code, and we can have it generate it for us if we want to, so go ahead and click generate. There we go, that’s pretty simple. That way it’s not quite as easy for somebody to replicate. We can then put the discount or percent, I’ll say 10 percent. We can say start date and end date, I love that. If you click on, for instance, start date you can go in and choose it from calendar, change the time, pick it way far in the future if you want to. I’m going to make it so that… well well just leave what’s here. Go ahead and click save. And we’ve got ourself a coupon, right there.
Kind cool. If you ever want to edit it, you can always click on it, and you’ll be able to edit the content. You can see down here that we can also go in and either deactivate it which means leave it in there, just don’t make it work right now. We tend to do that if want to stop the special, obviously. We can also remove it, and then save it if we make any changes. I’ll click cancel. We can add a bunch of coupons if we really want to. Now what I’d like to do is I’m going to make sure that we get this to people so they know about this code.
But what I want to do is I want to copy that code there. So you can always try and copy it or I’ll click here, click on the promo code and copy that. That way I’m going to test it out real quick. I’m going to go out, and take a look and see. It’s already been created. Go to our products, we should already be there. If you’re not on your products page, go to your products page and click on the single product. Click add to cart. And I’ll say I’m neutral. Go ahead and go through the process here. Click on the cart icon, it’ll take you to the shopping cart itself.
We can then check out, and just to show you here, take a look, you’re going to see there’s the contact information, coupons now shows up. So we can actually add that there, I’ll paste that code in there. Obviously we need to get that coupon code to some people, we can do that via our newsletter if we have mailchimp hooked up here, or email if you want to do that. Click redeem and it should take that discount off, you can see right there what it does. Pretty cool. I really think that is just awesome. Easy way to do it. Like I said earlier, coupons are pretty powerful on squarespace, and really easy to set up as well.
You need to make sure you keep track of them, there’s no expiration for instance, and also see how people are using them. Are people actually using them? One of the last things we’re going to do while talking about selling is talk about how to change the appearance of the checkout page itself.
—Editing the checkout page design
– One thing I know that a lot of us want to be able to change as soon as we see it is this Checkout Page. Now, the Checkout Page is something that’s generated by Squarespace that we really never touched in the past. It would just be generated, right? Well, we can if we want to go in and change the look and feel of this, using a few different options. So making sure, let me actually go back here. I’m going to go back to the page, get back to your site, and if you come in over here to the left, you’re going to see that we have Design. So, go ahead and click on Design, and you’re going to see that we’ve gone to the Style Editor a couple times now looking at buttons and different things.
But, you’ll see right here that we have what’s called Checkout Page Style Editor. This is something that’s a little bit newer, but I think worth looking at. Click on that, and it will take you to an example of your Checkout Page. Check this out. One thing a lot of people wanted to do is to make this look more like their site. Instead of this being a standalone page anymore, it’s actually part of your URL and in here, we can, if we want to, go in and do things like change the background color. So, we could pick a different color, make it match your site, for instance, if we wanted to do that.
We could go in and show the site logo. Right now, it’s actually showing the site title. Now by choosing Show Site Logo, if you don’t have a logo associated, it’s just going to get rid of the title. I’ll show you where we need to set that. We can change the title color, the button color, and that’s about it. I know some of you are probably looking at this going, “Really, that’s all?” But, at least it allows you to, I don’t know, associate it a little bit closer with your site design. As far as the site logo, I’m going to click Save. Go back out to Design here, click in the arrow in the upper left.
You’re going to see Logo & Title. Click on that. And down here, we’ll see Site Title and Tag Line, and down here, further below, you’ll see Logo Image. This is where you can add your own logo. Now, this is going to show up on the site, okay? We could if we want to, create a logo at this point, but we could also have a jpeg, gif, or png, most likely, a png file, and add the logo and that way we could put it on the Checkout Page as well. So, there you go. Really simple. Something you can do. Checkout Page Style Editor can really help to define your site and make it so that it’s a little bit more cohesive, as far as your design is concerned.
—Add your own domain name
– In the Squarespace 7 Essential title, we actually talked about the Squarespace domain associated with every trial account to start with, and I also showed you how to claim your included domain with a page Squarespace plan. In this video, I want to show you how to associate a third-party domain to your site. Now, what do I mean by that? Well, if you happen to use GoDaddy 1&1, all these different companies out there that will sell you a domain, like I’ve got lyndapartyplanners.com, we can use that as our domain in Squarespace.
So I’m talking about one you’ve purchased elsewhere, that’s what I meant. If I go back over and take a look, you’re going to see that if we come to Settings, you’re going to see Domains. Now, I’ve already associated, or have a Squarespace domain associated with this. In the first year when you sign up, that means when you start paying for Squarespace you get a domain, okay? It’s included. Now, after the first year, I believe, yeah, right here it says you’ve got to pay 20 bucks for it. You get a free one, as well, which is called a built-in domain, and that’s got the .squarespace.com, but if we want to connect a third-party domain, we can click here.
So I’m going to do that so, I’m going to click, Connect a Third-Party Domain and then just put the domain name in here, lyndapartyplanner, and I need to spell it correctly, partyplanners, there we go, click Continue, and you already got to have this thing purchased, right? And I forgot to put a .com in there, that’s why, okay, hello, because there’s a lot. I’ll click Continue and it’s going to say, Well, what’s your provider? Now, I can’t stress this enough, if you’ve purchased through a provider that is unknown, it’s going to be a little difficult to do this, okay? A little bit more difficult, I should say, not impossible.
If you purchased through, and if you look at the list here, one of these on the list, usually like 1&1, Dreamhost, Bluehost, GoDaddy, etcetera, it will be easier. I’m going to click this, this is actually GoDaddy, I’m going to click Connect Domain, and it usually goes out and says, “All right, well, let’s connect with GoDaddy, for instance. Now I’ve already logged in with GoDaddy. It’s going to ask you for a login in that site, so I’ve already done it, I’m going to say, all right, let’s connect it to Squarespace. I’ll click Connect and there we go.
I’ll click Close Window, it’s going to say, All right, domain provider, we now have, I now have, I should say, a domain connected, and that was it, that was pretty easy, wasn’t it? That was super simple. It’s going to take a little while, it might take anywhere from 10 minutes to like, 10 hours, I don’t know, it depends on what’s going on with the host and some other factors. If you come across adding a third-party domain where it’s not as simple, and it will not be for some, what you can do is, you can go to squarespace.com, and I would actually go to support.squarespace.com to make it simpler, and you can do a search for connecting a domain.
You’re going to come to this, Connecting a domain to your Squarespace site. What it’s going to do is say, Well, here is what you’ve got to do first, here’s what you need, you need this, that and etcetera. These are specific guides for providers. Some of these are dead simple, you just saw a really simple one. Some of these are not as easy, okay? So matter of fact, if go here, it’s going to show you the whole thing and it’s going to say, Okay, well, if it’s not that simple, you have to go to DNS Settings and do this and that and all kinds of stuff.
It’s getting easier and for some of the bigger ones, it’s really dead simple. So if you add your own third-party domain, I hope that it’s this simple for you. I mean, I really like the different methods for getting a domain from Squarespace, including the domain that’s included with the paid plan, but I really like the ability to associate a domain you’ve purchased from a third-party provider like I did with GoDaddy since a lot of us probably have already done that, we’ve probably already purchased one. It requires a little bit of set up and you can see right there, it wasn’t that hard, but it’s definitely, definitely worth it in the end.
—Work with multiple sites
– When you start a Squarespace account, you start with a single site. And it can be a trial. You could already be paying. Depends on how you set it up. But the account you have can be used to actually create multiple websites. Some of them can be in trial. Some of them can be paid. Each site you create under that one account is actually paid separately and has different domains and doesn’t really share content, so I want to take a look at that. If you sign up through Squarespace and you scroll down, you’re going to see you got your name down there, whatever you put in there, and you’ve got this little face down here.
If you click on that, you will see that here’s your profile. This is what you signed in with. Now I can actually see LOGOUT, and I can see CREATE NEW SITE. I click CREATE NEW SITE. It’s going to come on and say, “All right, well which template do you want?” I’ll say, “Well let’s look at this one.” Okay, I like it. Let’s start with that. It’s going to say, “Do you want to create a new site?” Yes, we want to create one. Do we want to have a NEW USER or do we want to use the CURRENT user? Using the CURRENT user is going to keep the same administration, so the admin area’s going to be the same.
You’re just going to have different content for the two. Okay not going to be shared necessarily, except for some of that admin content, admin information you fill out. I can say CURRENT, so I’m going to click on CURRENT. It’s going to think about it. It’s going to grab all the template files, do its thing, do what it typically does here, try and lead me through. I’m going to click DISMISS. Got my SITE TITLE. You can see okay I’m in the admin area again. You can see that it’s got its own domain right now as well.
If I look in here and go to PAGES for instance and just start taking a look at content, totally different because this is a different site. If I go into SETTINGS here and take a look, you’re going to see under BASIC INFORMATION, different site, different content, okay. If I go all the way back out, look down here, you’re going to see okay, Brian W. If I click on that little face now, now you start to see the different sites we have available. There might be a scroll bar in here if you have a lot, but you will see ACTIVE and TRIAL. ACTIVE are ones that I’m paying for monthly, and TRIAL are, well obviously, a TRIAL.
If you want to delete a site, you can do that. You can see there’s a little trashcan here. You need to pick the site you want to work on, okay, so you got to pick it. Now you can only delete a site that you’re not working on, well at least using this method, okay. So if I click back on Party Planners here, it’s going to say, “All right, let’s log in. “Let’s go to it.” This is kind of annoying actually. I got to be honest. Oops, wrong password. And it’s going to take you in and say, “All right, let’s go start editing that” because it’s a completely different URL, you can see here.
Now if I go back down here to the little person, you can see this is now the ACTIVE site. There’s TRIAL right there. If I click back on TRIAL, it’s going to try and log me (chuckles) back into TRIAL. Can you guys get the idea here? Once you’re logged in, you’re logged in, this browser session, I mean, all right. Now if you really wanted to delete a site, I said there was another way to do that. If you come to SETTINGS, and you come down to Billing & Account, you’re going to see Delete Website. There’s also different things you can see here: Login History, Billing, et cetera.
If I click on Delete Website, are you sure sure? Are you really, really sure? Yes, I want to DELETE this SITE. It will be gone. There we go. So I can get rid of it. I can go back over here now. And if I come back to my original page here, let me refresh. This is my original one. Let me close some of these out here. This is Party Planners. There we go. Now if I come down to my account information, I should see that this is the only one, so it’s not going to be listed in there, and that’s it.
So you can see it’s pretty easy to create a site in Squarespace for yourself or somewhere else. That’s for sure. If you’re building a few sites for yourself, it can actually get a little pricey to have multiple sites on Squarespace because they are all built separately. You pay a monthly fee that’s different for each, and there is no group billing discount if you will, (chuckles) but you are getting the ease of Squarespace and the support as well.
—Edit your site with Squarespace mobile apps
– One of my favorite features of working with Squarespace is the ability to make edits and track metrics like analytics using mobile apps. While most of the apps are available on iOS, there are a few available on Android. But I wanted to take a look at a few of these and show you how they can make your time in Squarespace easier. If I go to Squarespace.com, you’re going to see /apps. We have a series of apps available. We’ve got Blog, Metrics, Portfolio and Note.
These are availabe on iOS, iPad and iPhone. And I believe that Blog and Note are available on Android. I actually happen to have Blog on my Android phone. If you want to look at these, you can. It just talks a little bit about what each one of these does. Like Blog, which is on iPhone, iPad and Android, lets you blog or create posts on the fly. And you can post them. Really pretty cool. The way to go quickly. Scroll down a little further, you’re going to see Metrics. This one’s only available on iOS right now, but it’s kind of cool.
It lets you see the metrics for your site. Then we have, I scroll down a little further here, Portfolio. This one is for iPhone and iPad, and allows you to create, I guess you could say galleries for your web site. So you can kind of synchronize things and make sure things are set up. I’ve never, I’ve got to be honest. I’ve never really used that one. But it’s another one you can try. And the last one that I’ve used before is called Note. It’s just a simple note capturing device, and what it does is when you take a note, it’ll actually put it as a post, a blog post, but it’ll make it so it’s a draft.
That’s if you sync it with Squarespace. You can also sync it with Evernote, Dropbox, Overdrive and a bunch of stuff. I just want to show you one of these. So what I’m going to do, let me come back over here to the site. I’m going to go to Pages, and you’ll see that I’ve got a blog here, and I’ve also got a blog, there’s a bunch of pages down here that I have not linked, a blog down here. Okay? I’m going to click on this blog, and you’ll see that I’ve got one blog post that I put in here, and if I click on it, it says “Welcome to our new blog!” Blah blah blah. There it is right there, a bunch of placeholder stuff.
Now I want to go out in the wide world, and I want to be able to post. So what I can do, let me actually go over here, is if I go on my iPad or my iPhone, or if you go on your Android device, and you go to your store. So I go to the Apple App Store, or if I go to the Android, the Google Play store, you can load what’s called Blog. And I can see it right there. So I’m going to tap on Blog. What you want to do, is you want to sign in with your Squarespace credentials, username or your email and your password, and it shows you your Admin area.
Well, essentially a stripped-down version of it. On the left here you’re going to see the actual blogs that you have, these are the blog pages you’ve created. And what I can do is I can tap on each one of these and see the information for each one. Like there’s one right there, “Welcome to our new blog.” I’m seeing what I see up in the Admin area. So what I could do now is I’m on the go, I want to kind of post a blog or do something like that. On my device I can go in and tap and say, “All right, let’s go make something new.” You can see all right, we’re going to do long press, we’re going to do that, this, whatever.
Get out of here. I can then go in and say all right, let me set up a title. I’m going to say “We’re having a party.” All right? I come in and say right here, add some content, da da doo da doo. I’m not going to put in a bunch of stuff. Doo doo doo doo doo. You can see, you can actually go in and do a little bit of formatting down there, set some things up if we want to. You’ll see that I’ve got a little plus sign up here which allows me to go and add text, image, video. You can see it right down there at the bottom. So if I want to enter, let’s say image, I can click on image or tap on image, and say I would like to access your photos, we can do from a lot of locations where we want to get the photo from.
I’m not going to do that. Just so you don’t have to look at my images. And then one of the last things we can do here, is if I tap on the gear in the upper right corner, we can go in and set up a bunch of things we would do with a post. We can set up tags, categories, et cetera. You can set up Post Status if you want to. You can say, “I want it to be published right away. “As soon a we save it let’s do it.” A lot of things we can do there. This is a little dangerous, but you can do it. I’m done. I’m going to go in and upper left corner, I’m going to tap on Done. So right up there I’ll tap.
Save changes. Are you sure you’d like to share it or not? No, I don’t want to. Those are the connected social accounts by the way. And then what I could do, there’s a lot of things you can do here. It’s been published. I can go back to List over here and take a look. If I come back over to the site over here, and I refresh, there it is. Pretty cool, huh? So you can use these apps to really go in and make your life a little bit easier. I mean, I love the fact that we can do things like post on our site or even check analytics, which is called Metrics in Squarespace, right from the mobile device.
Hopefully they’ll reach parity on both iOS and Android platforms, but right now we take what we can get.
manifestation miracle Some of you have heard reference to the Law of Attraction from various sources while others are just beginning to learn about it. In modern times the Law of Attraction has been documented since the early 1900s. Here’s a brief history:
Coupons and Promo Codes 