How To Add Branding to Your Squarespace Website: 2025 Tutorial
About this Squarespace video tutorial
Today, in the third video covering custom site copy and how to put it into a website framework, I'll show you how to add and customize branding assets to a new website to help your Squarespace site feel unique and tailored to your business. Doing this on the front end is a great way to get your website started on the right foot and build a strong foundation.
Timestamps
0:43 - Adding And Adjusting Fonts
3:49 - Adding And Adjusting Colors
7:38 - Buttons
8:30 - Site Header
Want 20% off your new Squarespace subscription?
Subscribe to the Designing the Row® email list and get the exclusive code sent straight to your inbox. You’ll get email updates when new Squarespace tutorials are published, but you can unsubscribe at any time.
Adding Branding To Your Squarespace Site
Today’s post is part three of a three-part series I’ve done about my new Custom Copy Creator tool to give you a head start on website copy as well as a homepage wireframe to begin designing your website. Today we’ll discuss how to add your colors, logo, fonts, and everything else your website needs at the start of the process so you have the next step of design fully taken care of.
Adding And Adjusting Fonts
To begin, we’ll just be going down the list of the branding information you need to provide for your website, so we’ll be starting at the top! Once you’re in the wireframe, go to 'edit’ to get started. You don’t have to be working out of the wireframe for these tips to help you out, of course, any Squarespace 7.1 website will work, but I’ll be going off of a wireframe template just for the ease of it. If you do want to get access to this Squarespace wireframe, check out DesigningTheRow.com/free for access.
From here, go to ‘site styles’, which is the little paintbrush logo, and open up the right sidebar. go to fonts, which you can click on the large block that will let you choose recommended font pairings, although this is limited and I don’t always recommend this option. With the arrow to the right of the large block, however, you can access more customization options. I usually tend to keep the base font size at 16, but you can adjust things like heading and paragraph fonts here.
In any section you can choose from the fonts Squarespace offers, using your pre-chosen font if your brand has one. As a note, be careful about using custom fonts beyond the ones Squarespace offers, as that can have negative effects on your SEO Google Lighthouse scores.
Here, you can also adjust font attributes such as line height or spacing, but I’m usually one to keep these at their default values. The same process as for headline fonts can be repeated for paragraph fonts as well as button fonts and miscellaneous fonts. I recommend sticking with only 2 fonts, with 3 at an absolute maximum, and use that third one sparingly.
Adding And Adjusting Color
Moving on, right below the font section in ‘site styles’, you can start editing the colors. Just like in the fonts, there’s a large clickable button that leads you to recommended color palettes, and just like with fonts, I do not recommend using this; just move on past this to the smaller arrow to the right to get to the real customization. Here you can customize the colors for your site within individual sections that show up on different pieces of your homepage.
Hit ‘edit palette’ to put in codes (either hex, RGB, or HSL) for your pre-chosen brand colors within these sections, or you can drag the mouse cursor to the color you’d like manually.
You can also drag in an image of yours and the colors from the image will be automatically applied to a set of brand colors; some tweaking of this may be necessary.
In this section, you can click on any of the elements (light one, light two, etc), which will lead you to a menu of where every color in your set is being used across the Squarespace page you’re on. If you’d like, you can individually customize every single piece of information in this menu. Even though I recommend sticking with the regular palette creation, these more granular changes are always an option if you’re interested in really getting into the weeds with the colors on your site.
Extra Tip: Make sure all the buttons on your site are the same color in every single theme and section on your site.
Editing Button Design
Below colors, (you can always go for the large button that gives you pre-set options, but just like with fonts and colors I don’t recommend doing that), click on the small arrow to get to better customization options for your buttons. Squarespace has three button options, even if I only use the first two in almost every site I design. Here you can adjust the following elements of your buttons:
Shape
Outline
Padding
Font
You can play with these options to get your buttons exactly how you’d like them, simple as that. Click through to adjust your secondary and tertiary buttons in a similar way to what you just did with your primary button, and you’re all good to go.
Adjusting Your Site Header
In a slight change from what we’ve been doing, the elements in the site header can be a little scattered all over the place, so we’ll go piece by piece with where everything is and what you can do there. Hover over the header and three buttons should be available based on where you’re hovering:
Add Elements: Can be found on the left hand side of the page.
Here you can add in a few standard elements for your site from a menu of possible toggles. I recommend a button/CTA, social links, and a cart for checking out items, but you can also add toggles for ‘account’ and ‘languages’ if you’d like.Edit Design: On the right hand side of the page.
This section lets you change how the whole header is arranged. You have five options for how to arrange the header; look through them, try them out, and see what feels best for you based on the amount of pages/elements you want at play for your header. You can then change spacing, height, borders, and colors, the same as any other Squarespace section.Add Logo: A pencil icon right over the name of the site that’s visible once you hover over the name.
Once you’ve clicked on the pencil logo you can upload an image file for your brand’s logo, which will fill in the same spot where your site title was. It is still important to have the title of your site written out in the metadata of the logo, though, because of the heavy SEO and organic search value of having a dedicated site title. Here you can also adjust aspects of your logo like height on desktop and mobile. (Extra Tip: Click on the mobile phone logo on the top right of the page whenever editing in Squarespace to preview the mobile view of your page.)
All you need to remember now is to hit save when you’re done and wanting to exit the edit mode for your Squarespace site! If you want to see how to get custom copy and a wireframe that you can connect your business’ branding assets to, sign up here to get access to my Custom Copy Creator tool!
The latest Designing the Row tutorials…
