Language
Hotspots, tooltips, and shoppable lifestyle photos on your Squarespace site — via the Code Block, no plugins.
On Squarespace 7.1 every plan. On 7.0 from the Business plan.
Upload a photo, place markers, fill tooltip content. Auto-save handles saving.
Copy the two-line HTML from the picpins dashboard.
In the Squarespace editor add a Code Block, choose HTML mode, paste the code.
Squarespace uses Code Blocks for any HTML embedding. The feature is available on all 7.1 plans by default — on the older 7.0 only from the Business plan.
In the page editor click + at the desired position ("Add Block"). In the block menu under More you find Code. Click it, the block is inserted.
In the code editor window choose HTML as mode (default is usually HTML). Paste the embed code, close the editor — the block saves automatically.
Same as on normal pages: in the blog post editor click +, add a Code block, HTML mode, paste the code. Works in the post body as well as excerpt areas, if your theme supports blocks there.
On product detail pages Code Block does not work directly — product pages are more restricted in Squarespace. Workaround: create a separate "Look" or "Inspiration" page with a Code Block and link to it from the product.
Alternatively you can use the theme footer (Settings → Advanced → Code Injection) for global scripts, so the embed script is available everywhere and you only need the container in custom HTML areas.
If you use picpins embeds on many pages, load the script once globally: Settings → Advanced → Code Injection → Footer. Insert the <script src="https://picpins.com/embed.js" async></script> tag there.
On individual pages then only the <div class="picpins-embed" data-token="..."></div> container is needed in the Code Block. Saves script duplicates.
Wedding or editorial photo, hotspots on make-up, outfit designers, locations with credit links.
Project hero image, markers with tools, contributors, awards.
Photo of the venue, hotspots on seating areas, menu highlights, event spaces.
Photo of the hotel, beach, or city, markers with tips, restaurants, sights.
Settings → Advanced → Code Injection → Footer, saves duplicates.On Squarespace 7.1 yes, on all plans from Personal up. On Squarespace 7.0 you need at least the Business plan because Code Blocks are unlocked there.
In site settings under Help → System Information. New sites since around 2018 are 7.1 by default. 7.0 sites are recognizable by older templates like "Brine" or "Bedford".
Squarespace Code Blocks have no fixed height limit — content flows naturally. If your embed appears clipped, it is usually theme CSS. Add a rule in Custom CSS (Design → Custom CSS): .picpins-embed { min-height: 600px; }.
Not directly — product detail pages do not allow Code Blocks in Squarespace. Workaround: create a separate Lookbook or Inspiration page, place the embed there, and link to it from the product page.
Yes, every Code Block can hold its own embed. To optimize performance: load the script tag once globally via Code Injection and keep only the container in Code Blocks.
Yes, as long as your Member Area content is built with the normal Squarespace editor. Code Blocks behave the same as on public pages.
Squarespace AI tools (text generation, image editing) do not interact with Code Blocks. Your embed stays unchanged, regardless of what the AI tools do on the rest of the page.
Squarespace pages are generally script-heavy (own tracking and editor scripts). The added picpins embed loads asynchronously — Lighthouse score is barely affected.
One Code Block, one embed, one interactive image. Try it for free.