How to Add a Dual Language Footer to Your Squarespace Site
UPDATE OCTOBER 12, 2023- the following blog post is obsolete since the latest Squarespace update. Instead, I recommend you follow this tutorial on how to make a dual-language site and then leave your footer general (with only social media icons, logo, and opening hours).
Lately, I’m being asked to build a lot of dual-language sites within Squarespace (rightly so, since I live in Berlin and most people speak 2+ languages.). While building the site in two languages is fairly straightforward (more on that in a future post) - the footer was still an enigma for me….until today! I finally cracked the code (with the help of a few forums).
In the text below I break down how to add a dual language footer to your Squarespace site. Hopefully, it makes sense. If not, don’t hesitate to holla!
Here’s how to add a dual language footer to your Squarespace site.
First, add this widget to your Chrome browser. It will highlight the section ID number on your Squarespace site.
Next, create 2 Footers (if you have already created one, you can just use the duplicate button and then translate your new one). To add a dual footer you can: Edit Site Footer > Click Plus icon > Add Blank Section (or just duplicate). The footer on top should be your site’s main language. The bottom footer should be your second language.
Then, using the Chrome extension, you need to identify what the Section ID is for each footer. I would recommend jotting down each footer’s section ID on a text doc.
Ex. Top footer/Main language= 6040bbd67f8d8741ab77457c,
Bottom footer/2nd language= 5ffdc44eeebe5c34a6cad988
Finally, you have to insert a little bit of code onto EACH PAGE. To do that, click the Gear button next to each page > Click Advanced > Click Page Header Code Injection.
Here’s the code to use:
For all of your Main Language pages insert this code:
<style>
[data-section-id=“SECTIONIDFORSECONDLANGUGEFOOTER”] {
display: none;
}
</style>
2. For all of your Second Language pages insert this code:
<style>
[data-section-id=“INSERTSECTIONIDOFYOURMAINHERE”] {
display: none;
}
</style>