You’ve done a lot of hard work designing, so now it’s time to begin building your website. We’ll work through each page of our website and base the layouts from the wireframing we have created in our planning.
Keep in mind that the planning is never set in stone. As you design your site, you’ll always see areas for improvement. The beauty of Squarespace is you can always update, modify and test your designs. If it doesn’t work as intended, just change it. Design is always fluid.
The branding and colors you’ve selected will help with setting some basic design styles for your website. Let’s get a few items established in our styles section first. As we continue to build out our site, we’ll be able to come back and update this section. Remember, design is a process. :)
Designing the Home Page sets the tone for your entire site. It’s also (usually) the first page your visitor will see. So it’s important to get it right - no pressure! ;)
The great thing is once you’ve set this page up, a lot of the design elements will carry throughout the website - making it much easier to build out the rest of your website pages. Stick with me here, it’s a rewarding process when you finish!
Be sure to use the images in your “Website Resource” Folder.
Also, keep your Account Worksheet nearby in this section. We’ll be connecting your Newsletter form to Mailchimp at the end of our lesson.
If you'd like to use place holder copy for your own website, you can use this site to copy/pasted Latin text.
It's really helpful to visualize how much text is too little (or too much) within your website design.
Congratulations! You’ve just built the very first page for your website! I know that was a lot but the steps we took in this section will allow us to begin building the other pages much faster.
Let’s keep going!
Before we get into designing our classes page, we need to set up our page structure - this will serve as the main navigation at the top of our website.
We need to create a page for Classes, Gallery, About, Blog and Contact. This is just a recommended structure for our example site in this class. It’s important for you to think about what you’d like as the main navigation structure for your own site.
It all comes down to hierarchy and what you deem the most important links on your site. Think about the top pages or content you wish your visitor to see and get them to those pages as fast as possible…( in just a few clicks! :)
Alright! The house cleaning we just completed will allow us to begin building out our Classes Page.
Our Classes Page is your main page to allow your visitors to browse your available classes you have for sale. This provides a glimpse into each class and what might be of interest to them.
Each thumbnail will have a title and brief description along with a button to “learn more”. We’ll get to connecting this “learn more” button later. For now, we’ll focus on building out your Classes Page.
Be sure to use the images in your “Website Resource” Folder. Or, if you have your own class thumbnails, even better!
Well done! I hope that page design was a little easier for you. As you become more familiar with the Squarespace tools and content blocks, you’ll become faster at designing your pages.
QUICK NOTE: We'll revisit your Classes Page and build out the Classroom Sales page. First, we need to add your Gallery Page and connect your Stripe and PayPal accounts.
Now, let’s move on to building our Gallery Page and adding our ecommerce store.
Gallery - Building Your Store
Building a product page and ecommerce store on Squarespace is less complex than it may first appear. We’ll walk you through this step-by-step and make sure you understand the foundation of setting up your store and connecting your Stripe and Paypal accounts to begin accepting credit card payments.
First, we need to begin adding our product images to our store so be sure to download and use the images in your “Week 2/Gallery” folder. Also, keep that Account Worksheet handy. You’ll need it for connecting your Stripe and PayPal accounts.
Let’s start getting you paid! :)
Well done! You’re almost ready to receive your credit card payments. Let’s finalize your Checkout Page design and connect your Stripe and PayPal accounts.
Gallery - Style Checkout Page
We need to continue styling our Checkout Page. It’s important to remain consistent with your branding throughout your entire site… most importantly at checkout!
Are you getting excited!!!??? Are you ready to start receiving payments? You’ve waited this long, let’s get started…
Gallery - Connecting Stripe and PayPal
You’ve been patient long enough. You can see how important it is to design your pages so they remain consistent from the Home Page all the way through to Checkout.
Let’s connect your Stripe and PayPal accounts so you can finally start getting paid!
Congratulations! You’ve now built your first ecommerce store! Be sure to test it out and be sure to download these handy apps from Squarespace, Stripe and PayPal.
WARNING: You may get addicted to hearing the “ding” on your phone when you start receiving those sales :)
PLEASE NOTE: There currently is not a Stripe app for Android devices. However, Control is a great app I’ve used for iPhone and it’s a very robust app for tracking your sales. This one app pretty much covers all the other apps combined!
Gallery - Adding Coupon Codes
Coupon and Discount Codes are great for generating sales and offering incentives to new customers. Squarespace makes it super easy to create and manage directly from within your account.
Be sure to manage your product categories appropriately. For example, we have categories for Classes and Discounts. If we only want to offer a sale to our older classes, we’ll only apply the category “Discount” to that specific class.
Here’s a helpful article to explain the process. Have fun!