Des images shoppables pour Squarespace Un seul bloc Code.
Ajoutez un bloc Code, collez une balise, enregistrez. Vos photos deviennent interactives : un repère sur chaque produit, des infobulles aux couleurs de votre marque, des liens vers vos produits.
Gratuit pour toujours — 3 images, 1 en ligne · Aucune extension Squarespace · Sans carte bancaire
Voir le résultatInstallation
De votre photo à votre site Squarespace.
Avant de commencer
Vérifiez d'abord votre forfait
Squarespace exécute le JavaScript des blocs Code avec les forfaits Core, Plus et Advanced (et certains anciens forfaits). Sur un forfait qui ne le permet pas, le bloc n'affiche rien.
- 01
Créez votre image shoppable
Importez votre photo dans Markspot, placez un repère sur chaque produit, puis ajoutez son nom, son prix et son lien. Cliquez sur Publier pour obtenir votre code d'intégration.
- 02
Copiez le code d'embed
Dans votre tableau de bord Markspot, ouvrez le panneau d'installation de l'image et copiez le code. Chaque image a son propre identifiant d'intégration.
- 03
Modifiez la page
Ouvrez la page où l'image doit apparaître et cliquez sur Modifier.
- 04
Ajoutez un bloc Code
Dans la section, cliquez sur Ajouter un bloc (ou +) et choisissez Code.
- 05
Collez la balise en mode HTML
Cliquez sur l'icône crayon du bloc et collez la balise. Laissez le mode sur HTML et Display Source désactivé : sinon, le code s'affiche comme du texte.
- 06
Enregistrez et vérifiez déconnecté
Cliquez sur Enregistrer. Le code personnalisé peut ne pas s'afficher quand vous êtes connecté : ouvrez la page dans une fenêtre privée, ou prévisualisez-la en mode sans échec.
Étape 01 sur 06
Créez votre image shoppable
Importez votre photo dans Markspot, placez un repère sur chaque produit, puis ajoutez son nom, son prix et son lien. Cliquez sur Publier pour obtenir votre code d'intégration.
Étape 02 sur 06
Copiez le code d'embed
Dans votre tableau de bord Markspot, ouvrez le panneau d'installation de l'image et copiez le code. Chaque image a son propre identifiant d'intégration.
Étape 03 sur 06
Modifiez la page
Ouvrez la page où l'image doit apparaître et cliquez sur Modifier.
Étape 04 sur 06
Ajoutez un bloc Code
Dans la section, cliquez sur Ajouter un bloc (ou +) et choisissez Code.
Étape 05 sur 06
Collez la balise en mode HTML
Cliquez sur l'icône crayon du bloc et collez la balise. Laissez le mode sur HTML et Display Source désactivé : sinon, le code s'affiche comme du texte.
Étape 06 sur 06
Enregistrez et vérifiez déconnecté
Cliquez sur Enregistrer. Le code personnalisé peut ne pas s'afficher quand vous êtes connecté : ouvrez la page dans une fenêtre privée, ou prévisualisez-la en mode sans échec.
Touchez un hotspot pour explorer
Le résultat
Votre photo, sur Squarespace. Devenue vitrine.
Touchez un hotspot pour explorer
↑ Ceci est un vrai Markspot. Survolez ou touchez un hotspot pour voir ce que verront vos clients.
La balise d'embed
<script src="https://markspot.app/embed/embed.a0785de482c7.js"
data-embed-id="YOUR_EMBED_ID"
integrity="sha384-oHhd5ILHywvcsJMcVDYzLK8iGo5QR0xWsnMAY/6dbt23Bjb6hTrgF+QQaURTXoEf"
crossorigin="anonymous"
async></script>Remplacez YOUR_EMBED_ID par l'identifiant indiqué dans votre tableau de bord Markspot.
Modèles 7.0 avec chargement Ajax
Certains modèles de la version 7.0 chargent les pages en Ajax, sans rechargement complet, et le script d'un bloc Code peut ne pas s'exécuter après une navigation. Désactivez le chargement Ajax dans les styles du site, ou ajoutez le script une seule fois dans l'injection de code (pied de page) et placez l'élément dans vos blocs Code : il revient sur chaque page.
Une seule fois, pour tout le site
<script src="https://markspot.app/embed/embed.a0785de482c7.js"
integrity="sha384-oHhd5ILHywvcsJMcVDYzLK8iGo5QR0xWsnMAY/6dbt23Bjb6hTrgF+QQaURTXoEf"
crossorigin="anonymous"
async></script>À l'endroit de l'image
<markspot-embed embed-id="YOUR_EMBED_ID"></markspot-embed>Où l'utiliser
Où la placer sur votre site Squarespace.
01
Sections de page
Un bloc Code dans n'importe quelle section : une image d'en-tête shoppable, une double page de lookbook, un produit vedette.
02
Articles de blog
Rendez vos articles shoppables : repérez chaque produit de vos photos.
03
Pied de page
Un bloc Code dans le pied de page affiche la même image sur toutes les pages, par exemple une sélection de saison.
04
Pages de campagne
Une page par collection ou par campagne, avec plusieurs images shoppables.
Dépannage
Quelque chose cloche ? Voici pourquoi.
Symptôme
Le code s'affiche comme du texte
Solution
Réglez le mode du bloc Code sur HTML et désactivez Display Source.
Symptôme
Rien ne s'affiche quand vous êtes connecté
Solution
Squarespace peut ne pas afficher le code personnalisé aux éditeurs connectés. Vérifiez la page déconnecté ou dans une fenêtre privée.
Symptôme
Elle s'affiche après rechargement, pas après un clic
Solution
Votre modèle 7.0 charge les pages en Ajax, ou la page est dans une page index. Utilisez l'installation en deux parties ci-dessus, ou désactivez le chargement Ajax.
FAQ
Markspot sur Squarespace, en clair.
Créez l'image dans Markspot et copiez sa balise d'intégration. Dans Squarespace, modifiez la page, ajoutez un bloc Code, collez la balise en mode HTML et enregistrez.
Core, Plus et Advanced, ainsi que certains anciens forfaits : ce sont eux qui exécutent le JavaScript des blocs Code et proposent l'injection de code.
Squarespace peut ne pas exécuter le code personnalisé quand vous êtes connecté. Vérifiez la page publiée déconnecté, ou dans une fenêtre privée.
Oui. Sur les modèles 7.0 qui utilisent le chargement Ajax, utilisez l'installation en deux parties (le script dans l'injection de code, l'élément dans un bloc Code) ou désactivez le chargement Ajax.
Non. Les noms, prix et liens sont ceux que vous saisissez dans Markspot. Mettez à jour le repère quand un prix change ; chaque repère mène à votre fiche produit.
Rendez votre site Squarespace shoppable, gratuitement.
Aucune extension. Un bloc Code. En ligne en quelques minutes.