How To Add Multiple Buttons To Your Squarespace Header

Squarespace 7.1* allows us to easily enable a button as an element in our site header. But what if you want two buttons, or three buttons, or MORE? Unfortunately there’s no option to do so by default in Squarespace. Luckily there is a brilliant workaround that we can implement to overcome this limitation and create multiple buttons in our Squarespace header.

Our friends over at SQS Mods created a wonderful plugin* that allows us to easily enable two or more buttons in the site header. By implementing this solution, we can enhance the functionality and visual appeal of our Squarespace websites, giving us greater flexibility in achieving our desired design and user experience.

In this step-by-step guide, I’ll show you how to easily incorporate this plugin into your Squarespace website, as well as customize some of your styling options. So whether you want to create multiple call-to-action buttons, link to specific pages, or showcase important announcements, this guide will provide you with the tools and instructions you need to make it happen. Let’s jump in! 💫

---

*This post contains affiliate links. I earn a small commission when you click on the links and make a purchase. This comes at no additional cost to you. Affiliate links are marked with an asterisk.

---

↓ TWO BUTTONS IN SQUARESPACE HEADER ↓

---

1. Purchase the Plugin* from SQS Mods

Purchase the Two Buttons* plugin directly from SQS Mods — $20

---

2. Copy & Paste the Code into Footer Code Injection

1. Upon purchase, you’ll receive a link to an installation guide and a password to view the guide

2. Open up your website’s dashboard in Squarespace

3. Click the Website tab from the menu, then Pages. Scroll down to Utilities and click Website Tools » Code Injection

4. Under Code Injection, copy and paste the code from your installation guide into the FOOTER field

5. NOTE: You will see two chunks of code. If you only need one extra header button, copy and paste the first chunk of code. If you need 3 or more header buttons, copy and paste the second chunk of code

6. After you’ve pasted the correct code into the FOOTER field, make sure to click SAVE in the top left corner (NOTE: you will need to be on a Squarespace “Business” plan in order to add custom code to your website)

---

3. Enable the First Button in Header Elements

1. Make sure that you have the button option enabled in the settings for your site header

2. Click EDIT on the top left corner of any website page

3. Hover over your site header and click EDIT SITE HEADER

4. On the left side, click ADD ELEMENTS

5. Enable the Button element by toggling the Button slide toggle on

6. This will enable the default Squarespace header button

7. You can edit this first button by double clicking on it in the header and adding your button Text + Link

---

4. Create Your Second Button (+ Third, Fourth, etc…)

1. Go back to your site’s Code Injection where you originally pasted the installation code

2. The first option in our code is 'position'. It will be set to 'after' by default. This means that the second button will appear after the first button. If you’d like it to appear first, change this option to 'before'

3. class':'common-class' does not need to be edited unless you would like to change the button class

4. Our next option is 'link':'/contact'. Change /contact to the URL slug of the page that you’d like to link the button to. You can find the page URL slug within the individual page settings under URL SLUG. For example, if your URL slug is /book-a-call, then you would change the code to look like this: 'link':'/book-a-call'

5. Next is 'text':'Contact'. Change 'Contact' to whatever text you’d like the button to say

6. You can use 'class':'another-class' if you’d like to add a different class to this button. This is optional

7. If you’d like this button link to open in a new browser tab, change 'target': '_parent' to 'target': '_blank'

8. Finally, change 'displayOnMobile':'yes’ to ‘no’ if you don’t want this button to display on mobile

9. If you are enabling three or four or more header buttons, repeat the steps above for each new button

---

5. Customize Your Button Colors (Optional)

1. Your secondary button will follow the same color as the default first header button. If you’d like to change the colors of your secondary button, we’ll need to use some CSS. Our secondary button has the class of .another-class. We’ll need this class when adding some custom CSS

2. Open up your website’s custom CSS by clicking the Website tab from the menu, then Pages. Scroll down to Utilities and click Website Tools » Custom CSS

3. Copy and paste the following CSS. Change the colors to whatever you’d like!

.another-class {
  background: transparent !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
}

---

Did you enjoy this article? Check out more articles like this in the Squarespace Blog. In the blog, I share tips for hiring Squarespace Designers (or becoming one!), custom CSS and Javascript solutions, latest Squarespace news and updates, my favorite plugins, Squarespace Template Shops, and more!

---

Browse Premium Squarespace Templates

My modern, service-based templates are designed for entrepreneurs and small businesses who are looking for a professional website design without breaking the bank. Each one of my templates includes my 10-module launch course (which walks you through every single step of customizing the template) and my Bonus SEO Crash Course (which outlines the exact techniques I use to help my SEO clients land on Google page 1).

---

More from the Squarespace Design blog …