How To Add HTML to Your Squarespace Gallery

Awhile back, Squarespace removed the ability to insert HTML in galleries, which is a huge problem for many website owners. You can’t add line breaks, bold, italic, or anything else. What a HUGE giant pain!

Here’s an example of HTML in a gallery, this one on a Design in a Day™ client’s portfolio, where we wanted to break the lines a specific way:

Squarespace Gallery Example - Florist’s Website

However, there is a workaround for this! First off, here’s what you need to know:

How to Use HTML in Squarespace Galleries
  • These instructions only work for the Gallery Block (ie, you’ve inserted the gallery on a plain page).

  • You likely will need a Squarespace Business plan or above to implement this, though you could work around this limitation by placing the code in a markdown block on the pages you want the galleries to allow HTML.

  • This could stop working at any time—Squarespace regularly rolls out updates without consideration for custom code, so this is the risk we run on this platform.

  • Squarespace support won’t help you with this, because they do not support or advise customers use coding on their sites.

  • If you’re not comfortable with some amount of code, we do not recommend this solution. Instead, you may want to hire an on-demand coder, such as UseSixty, to help you out.

  • Ajax MUST BE disabled in your site styles area, or else this won’t work.

Step One: Place the following code in the Settings > Advanced > Code Injection > Header area. Then save.

<script> Squarespace.onInitialize(Y, bxb => { const decode = a => { let b = document.createElement("textarea"); return (b.innerHTML = a), b.value; }, a = document.querySelectorAll(".image-slide-title, .slide .meta-title"); a.forEach(b => { b.innerHTML = decode(b.textContent); }); }); </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/
jquery.min.js"></script>

Step Two: If you do not already have Jquery installed on your site, add it to the header code injection in the same area.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

Step Three: “Hard Refresh.” (Shift + Refresh on your keyboard.)

Now you’ll be able to add HTML to your galleries. Keep in mind that while you’re editing, the HTML will still display to you, but it will not be visible to your site visitors, so don’t freak out! (But do verify everything in incognito mode in your browser.)


Tired of wrestling with designing your own Squarespace website? Let the pros handle it with our easy-peasy Design in a Day™ program!