Sprache
Hotspots, Tooltips und shoppbare Lifestyle-Fotos auf deiner Squarespace-Seite — über den Code-Block, ohne Plugins.
In Squarespace 7.1 in jedem Plan. In 7.0 ab Business-Plan.
Foto hochladen, Marker setzen, Tooltip-Inhalte füllen. Auto-Save übernimmt das Speichern.
Im picpins-Dashboard die zwei Zeilen HTML kopieren.
Im Squarespace-Editor einen Code-Block hinzufügen, HTML-Modus wählen, Code reinpacken.
Squarespace setzt auf Code-Blocks für jegliche HTML-Einbettung. Die Funktion ist in 7.1 standardmäßig in allen Plänen verfügbar — in der älteren Version 7.0 erst ab dem Business-Plan.
Im Page-Editor an der gewünschten Stelle auf + klicken („Add Block"). Im Block-Menü unter More findest du Code. Drauf klicken, Block wird auf der Seite eingefügt.
Im Code-Editor-Fenster HTML als Modus wählen (Standard ist meist schon HTML). Embed-Code reinpacken, Editor schließen — der Block speichert automatisch.
Genau wie in normalen Pages: Im Blog-Post-Editor auf +, Code-Block hinzufügen, HTML-Modus, Code rein. Funktioniert sowohl im Beitrags-Body als auch in Excerpt-Bereichen, sofern dein Theme dort Blocks unterstützt.
Auf Produkt-Detail-Pages funktioniert Code-Block nicht direkt — Produkt-Pages sind in Squarespace eingeschränkter. Workaround: Eine separate „Look"- oder „Inspiration"-Page mit Code-Block anlegen und im Produkt auf diese verlinken.
Alternativ kannst du im Theme-Footer (Settings → Advanced → Code Injection) globale Skripte einbauen, sodass das Embed-Skript überall verfügbar ist und du in Custom-HTML-Areas nur noch den Container brauchst.
Wenn du auf vielen Pages picpins-Embeds nutzt, kannst du das Skript einmal global laden: Settings → Advanced → Code Injection → Footer. Dort den <script src="https://picpins.com/embed.js" async></script>-Tag einfügen.
Auf den einzelnen Pages reicht dann nur noch der <div class="picpins-embed" data-token="..."></div>-Container im Code-Block. Spart Skript-Duplikate.
Hochzeitsfoto oder Editorial-Bild, Hotspots auf Make-up, Outfit-Designer, Locations mit Credit-Links.
Projekt-Hero-Bild, Marker mit Tools, Beteiligten, Awards.
Foto vom Lokal, Hotspots auf Sitzbereiche, Menü-Highlights, Veranstaltungsorte.
Foto vom Hotel, Strand oder Stadt, Marker mit Tipps, Restaurants, Sehenswürdigkeiten.
Settings → Advanced → Code Injection → Footer einbauen, spart Duplikate.In Squarespace 7.1 ja, in allen Plänen ab dem Personal-Plan. In Squarespace 7.0 brauchst du mindestens den Business-Plan, weil dort Code-Blocks erst freigeschaltet werden.
In den Site-Settings unter Help → System Information. Neue Sites seit ca. 2018 sind standardmäßig 7.1. 7.0-Sites sind erkennbar an älteren Templates wie „Brine" oder „Bedford".
Squarespace Code-Blocks haben keine feste Höhenbeschränkung — Inhalt fließt natürlich. Wenn dein Embed abgeschnitten erscheint, liegt es meist am Theme-CSS. Im Custom-CSS (Design → Custom CSS) eine Regel ergänzen: .picpins-embed { min-height: 600px; }.
Direkt nicht — Produkt-Detail-Pages erlauben in Squarespace keine Code-Blocks. Workaround: Eine separate Lookbook- oder Inspirations-Page anlegen, das Embed dort platzieren und auf der Produktseite einen Link dorthin setzen.
Ja, jeder Code-Block kann ein eigenes Embed enthalten. Wenn du Performance optimieren willst: Skript-Tag einmal global per Code Injection laden, in Code-Blocks nur den Container belassen.
Ja, sofern dein Member-Area-Inhalt mit dem normalen Squarespace-Editor erstellt wird. Code-Blocks laufen genauso wie auf öffentlichen Pages.
Squarespaces AI-Tools (Text-Generierung, Image-Bearbeitung) interagieren nicht mit Code-Blocks. Dein Embed bleibt unverändert, egal was die AI-Tools auf der restlichen Seite tun.
Squarespace-Seiten sind tendenziell skript-lastig (eigene Tracking- und Editor-Skripte). Der zusätzliche picpins-Embed lädt asynchron — Lighthouse-Score wird kaum beeinflusst.
Ein Code-Block, ein Embed, ein interaktives Bild. Probier es gratis.