How to add a wishlist to a Squarespace blog

The install guide for Stak Shortlist. Around fifteen minutes, most of it spent in Squarespace rather than here.

All install guides

Before you start

Your site must be on a plan that allows custom code — Business, or one of the Commerce plans. Squarespace blocks code injection on Personal and Basic, so nothing of this kind can run there. Check under Settings, then Billing, if you’re not sure.

Your items must be blog entries. Shortlist v1 runs on Squarespace 7.1 blog collections, where each entry has its own page. It does not run on Commerce products, gallery collections, events, or Squarespace 7.0. If your items are Squarespace products, Stak Quote Cart is the one that fits.

You’ll paste two blocks of code into two different places. They are not interchangeable, and swapping them is the most common install problem — the symptom is that nothing happens at all.

Block	Where it goes
Block 1	Code Injection, Footer box. Runs site-wide.
Block 2	A Code Block on your shortlist page.

Each block says which one it is in its first three lines.

The customiser needs to know which pages carry your items, and it works that out from one of your item URLs.

Read the slug from Page Settings

1. Website, then Pages
2. Hover your blog page, click the gear icon
3. Look at the URL slug field

If the slug is talent, your value is /talent/.

Or type the path directly

1. In the address bar, type your domain followed by the blog page’s slug, e.g. yoursite.com/talent
2. Click into one entry
3. Copy the address from the bar

Anything containing /config/ is the Squarespace editor, not your site. The customiser will reject it and tell you so.

Open the customiser link from your purchase email.

Where it runs. Paste the item page address from step 1 into the first field. Paste the whole thing — the part that matters is extracted for you. A grey line underneath confirms what it resolved to. If that line is red, read it before going on.

Look. Pick an icon, a colour, and where the save button sits on an item page:

• On the main image — over the item’s main photo, in a corner you choose
• Next to the title — inline after the item title, so nothing covers the photo
• Beside a button — next to a button your pages already have, such as Enquire. A tick-box lets the save button take that button’s place instead of sitting beside it

The enquiry form. The field label here must match a field you’ll add in step 5, exactly.

Wording. Optional. Every word of the interface can be changed or translated here.

Download your file when you’re done. You have 30 days to come back and adjust anything while you’re getting set up.

1. Website → Pages
2. Scroll past every page in the list to the bottom
3. Custom Code → Code Injection
4. Find the Footer box. Not Header
5. In your downloaded file, find BLOCK 1 — FOOTER CODE INJECTION and copy from the <!-- beneath it down to the final </script>
6. Paste into the Footer box and save

1. Add a new page at the path you set in the customiser — /shortlist unless you changed it
2. Add a Code Block to it
3. Copy BLOCK 2 — SHORTLIST PAGE CODE BLOCK from your file and paste it in

The block will look like nothing much in the editor. That’s expected — it fills itself in on the live site.

1. Add a Form Block directly underneath the Code Block, on the same page
2. Add whatever fields you want — name, email, message
3. Add one more field, a Text or Paragraph field, labelled exactly Items you’re enquiring about (or whatever you set in the customiser)
4. Point the form wherever your forms already go

That field is what Shortlist writes into. It fills when the page loads and locks so visitors can’t edit it. Everything else about the form is yours.

Open one of your item pages on your live site, not in the editor preview. Code injection behaves differently inside the editor and may not run at all.

• A save button on the item page
• A save button on each card on your listing page
• A counter appearing once you’ve saved something
• The counter opening a panel with your saved items
• Your shortlist page listing them, with the form field filled in

If nothing happens

Open your live site, press F12 (or Cmd-Option-I on a Mac), click Console, paste this and press Enter:

document.documentElement.outerHTML.indexOf('STAK_SHORTLIST_CONFIG')

It returns -1

Block 1 isn’t on the page. Either it didn’t save, it went in the Header box instead of Footer, it went into a single page’s settings rather than the site-wide panel, or the plain-text header from the file got pasted in with it.

It returns a number, but no button appears

Block 1 is running but doesn’t think it’s on an item page. Paste this:

window.STAK_SHORTLIST_CONFIG.itemPaths

Compare what it prints against the address of the page you’re on. If the page is /talent/jane-doe and this says /portfolio/, that’s your answer.

The save button works but the form field stays empty

The label doesn’t match. Check the exact wording of your form field against the customiser’s form field label. Capitals and apostrophes count.

Why this isn’t a weekend job

It’s a fair question whether you could just write this yourself, or have an AI assistant write it. You can get something that half works in an afternoon. Here’s what the other half consists of — every one of these was found by installing the plugin on a real Squarespace site and watching it fail.

• Squarespace 7.1 blog grids use the class blog-basic-grid--item. The obvious selectors — anything matching blog-item — miss it entirely, so no save buttons appear on your listing page. A geometry-based fallback is what actually catches them.
• Squarespace swaps page content without a full reload. Click from one item to the next and your buttons vanish, because the script that added them already ran. It needs a MutationObserver watching for the swap.
• Writing into a Squarespace form field needs the events React’s synthetic system recognises. Set the value the normal way and the field looks correct on screen, then submits empty. This one is invisible until a real enquiry arrives blank.
• SVG inside an HTML attribute breaks the parser. Icon variants have to live in JavaScript, not in markup.
• localStorage throws in sandboxed preview frames. Every access needs wrapping or the whole script dies inside the Squarespace editor.
• A filled icon is not the same shape as an outlined one. Swap between two differently-drawn paths and the icon visibly jumps size when someone saves. Fixing it properly means one shape carrying both states.
• Squarespace redirects your own domain to the admin panel while you’re logged in, so even testing your own work is less obvious than it sounds.

None of these is hard once you know. The cost is finding out, on your own site, in front of your own visitors.

Things worth knowing

Shortlists live in the visitor’s browser. No account, no login, nothing stored on your site or ours. The same person on a different device is a different visitor, unless they use the share link.

Nothing phones home. There’s no licence key and no check against our servers. The code runs entirely on your site.

Compatibility. Updates for Squarespace changes are included for twelve months from purchase, then they’re a paid update. Bugs in what we shipped are fixed free, whenever they turn up. Your version keeps working either way.