Add More Than Two Buttons to a Squarespace Cover Page

Table of Contents

Are you trying to use a Squarespace cover page but hate the 2 button limit? Here's a quick fix to add more buttons!

Note: You could also use Navigation instead of Buttons and then style it to look like the buttons.

Step 1 - Where to Add the Code

Since Cover Pages work a little differently from regular pages, we have to add the code by going to your Pages menu and clicking the little gear icon that appears when you hover over your Cover Page name on the left. In the popup that appears, click on Advanced, and then enter the code in the Page Header Code Injection section.

Step 2 - The Code for Cover Page Buttons

Copy and paste the following code into the section we opened above.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<li id="button1">
  <a href="https://www.google.com">
    Get Notified
  </a>
</li>
<li id="button2">
  <a href="https://www.google.com">
    Get Notified
  </a>
</li>

<script>
  $( document ).ready(function() {
    $( "#button1" ).appendTo( $( "ul" ) );
    $( "#button2" ).appendTo( $( "ul" ) );
  });
</script>

That's it! Now you can modify the URLs in the code above to whatever URL you want. If the URL is to an external website, make sure you include the "http://www." or "https:/www." part. If the URL is to a page within your own website, just add the slug, so "/contact-us" for example

.You can add/remove buttons as needed as well. Just copy the

<li id="button2">
  <a href="https://www.google.com">
    Get Notified
  </a>
</li>

code and give it a new ID like "button3" for the third button you add. Make sure you also copy the

$( "#button2" ).appendTo( $( "ul" ) );

line and paste it again with #button3 instead.