How To Make Your Squarespace Website Not Look DIY

I’m a big fan of Squarespace here at The SM Collective. With its endless customization options, mobile responsive design, social and analytics integrations, and more, I firmly believe that Squarespace is the best website platform in the market.

Even though I specialize in custom Squarespace website design services, I understand that some people like to get their hands dirty and DIY their Squarespace website. I also understand that not every business owner and entrepreneur has the capital available to hire a Squarespace website designer, like me, to build a custom website.

But I’m still here to help!

Today, I’m diving into easy ways you can make your Squarespace website not look DIY. These easy fixes will take your Squarespace website from a basic template to a standout website. Let’s get started!

Add a Branded Favicon

If you look in the corner of any website tab, you’ll notice an icon in the corner – that is called a favicon. If you have any websites bookmarked in your web browser, the icon next to the bookmark title is also a favicon.

When you begin creating your Squarespace website, it automatically comes with a Squarespace branded favicon. It is a black dimensional square that matches Squarespace’s branding…but not yours.

It is very easy to update the favicon in Squarespace so that it distinctly matches your branding and makes your website stand out from the sea of DIY websites out there.

1. In the main dashboard, go to Design > Logo and Title
2. Scroll down until you see the Browser Icon (Favicon) headline.
3. Upload your favicon image.
4. Hit Save at the top.

Pretty easy, right?! You can create your favicon in Illustrator or Canva, typically 32 x 32px to upwards of 60 x 60px. Make sure it matches your branding and is easily recognizable, but not too busy. I suggest uploading your favicon to Squarespace in a .PNG format with transparent background.

Add a Social Sharing Image

If a link to your website is shared on social media, like Facebook, either in a post or in comments, it displays an image along with the link. This is known as the social sharing image. This is an often-overlooked piece that can be easily branded in a matter of minutes. To upload your custom-branded social sharing image, follow these steps:

1. In the main dashboard, navigate to Design > Logo and Title
2. Scroll down to the bottom until you see the Social Sharing Image headline.
3. Upload your social sharing image.
4. Hit Save at the top.

You can create your social sharing image in Illustrator or Canva at 1200 x 628px. I do suggest not having your design, especially your logo or any text go directly to the edges. Leave yourself some grace room for social cropping to ensure the full social sharing image is visible and not cut off.

I do want to note that collection items (think blog posts or products) do not use the social sharing image when a link is shared on social media. Instead, they use the thumbnail associated with that specific blog post or product.

Disable the “Powered by Squarespace” Badge

An easy way to spot a DIY Squarespace website in the wild is by the “Powered by Squarespace” badge in the footer of the site. It’s a “sneaky” way for Squarespace to get some additional exposure for those DIY-ers that just don’t know they can – and should – remove it. The Squarespace badge is simply a text block so you can just hover over it and hit the trash can icon to delete it.

Next, you’ll want to actually disable the badge – it takes just a few quick steps:

1. In the main dashboard, navigate to Design > Squarespace Badge.
2. From the dropdown, select “Disable Squarespace Badge”
3. Hit Save at the top.

Create a Custom 404 Error Page

A 404 error is simply a fancy name for the “page not found” error message you receive when you attempt to visit a page that doesn’t exist on a website. Most websites, including Squarespace sites, have generic messaging with a couple of bullet points and branding nowhere in sight.

This is often overlooked by many business owners who are DIY-ing their Squarespace site. When you’re creating your site, it automatically comes with the generic Squarespace messaging and you may just assume it’s one of those “it is what it is” things. But it’s not and can be completely customized!

Creating your custom 404 page in Squarespace is an easy process:

1. In the main dashboard, navigate to Pages.
2. Scroll down to the Not Linked section and add a new blank page.
3. Create your custom 404 page. Don’t be afraid to have some fun with it, but also keep it simple for users. Also, remember to update the page title, navigation title, URL slug, etc.
4. After you’ve created your 404 page, navigate back to the main dashboard, and go to Design.
5. Select Not Found / 404 Page and select the custom 404 page you created from the dropdown.
6. Hit Save at the top.

Add Simple CSS Code

I get it, the thought of code, when you are DIY-ing your website, sounds scary! But I promise it isn’t. Simple things like removing hyphens on mobile or creating a sticky header require a few simple lines of code to make a big impact. I even put together a few sets of copy-and-paste CSS code that you can add to your Squarespace website right now.

Consistent Branding: Fonts, Colors, Imagery

An easy way to spot a DIY Squarespace website is by inconsistent branding – think every color under the sun, non-cohesive imagery, and fonts galore. These are all big no’s in the web design world. The key here is consistency and remembering that sometimes, less is more.

Squarespace Fonts

For the fonts on your Squarespace website, we typically suggest using two (2) fonts. Select fonts that come in a variety of weights, allowing for more versatility across the font sections of your site (H1, H2, H3, H4, Paragraph 1, Paragraph 2, Paragraph 3). You don’t need a different font for each section on your site. Sticking to two (2) fonts and using them in a cohesive way in set sizes and weights will create visual interest while also keeping things cohesive and consistent.

Brand Colors

Similar to fonts, having a consistent color palette used on your website makes a huge difference. You want users to have a cohesive feel no matter what page they are navigating to and through on your site. If one page has all neon colors, the next is muted tones, the next is dark and moody, users will get confused and not really understand your brand. By sticking to a designated color palette, you’ll ensure a seamless and cohesive experience.

Brand Imagery: Stock Photos, Personal Photos & Graphics

Tagging off of having consistent brand colors, you want to ensure that any stock photography you use one, doesn’t look too stock, and two, matches your brand. I typically suggest sticking to 1-2 sites to pull your stock imagery from in order to achieve this cohesive look. If you’re in the market for stock photography, I’m a big fan of Social Squares.

You then also want to ensure that any personal photos or professional photography for your brand and business are cohesive as well. Take time to think about what you’re wearing, the setting of the image, the lighting, the depth, etc. These small details make a big impact on a photo. If you are combining personal or professional photos with stock imagery, ensure that they coordinate cohesively as well.

As you can see, cohesiveness is key when it comes to all elements of branding!

Check All Website Functionality

One thing I highly encourage anyone who DIY’s their website to do is to check every bit of functionality on the site. The last thing you want is for a user to click a link or button and have it lead them nowhere, to the wrong page, or to not be linked at all.

To test the functionality prior to officially launching your new site, I recommend making your site live. Now, you aren’t telling the masses about your new Squarespace website yet or marketing it, you are making it live for yourself at this point. Go through every single page of your site and click on every link, button, fill out forms, and do all of the things to ensure a seamless experience for users. If you notice a bad or broken link, pop into the Squarespace dashboard to make the edit. This is also another reason why it is important to have a custom 404 page.

So there you have it, easy ways to make your Squarespace website not look DIY. There are certainly many more things to pay attention to when designing a website but these quick fixes will ensure your Squarespace website doesn’t look and function like the basic template – setting you up for success!

Need help with your Squarespace website? I offer custom branding & website design services that take your business – and brand – to the next level. Check out what’s included in the branding & website package or contact us to learn more about creating a custom package just for you.