Des images shoppables pour WordPress Sans plugin.
Collez une balise dans un bloc HTML personnalisé. Vos photos deviennent interactives : un repère sur chaque produit, des infobulles aux couleurs de votre marque, des liens vers vos produits. Compatible avec l'éditeur de blocs, les constructeurs de pages et WooCommerce.
Gratuit pour toujours — 3 images, 1 en ligne · Aucun plugin WordPress · Sans carte bancaire
Voir le résultatInstallation
De votre photo à votre site WordPress.
Avant de commencer
Votre compte doit pouvoir publier des scripts
WordPress supprime les balises de script enregistrées par les utilisateurs qui n'ont pas la capacité unfiltered_html. Sur un site simple, les Administrateurs et les Éditeurs l'ont ; sur un réseau multisite, seuls les Super Admins. Sur WordPress.com, les scripts demandent un forfait qui autorise les plugins.
- 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
Ouvrez la page dans l'éditeur
Dans le tableau de bord WordPress, ouvrez la page ou l'article où l'image doit apparaître.
- 04
Ajoutez un bloc HTML personnalisé
Cliquez sur l'outil d'insertion de blocs + à l'endroit voulu, cherchez HTML personnalisé et ajoutez le bloc.
- 05
Collez la balise
Collez la balise d'intégration dans le bloc. L'onglet Aperçu du bloc montre le résultat.
- 06
Mettez à jour et vérifiez la page
Cliquez sur Mettre à jour (ou Publier) et ouvrez la page. Si l'image n'y est pas, voyez « Si quelque chose ne marche pas » plus bas.
Éditeur classique ? Passez sur l'onglet Texte, pas Visuel, et collez-y la balise. Enregistrez avant de revenir sur Visuel, qui peut réécrire la balise.
É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
Ouvrez la page dans l'éditeur
Dans le tableau de bord WordPress, ouvrez la page ou l'article où l'image doit apparaître.
Étape 04 sur 06
Ajoutez un bloc HTML personnalisé
Cliquez sur l'outil d'insertion de blocs + à l'endroit voulu, cherchez HTML personnalisé et ajoutez le bloc.
Étape 05 sur 06
Collez la balise
Collez la balise d'intégration dans le bloc. L'onglet Aperçu du bloc montre le résultat.
Étape 06 sur 06
Mettez à jour et vérifiez la page
Cliquez sur Mettre à jour (ou Publier) et ouvrez la page. Si l'image n'y est pas, voyez « Si quelque chose ne marche pas » plus bas.
Éditeur classique ? Passez sur l'onglet Texte, pas Visuel, et collez-y la balise. Enregistrez avant de revenir sur Visuel, qui peut réécrire la balise.
Touchez un hotspot pour explorer
Le résultat
Votre photo, sur WordPress. 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.
Les thèmes qui changent de page sans rechargement
Certains thèmes et plugins chargent la page suivante sans rechargement complet (navigation Ajax, transitions de page). Une balise de script collée dans le contenu ne s'y exécute pas à nouveau. Ajoutez le script une seule fois pour tout le site (le champ de scripts de pied de page de votre thème, ou un plugin d'en-tête et pied de page) et placez l'élément dans un bloc HTML personnalisé à l'endroit de l'image.
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>Éditeurs et constructeurs
Où la placer sur votre site WordPress.
01
Pages et articles
Custom HTML Le bloc HTML personnalisé de l'éditeur de blocs, n'importe où dans le contenu.
02
Elementor
HTML Faites glisser le widget HTML (dans la version gratuite) dans la section et collez la balise.
03
Divi
Code Ajoutez un module Code (ou Fullwidth Code) et collez la balise. Autres constructeurs : utilisez leur élément HTML ou code.
04
Fiche produit WooCommerce
Single Product Thème de blocs : Apparence → Éditeur → Modèles → Produit unique, ajoutez un bloc HTML personnalisé et enregistrez ; il s'affiche sur tous les produits. Pour un seul produit, collez la balise dans sa description (onglet Texte).
Dépannage
Quelque chose cloche ? Voici pourquoi.
Symptôme
La balise disparaît à l'enregistrement
Solution
Votre compte n'a pas la capacité unfiltered_html, donc WordPress supprime le script. Demandez à un Administrateur (Super Admin en multisite) d'ajouter le bloc. Si même les Administrateurs n'y arrivent pas, wp-config.php contient DISALLOW_UNFILTERED_HTML à true.
Symptôme
La page s'affiche mais pas l'image
Solution
Un plugin d'optimisation combine, minifie ou retarde sans doute le script, ce qui casse sa vérification d'intégrité. Excluez le script Markspot dans WP Rocket (Optimisation des fichiers : listes d'exclusion JavaScript), Autoptimize (« Exclude scripts from Autoptimize ») ou LiteSpeed Cache (Page Optimization → Tuning : JS Excludes et JS Deferred / Delayed Excludes), puis videz le cache.
Symptôme
L'image disparaît après un changement de page
Solution
Votre thème charge les pages sans rechargement. Utilisez l'installation en deux parties ci-dessus : le script une fois pour tout le site, l'élément dans la page.
FAQ
Markspot sur WordPress, en clair.
Créez l'image dans Markspot et copiez sa balise d'intégration. Dans l'éditeur WordPress, ajoutez un bloc HTML personnalisé à l'endroit voulu, collez la balise et cliquez sur Mettre à jour.
Non. Markspot est une simple balise de script qui se colle dans un bloc HTML personnalisé ou l'élément HTML de votre constructeur de pages. Rien à installer ni à mettre à jour.
Avec les forfaits qui autorisent les plugins. WordPress.com retire les scripts du contenu sur ses autres forfaits : vérifiez le vôtre sur wordpress.com/pricing avant de commencer. WordPress auto-hébergé (WordPress.org) n'a pas cette limite.
Oui : dans le modèle Produit unique avec un thème de blocs, ou dans la description d'un produit. Les noms, prix et liens sont ceux que vous saisissez dans Markspot ; ils ne suivent ni votre catalogue WooCommerce ni vos stocks.
WordPress supprime les balises de script enregistrées par les utilisateurs sans la capacité unfiltered_html : tout le monde sauf les Administrateurs et les Éditeurs sur un site simple, tout le monde sauf les Super Admins en multisite. Demandez à un Administrateur d'ajouter le bloc.
Oui, une fois le script Markspot exclu de la combinaison, de la minification et du report du JavaScript. Le cache de pages seul ne pose pas de problème.
Rendez votre site WordPress shoppable, gratuitement.
Aucun plugin. Un bloc. En ligne en quelques minutes.