menu

How To Add HTML to Your Squarespace Gallery

Reading Time: 2 minutes

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:

  • 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!


Disclosure: Please note that some links on this website are affiliate links, which generates a small amount of revenue to support the free content we provide.

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect + Follow:

Accelerate Your Visibility with SEO

Get access to three workshop replays and a friendly and welcoming student community group, all while creating one massive step forward in building your organic search marketing funnel.

Freelance concept. Desktop with laptop, notebook, coffee cup and plant. business workspace in home or office with work tools on wooden table. stylish work place in light
Save on Courses & Workshops!

35% Off

While our office is closed for vacation, snag our workshops and courses at a great rate. Learn marketing strategy and SEO techniques just for knowledge businesses such as creatives, consultants, coaches, attorneys, and financial advisors.