Harper Design Co Template Tutorial

Welcome to Harper Design Co. 

Squarespace Theme Design Tutorial + Resources

 

 

Welcome and Thank You

We’re so excited you’ve purchased the Harper Design Co. Squarespace Theme.

We hope you’re ready to learn a lot while you build a really cool Squarespace site, just like the demo.

The following pages will help you understand how the Squarespace Platform works, how to navigate and change things like blocks, menus, and colors, and add in pictures and texts for your own site. If you’re already familiar with Squarespace feel free to skip down to the videos specific to building this template.

Our promise to you is you won’t need a full on web design degree to get your site up and running. There will be things to change from the demo you purchased, and if that’s overwhelming to think about, let us know, and we can arrange a setup and install for you.

Section One | Build

This is where you’ll actually build the site page by page, block by block. We know it might feel silly to build a site that you know you’re going to change around, but it will be easiest to build it exactly like the demo FIRST, then in section two, go back and customize it. This section has a lot in it, but don’t get overwhelmed, each video is short and easy to follow. If you can block off some time to sit and do it it should only take a few hours.

Section Two | Customize

Now is where you’ll go back into the site and change out things like images, words and graphics. Make the site as different or similar to the original as you like. Follow the videos here to learn how to customize your graphics and find more photos to use.

Section Three | Launch

The most exciting section. And Honestly the easiest. Squarespace makes it really quick to get the site from preview to live.

We’re so excited to share this amazing design with you, and can’t wait to see what you create!

So grab yourself a cup of coffee, settle in and let’s get to work.


PART ONE | BUILD


BEFORE YOU BUILD

Make sure you have your Harper Design Co Folder unzipped and somewhere handy on your computer.

In that folder there is a folder for each page of the site. These folders contain demo images, and sample text that you’ll need for each page.

This set of videos is designed to have you follow along and insert all of the demo images and sample text along the way. Trust us, you’ll move much quicker if you build the entire demo site first, then go back and change things out/customize it for business.

SUCCESS TIPS

If you have access to a second monitor, it’ll be helpful to plug up to that while you work. You’ll be able to watch the videos easier and follow along building at the same time.

If something is going too fast, you can hit the control settings inside the video box to slow the video down, or speed it up if you wanna fly!

If there are any demo pages in the original Squarespace template that you want to keep, just move them to the unlinked section and make them disabled for now. It’s nice to have inspiration for layouts later on if you want. If you think you’ll never use them, just delete them like we do in the videos.

Let’s get started!


Template + Site Settings

Files to Reference:

Sonny Template (Brine Family)

Video Password:

hdc34352


Squarespace Overview

make sure to view these in full screen mode so you can see them


Main Interface

Settings Menu

Pages Menu

Marketing Menu

Design Menu

All About Blocks


Set Up Pages

Files to Reference:

Setup Up Pages Text File

Video Password:

hdc34352


Header + Footer

Files to Reference:

Home Text File

Video Password:

hdc34352


Homepage Setup

Files to Reference:

Home Text File

Video Password:

hdc34352


Major Style Settings

Files to Reference:

Style Settings Text File

Video Password:

hdc34352


About Page

Files to Reference:

listofpages.txt

Video Password:

hdc34352


Services Page

Files to Reference:

Services Text File

Video Password:

hdc34352


Portfolio

Files to Reference:

Portfolio Text File & Images Folder

Video Password:

hdc34352


Gallery Pages

Files to Reference:

Gallery Images Folders

Video Password:

hdc34352


Blog

Files to Reference:

Blog Text File

Video Password:

hdc34352


Contact Page

Files to Reference:

Contact Text File

Video Password:

hdc34352


Project Page

Files to Reference:

Project Page Text File

Video Password:

hdc34352


Terms

Files to Reference:

Terms Text File

Video Password:

hdc34352


FAQ Page

Files to Reference:

FAQ Text File

Video Password:

hdc34352


Minor Style Settings

Files to Reference:

Style Settings Text File

Video Password:

hdc34352


Mobile Tweaks

Video Password:

hdc34352


PART TWO | CUSTOMIZE


Getting Text Ready

Major Text Areas to Plan for

Home Page: mission statement, services summaries, recently completed projects, short bio, call to action, footer content

About Page: short bio, about the studio, team if applicable, call to action

Services: Service 1, service 2, service 3, Design process step 1, step 2, step 3, client testimonials, call to action

Portfolio: image titles that link to other galleries, call to action

Blog: header text, starter posts headline and body text

Contact: call to action, form content, studio hours and other details for business

FAQ & Terms: you own questions and answers, terms for your site/business


Replacing Images

There are a few graphics you’ll want to create for this site

  • Logo (you can also just type yours in and adjust font choices)

  • Favicon (little image that appears in the browser window) here’s a site that can help you make one if you need one

  • Social Share Logo/Icon

  • 3 Icons for Services Page I find my favorites here

Images You’ll Need for your site

  • Home: 3 for header area, 1 recently completed project, 1 for bio, featured logos

  • About Page: 3 for header area, 1 for bio, 1 for each team member

  • Services: 1 for each service you offer, design process icons

  • Portfolio: 5 images for main portfolio page, as many as you like for other galleries

  • Blog Posts: One Image for each Blog post thumbnail and any for inside the blog post you want (Squarespace now has an integration with Unsplash which makes this amazingly simple)

  • Contact Page: 1 image

  • Featured Project: 1-4 images to highlight from your project


Custom Icons

Websites for Reference:

flaticon.com

canva.com

*Don’t forget to give credit to flaticon on your site somewhere as part of their user terms.


PART THREE | LAUNCH


Get Ready To Launch

HOMEWORK BEFORE YOU LAUNCH

Wahoo! You’re almost done with your website. This is the home stretch. Don’t quit now, go through this checklist and make sure you’re all set.

  • Test your links: Go through and check button blocks, and any areas of text that you linked up. If you went back and changed a page name, double check that you relinked to that new page name.

  • Check Spelling/Grammar: Depending on your audience some grammar mistakes are ok. Amiright? (see?) but just to be safe ask a friend to proofread your new site for grammar, punctuation and misspellings.

  • Test any forms: Test out any forms you made, newsletter signups, opt in freebies, and general inquiry forms. You want these to connect to the right places and give you the info you need in return.

  • Add your Social Share Image and Favicon: There is an area on each page under SEO that also allows for a custom image, but it’s nice to have this fallback social media sharing image. It can be your logo, or just a nice image that represents your brand. Also the favicon is the little icon in the top of the browser window. These are both in the Design Menu under Logo and Title.

  • Test it out: Get our your phone and your ipad and even have a friend pull it up on their phone. Don’t rely solely on the phone and ipad preview inside of Squarespace. It does a great job of making things responsive but nothing beats a first hand look.


Make It Live

Once you’ve gone through the pre launch steps above, and have your site filled in with your own images and words, you’re ready to upgrade to a paid Squarespace account and hook it up to your domain.

Once you follow the steps below, your site will be visible to search engines online at your domain and people can find your site.

**Tip: Squarespace gives you a 2 week window for a trail. If you’ve got your site built out and don’t yet have all the content switched out from Demo to yours, you can upgrade to the paid account and put up a COVER PAGE that says coming soon to hide it from visitors while you work. You can also add a site-wide password if you don’t want anyone to access the site while you work on it.

UPGRADING TO A PAID ACCOUNT

  • Click Upgrade Now in the banner at the bottom of the browser window.

  • In case you dismissed that panel a long time ago (it’s ok it happens) go to Settings > Billing & Account > Billing > Upgrade Now

  • After clicking the button to upgrade, you’ll see the available plans, along with pricing and features. Select a plan. We recommend the Business plan since it’s got great flexibility and balance of features. If you plan to sell a lot of items you’ll want to opt for one of the commerce plans.

  • If you found any fun premium features while building your demo site, we recommend choosing the Website Business plan or higher so you can continue using those features.

  • After selecting a plan, select a billing cycle. We offer two options: Annual or Monthly.

    • Annual – Pay in advance for a year of service. Your credit card is automatically billed on the same day each following year. This option comes with a free eligible domain for the first year of service.

    • Monthly – Pay in advance for your first month. Your credit card is automatically billed for service on the same day each following month.

  • Enter payment information, and click the ‘subscribe’ button to pay.

  • Now you can set up your domain name. From the Main Menu in Squarespace go to Settings > Domains > Primary Domain

  • If you have purchased a domain already from a third party service such as Bluehost or NameCheap, click “Connect a Third-Party Domain” and follow the instructions. If you don’t own a domain yet it’s ok, click “Get a Domain” and follow the instructions to purchase a new domain or register your free one if you signed up for an annual billing cycle.

  • Once your domain is set up, it may take up to 72 hours for your website to appear live online.


FAQ + Help

Frequently Asked Questions about our Squarespace Templates

Can you just build this all for me?

Yes we sure can! Ideally you’d sit down, knock it out and be ready to go. We get it though, that just can’t always happen.
Just purchase our demo install package and we’ll have it ready for you in about a week. This is a great option of you’re overwhelmed just looking at all the videos or get half way into it and don’t have the time to complete it.

Can you help me install my images and text?

Yes we can happily do this for you as an add on fee or as a complete re-do of this template. Contact us to talk more about this process to see if it’s a good fit. You’ll need to have everything ready like images and text typed out with exactly where you want it to go.

Do I have to change out all the images?

These images are from Unsplash so they’re free images. Feel free to use them, crop them, edit them, or not use them at all.

Do I have to change out all the text?

The text that is in the demo site is mostly ispum text but you’re welcome to use any of the text we’ve started with and go from there.

Do I have to use every page?

No, of course not. If you don’t need a page (membership page for example) you’ll simply go to the settings for that page and uncheck the “enable” button. That will still keep the page as part of the site, but not allow visitors to access it. That way in case you need it in the future you’ll have it there to simply reactivate.

What if I don’t have a team?

The team areas could serve multiple uses. Get creative and feature other things in that area such as additional services, client highlights etc.

Can I add a shop?

Yes! Here is a really great guide to follow from the Squarespace Experts. https://support.squarespace.com/hc/en-us/articles/206566707 follow this and you’ll be up and running in no
time. Remember you need the business plan or higher to use the shop feature.

What about SEO?

This template does not include SEO help, as it’s so specific to each business/brand. We’ll go over in the a few of the videos how to add SEO to images and pages. You’ll be on your own to go in and change up the alt tags for each image.

General Help from Squarespace:

Squarespace Support

https://support.squarespace.com/hc/en-us

Using the Brine Template Family

https://support.squarespace.com/hc/en-us/articles/212512738-Using-the-Brine-template

 

Help from Site Maker Studio. Need help? Overwhelmed and want us to do it for you?

If you have any questions or if you want to chat about any add-on services such as install please email us.

CONTACT

jennifer@sitemakerstudio.com


Feedback + Brag

So how was it building an entire website yourself? A lot of work huh? But you did it! We’d love to see your brand new site and help you get the word out about your business through our social channels. Let us know what we can improve on and what you loved most!

Name *
Name

http://

Approximately how long did it take you to build your site?
of course you’re still tweaking but the actual BUILDING of the demo site


What would have made it even better? What did you love?


Scroll to Top