How to Add a Button to the Header in Squarespace

Having a call-to-action button in the header of your Squarespace website is a great way to drive conversions and engagement. Whether you want visitors to contact you, book a service, or sign up for something, a well-placed button makes it easy for them to take action.

Some Squarespace templates include a header button by default, but if yours doesn’t, don’t worry—adding one is simple.

In this guide, I’ll walk you through how to add a button to your site’s header, customize its style, and set up links so it functions exactly how you need it to.

Watch the video

Check out the YouTube video below. 👇🏼

Step 1: Access the Header Settings

1. Navigate to your Squarespace website and click Edit to enter edit mode.

2. Hover over your header and click Edit Site Header.

3. Click Add Elements and toggle on Button.

At this point, your button will appear in the header. The next step is customizing the button’s text, link, and design.

Step 2: Changing the Button Text & Link

Once the button is added, you’ll want to change what it says and where it leads.

1. Hover over the button and click the Pencil Icon to edit it.

2. In the text field, replace the default text with your desired call-to-action (e.g., Contact Us, Get Started, Book Now).

3. Click the Link Field to choose where the button will send users:

   • Internal Page: Select any page from your website (e.g., Contact Page).

   • External Website: Enter a URL (e.g., a registration page or external booking site).

   • Email: Link to an email address for direct communication.

💡 Pro Tip: If linking to an external website, enable "Open in a New Tab" so users don’t navigate away from your site.

Step 3: Customizing the Button’s Style

The button’s design is controlled by your primary button style in Squarespace. Here’s how to change its appearance:

1. Click the Paintbrush Icon in the top-right corner to access Site Styles or you can always just hit the forward slash key on your keyboard(same key as “?”) and then search “Styles”.

2. Scroll down and select Buttons.

3. Customize the Primary Button Style, which controls the header button design.

4. Adjust settings like:

   • Button Shape: Square, rounded, or pill-shaped.

   • Font & Size: Match it to your brand style.

   • Background Color: Choose a color that stands out.

💡 Important: Changing the Primary Button Style affects all primary buttons on your website, including those in contact forms and other sections.

Final Thoughts

Adding a button to your Squarespace header is an easy but powerful way to improve navigation and drive user engagement. Whether you’re directing visitors to contact you, book an appointment, or explore your services, this small change can make a big impact.

If you found this tutorial helpful, be sure to subscribe to my newsletter below for more Squarespace tips. And if you’d like professional help building or customizing your Squarespace website, feel free to reach out.

📨 Join my mailing list to get Squarespace tips & tricks right in your inbox

Your Designer

I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.